Vue3复习 常用Composite Api: Computed,watch和watchEffect

Computed计算函数

**computed**
简写方式（只读）

setup(){
let name = computed(()=>{
	//内容
	return XXX	
  });
}

完整写法（可读写）

setup(){
let name = computed(()=>{
	//getter方法在数据读取时会被调用
    get(){
      return XXX
    },
    //setter方法在数据被修改时调用
    set(value){
      //value值为修改后的值
      //对数据的操作
    }
  });
}

watch监听函数

watch，可以传入三个参数：
第一个参数为监听的对象。
第二个参数为一个函数，能够收到两个值，oldValue和newValue，分别为所监听属性修改前后的值，函数体内可以通过监听的数据从而进一步操作。
第三个参数为一个对象，可以配置deep和immediate等参数。

setup(){
  watch(属性名,(oldValue,newValue)=>{
	//函数体内容
  },{immediate:true,deep:true});
}

1、监听多个对象

当有多个对象需要监听时，可以把需要监听的对象包装成数组。

setup(){
//当监听多个对象时，oldValue和newValue返回的也是包装好的数据
  watch([属性名1,属性名2],(oldValue,newValue)=>{
	//函数体内容
  },{immediate:true,deep:true});
}

2、监听整个reactive定义的数据

setup() {
    let person = reactive({
      name: "张三",
      age: 18,
    });
    watch(
      person,(oldValue, newValue) => {
        console.log("person改变了", oldValue, newValue);
      }
    );
    return {
      person,
    };
  },

注意点：修改deep深度监视无效，为一直开启状态

3、监听reactive定义的数据中某个的属性

第一个参数需要写成函数形式，并返回需要监听的属性

watch(()=>person.name,(oldValue, newValue) => {
        console.log("person.name改变了", oldValue, newValue);
      }
    );

4、什么时候在监听的对象后边添加.value

当引用类型的数据通过ref定义的时候，直接监听抛出的对象会出现监听不到的问题

**原因：**通过ref定义的引用类型数据，会生成refImpl对象，这个对象中的value实际上是ref找到reactive实现的（不管用什么方法定义引用数据类型的数据，实际上都是通过reactive定义的），当修改object中的数据时，指针指向并没有改变（数据存放在堆中），所以无法发现数据的变化。
解决办法：

//第一种方式：所监听的对象后边追加.value
watch(person.value,(oldValue, newValue) => {
        console.log("person改变了", oldValue, newValue);
      });
//第二种方式：采用深度监视
watch(person,(oldValue,newValue)=>{
		console.log("person改变了", oldValue, newValue);
	},{deep:true})

**注意：**vue3在监视reactive定义的数据时无法正确获取oldValue的值。

watchEffect函数

一种watch智能方式，不需要指明需要监听的数据，监听的回调中只要用到了哪个数据就会监听哪个数据。immediate默认为true
类似于computed，但computed注重结果，最终的结果需要return出去，watchEffect注重过程，一般在回调函数中添加axios请求等。

watchEffect((oldValue, newValue) => {
        console.log("person.name改变了",person, oldValue, newValue);
      }
    );