computed & watch

options下的使用

computed:

//计算属性，有缓存
// 这儿的缓存可以理解为页面多次用到，但计算函数只执行了一次
执行时间: 初始化和相关属性发生变化时会再次触发
直接在computed里面定义变量，然后就可以在页面上进行双向数据；
computed比较适合对多个变量或者对象进行处理后返回一个结果值;

优点
简化tempalte里面{{}}计算和处理props或$emit的传值

应用场景
表单校验，这个应用场景应该是比较常见的，利用正则表达式对每个表单项的实时监控，判断表单是否可以提交；
从Vuex Store中收集相关信息，对Vuex中的数据做计算的时候要特别注意computed的缓存属性，在对Vuex中的对象值进行属性修改的时候，并不会触发computed的中值的变化，这时需要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新。

  computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
}    // computedTest就可以通过{{computedTest}}shiyongle

// 使用get 和 set

computed:{
                username:{
                    // 访问当前属性时调用
                    get(){
                        console.log("get")
                        return this.firstname+" "+this.lastname
                    },
                    // 当前属性变化时调用 val就是变化后的值  在选择框(checkbox)中 val传入的值是选中的状态 true/false
                    set(val){
                        let newnamearr=val.split(" ")
                        this.firstname=newnamearr[0]
                        this.lastname=newnamearr[1]
                    }
                }
            }

watch：//侦听器

1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
//父组件向子组件传递参数，异步监控

props: ["oneList"],
  watch: {
    "oneList": {
      handler(newName, oldName) {
        console.log(newName);   //null
        console.log(oldName)    //undefined
        //   return newName
      },
      deep: true,         // 主要是深度监听对象，数组
      immediate: true,	// 值最初时候watch就执行
    },
  },

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数.
可以获取属性的新值和旧值。

watch擅长处理的场景：一个数据影响多个数据 ；
应用：监听props，$emit或本组件的值执行异步操作，当执行异步操作时必须用watch而不是computed
查看对象的属性
dir(对象)

案例

用来监听路由的变化

  watch: {
    $route() {
      this.routerId = this.$route.params.id; //获取传来的参数
      // console.log(this.routerId);
      this.getHome();
    },
    },
  },

组合式api下的使用

computed计算属性

    // 计算属性计算出的全部姓名
    const fullname = computed({
      get() {
        return user.firstname + "_" + user.lastname;
      },
      set(val: string) {
        const valarr = val.split("_");
        user.firstname = valarr[0];
        user.lastname = valarr[1];
      },
});


// 如果不对新的值修饰，可以采用下面的写法
    const newCount = computed(() => {
      return "新的count" + count1.value;
    });

watch 监听

 watch(
      user,	// ref
      () => {
        fullname1.value = user.firstname + "---" + user.lastname;
      },
      { immediate: true,deep: true}
);

   watch(
      () => {
        // ref对象可以直接使用值，reactive的对象，需要写成函数形式
        return userdata.username;
      },
      () => {
        console.log("userdata.username发生了改变");
      },
      { immediate: true,deep: true }   // 表示一开始就会执行上面的监听
    );


    // watch 的第二种用法，自带第一次的显示
    // watch监听获取到的全部姓名
    watchEffect(() => {
      fullname1.value = user.firstname + "---" + user.lastname;
    });

监听多个

就需要以数组的形式监听,watchEffect不能监听

  watch([
      ()=>state.name1
      ,
      ()=>state.name2
      ,
    ],([new1,new2],[old1,old2])=>{
      console.log("new1",new1)
      console.log("old1",old1)
      console.log("new2",new2)
      console.log("old2",old2)
    })

如何取消监听和清除副作用

1. 取消监听
   
2. 清除副作用