vue3新特性computed,watch,watchEffect函数用法

使用computed，watch，watchEffect, 一定记得先引入

import { reactive , computed,toRefs,watch,watchEffect} from "vue";

1.computed属性（和vue2中的配置功能一致)

使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

如图所示，案例：

     <p>原来值:{{ count }}</p>
     <p>计算属性更改的值:{{ twoNumber }}</p>

//引用ref函数 可以实时更新数据
import { defineComponent, reactive , computed,toRefs,watch} from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup() {
    const state: any = reactive({
      count: 1,
      twoNumber: computed(() => state.count*2)
    });
   
   
    //暴露出去给外界使用
    //使用toRefs解构响应式对象数据，实现实时更新
    return {
      ...toRefs(state),
    };
  },

2.watch属性 与 vue2中的 this.$watch (以及相应的 watch 选项) 完全等效。

 watch(()=>state.count,(newValue, oldValue) => {
     console.log('改变了');
     console.log('我是新的值',newValue);
     console.log('我是旧的值',oldValue);
    })

注意：

  有俩个小坑： 1）监视reactive自定义响应式数据的时候，oldValue无法获取，强制开启深度监听失效（deep:true)

 2)监视reactive定义的响应式数据中某个属性时，deep配置有效

watch 三个参数，第一个要监听的对象(可以是函数或者对象），第二个函数，第三个是配置项（immediate:true,deep:true)

     watch(person,(newVal,oldVal)=>{
         console.log('person变化了',newVal,oldVal)
     },{immediate:true})

3.watchEffect函数

     watch的套路是：既要指明监视的属性，也要指明监视的回调

     watchEffect的套路是：不用指明监视哪个属性，监视回调中用到哪个属性，就监视哪个属性

     watchEffect的特点有点像computed：

         但computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值。

        而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

       

     watchEffect(()=>{
         person.firstName = 'hahah'
         console.log('我是监听的数据',person)
     })