VUE3中的watch和watchEffect的新用法

 watch监听器 可以监听data其中一个变量的值是否变化 从而执行对应的代码

 watch：{
        被监听的变量名（新值，旧值）{
        不需要返回值
      }
}

了解：另一种监听写法
    写在vue的外面  
    vm.$watch('需要监听的属性'，{
        handler(newVal,oldVal){
           console.log(newVal,oldVal)    
        },
        immediate:true     
})

监听器默认都是浅层监听的

如果是基本数据 那么值变化监听器就会被触发

如果是引用数据类型 那么地址发生改变才会被触发

watch：{
        被监听的变量：{
            hander(新值，旧值){
                
                }，
                deep:true 表示配置深层监听，
                imediate：true 表示立即执行，就是页面一打开就执行
        }
}

补充：watch的简写形式

当页面中没有要配置 深层监听和立即执行监听的时候就可以有以下简写模式： 

 watch:{
                obj(newVal,oldVal){
                    console.log(newVal,oldVal);
                }
  }

watchEffect 是vue3中的响应式API，当访问的响应式发生变化的时候，watchEffect就会重新执行，并更新组件的相关部分。

 const getContentData = async () => {
    //调用接口
    const result = await get(`/api/shop/${shopId}/products`, {
      tab: currentTab.value,
    });
    if (result.errno === 0) {
      content.list = result.data;
    }
  };
  // 调用方法
  watchEffect(() => {
    getContentData();
  });