vue3 生命周期 / vue2和vue3中ref的用法

1.生命周期定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。
我们称 这一系列的过程 就是Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

钩子函数

钩子：钩子函数可以简单理解为是一种系统在不同的阶断自动执行、用户无须干预的函数。

2.vue3中的生命周期

1.普通写法

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmountedvue3:

<template >
  <div>
    <h3>生命周期</h3>
    <button @click="count++">修改count的值---{{count}}</button>
    <p><button @click="del">点击销毁</button> </p>
  </div>
</template>
<script>
import {ref,getCurrentInstance} from "vue";

export default {
  data(){
    return {
        count:0
    }
  },
 setup(props) {
     console.log("setup")
     const instance=getCurrentInstance()
    return {
      instance,
    }
   },
  methods: {
  //销毁
     del(){
      this.instance.root.appContext.app.unmount()
   },
  },
  beforeCreate() {
    console.log("beforeCreate")
  },
  created() {
    //访问setup中的数据
    console.log("count",this.count) 
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount")
  },
  mounted() {
    console.log("mounted")
  },
  beforeUpdate() {
    console.log("beforeUpdate")
  },
  updated() {
    console.log("updated")
  },
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  },
}
</script>

2.setup中写生命周期

• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

• beforeCreate===>setup()
• created=======>setup()
• beforeMount ===>onBeforeMount
• mounted=======>onMounted
• beforeUpdate===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted

区别

• vue2的beforeCreate和create变成了setup
• 除了setup外大部分还是vue2的名字，只是在前面加了个on
• vue2的destroyed和beforDestroy变成了on

<template>
  <div>
    <button @click="count++">修改count的值---{{count}}</button>
    <p><button @click="del">点击销毁</button> </p>

  </div>
</template>
<script setup>
 import {ref,reactive,getCurrentInstance,onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
const count=ref(0);
const instance=getCurrentInstance();
const del=()=>{
    instance.root.appContext.app.unmount();
}
onBeforeMount(()=>{
  console.log("onBeforeMount");
})
onMounted(()=>{
console.log("onMounted")
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate")
})
onUpdated(()=>{
console.log("onUpdated")
})
onBeforeUnmount(()=>{
console.log("onBeforeUnmount")
})
onUnmounted(()=>{
console.log("onUnmounted")
})

</script>

1.vue2中获取ref

1.vue2.0获取单个ref
    1.通过ref属性绑定该元素
    2.通过this.$refs.box获取元素

2.vue2.0 获取v-for遍历的多个元素
    1.通过ref属性绑定被遍历的元素
    2.通过this.$ref.li获取所有的遍历元素

2.vue3中获取ref

1.vue3.0获取单个ref
 想要绑定ref属性,
  1.1 先定义一个空的响应式数据,ref定义的
  1.2 setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可

2.获取v-for遍历的元素
  2.1定义一个空数组,接收所有的li
  2.2 定义一个函数,往空数组push DoM

<template>
<div>
 <div ref="box">我是box盒子</div>
 <ul>
   <li v-for="i in 4" :key="i" :ref="setdom" >我是第{{i}}个元素</li>
 </ul>
  </div>
</template>
<script setup>
  import {ref,onMounted} from "vue"
  //1.先定义一个空的响应式数据,ref定义的
  //2.setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可
  const box=ref(null);

  onMounted(()=>{
     box.value.style.width="200px";
     box.value.style.height="200px";
     box.value.style.background="pink";
    //console.log(box)
  })

  //2.获取v-for遍历的元素
  //2.1定义一个空数组,接收所有的li
  //2.2 定义一个函数,往空数组push DoM

   const domList=[]
   const setdom=(el)=>{
     //console.log(el);
     domList.push(el);
   }
   console.log(domList);
   onMounted(()=>{
     domList.forEach(el=>el.style.color="red")
   })

</script>

总结:
1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数

3.实现获取页面坐标的demo

<template>
    <div>
      <p>获取当前鼠标坐标x:{{mousePoint.x}}</p>
      <p>获取当前鼠标坐标y:{{mousePoint.y}}</p>
    </div>
</template>  

<script setup>
  import {ref,onMounted,reactive,onUnmounted} from "vue"
   //记录鼠标坐标
const mousePoint=reactive({
  x:0,
  y:0
})
//修改响应式数据
const move=(e)=>{
  mousePoint.x=e.pageX;
  mousePoint.y=e.pageY;
}
//dom渲染完毕监听事件
onMounted(()=>{
  document.addEventListener('mousemove',move)
})
//组件卸载删除事件
onUnmounted(() => {
  document.removeEventListener("mousemove",move)
})

</script>