vue2跟vue3生命函数 watch computed

1、生命函数

Vue2和Vue3钩子变化不大，beforeCreate 、created  两个钩子被setup()钩子来替代

    vue2           ------->          vue3
 
beforeCreate(){}   -------->      setup(()=>{})
created(){}        -------->      setup(()=>{})
beforeMount(){}    -------->      onBeforeMount(()=>{})
mounted(){}        -------->      onMounted(()=>{})
beforeUpdate(){}   -------->      onBeforeUpdate(()=>{})
updated(){}        -------->      onUpdated(()=>{})
beforeDestroy(){}  -------->      onBeforeUnmount(()=>{})
destroyed(){}      -------->      onUnmounted(()=>{})
activated(){}      -------->      onActivated(()=>{})
deactivated(){}    -------->      onDeactivated(()=>{})
errorCaptured(){}  -------->      onErrorCaptured(()=>{})

2、watch

（1）vue2

使用watch创建一个监听器，可以定义一个或多个被监听的数据，并指定一个处理函数响应数据变化；

watch可以是一个对象，也可以是一个函数；

可以使用deep（深度监听）和immediate（立即执行函数）

// 写法一
watch: {
    divisionCode(newVal, oldVal) {
      // 处理函数
    }
  }
// 写法二
watch: {
     list: {
         handler(newVal) {
             this.number++
         },
         deep: true
     }
 }
// 写法三
watch: {
     data： 'change' // 值可以为methods的方法名
 }

 数组（一维、多维）的变化不需要通过深度监听，对象的属性变化则需要deep深度监听

（2）vue3

在组件的setup函数中使用watch函数创建一个监听器；

watch函数接受两个参数：要监听的数据或者表达式，一个回调函数响应数据变化

watch函数内部使用响应式用来追踪依赖关系，只有在回调函数中使用的响应式数据发生变化，才会执行回调函数

可以使用以下参数：

immediate：是否在初始化时立即执行一次回调函数，默认为false。
deep：是否深度观察对象或数组的变化，默认为false。
flush：在触发回调函数之前进行何种操作，默认为"pre"。可选值有："pre"（立即更新DOM）、"post"（延迟到队列中的所有回调函数执行完毕后再更新DOM）和"sync"（在变更时同步应用更改）。
onTrigger：在触发回调函数之前执行的函数。
onStop：当停止观察时执行的函数。
lazy：是否初始不触发回调函数，默认为false。

 <script setup>
   import { ref, watch } from 'vue'
   const count = ref(0)
   const name = ref('cp')


   // 监听单个数据
   watch(count, (newValue, oldValue)=>{
     console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
   })

   // 监听多个数据
   watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
       console.log(count或者name变化了，[newCount, newName],[oldCount,oldName])
   })

   // 参数使用
   watch(count, (newValue, oldValue)=>{
          console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
   },{
        immediate: true
   })

   // 监听对象内数据
   const data = ref({
       phone: "",
       password: ""
   })
   watch(() => data.value.phone, (newValue, oldValue) => {
        if (newValue.length == 11) {
             disabled.value = false
        } else {
            disabled.value = true
        }
    })
   // 监听对象的所有属性
   watch(() => data, (newValue, oldValue) => {
     console.log('watch 已触发', newValue)
   }, { deep: true })
   
 </script>

（3）watchEffect

watchEffect 是 Vue3 中的一个响应式 API，允许你监听响应式状态的变化，并在其发生变化时触发作用函数。

相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch，watcheffect的回调函数会被立即执行（即 {immediate: true}）

watcheffect初始化时，一定会执行一次收集要监听的数据

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

// 当count的值变化时，这个函数会被调用
watchEffect(() => {
   console.log(`Count is: ${count.value}`);
});

// 手动停止监听器
unwatch()

// 用一个变量接收监听器函数的返回值，然后调用该函数，即可关闭当前监听器
</script>

3、computed

计算一个值并将结果缓存起来的方法，当依赖的数据发生变化时，缓存会被重新计算。

computed 具有 getter 和 setter 属性

①getter 属性在使用时分别有两次调用：

• 第一次：初始化，初次访问该属性
• 第二次：当 computed 中的数据发生变化时调用

②setter 属性的调用：

• 当 computed 属性被修改时调用

③注意事项

• setter 属性本身不会修改属性的值，只用于修改属性本身，而 computed 属性的值被修改并不会更新setter 属性的值。
• getter 和 setter 属性不能使用箭头函数，箭头函数中的this不是指向vm，而是window。

（1）vue2

computed:{
  fullName(){
    return this.name1 + '~' + this.name2
  }

  // 完整写法
  sum: {
    get(){
       return this.name1 + '~' + this.name2
    },
    set(value){
        var arr = value.split('~')
        this.name1= arr[0]
        this.name2 = arr[1]
      }
  }
}

（2）vue3

<script setup>
import { ref, computed } from 'vue';
const name1 = ref('黄')
const name2 = ref('晓明')

let fullName = computed(() => {
     return name1.value + '~' + name2.value
    })


// 完整写法
let fullName = computed(() => {
    get(){
       return name1.value + '~' + name2.value
    },
    set(value){
        var arr = value.split('~')
        name1.value = arr[0]
        name2.value = arr[1]
      }
  })

</script>