前言

此文档用来收集自己在用Vue时踩了坑的api

watch的使用

功能：用来监听变量的变化
注意：有时我们会发现本来数据改变了但watch的监听回调却未触发，其主要原因是不同情况得区分写法

参考资料:

// 写法1
watch(()=>obj,()=>{
  // 监听到变化之后要执行的代码
})
// 写法2
watch(obj,()=>{
  // 监听到变化之后要执行的代码
})

那什么情况下是用写法1，什么情况用写法2呢？这需要看你监听的对象的值是如何改变的。

举个例子：

// 在子组件A中，定义了props属性如下
props:{
  data:Object
}
...
setup(props){

}

在此基础上，子组件A中用watch监听data变化的写法，要看你在父组件里是如何传值的

传值场景1：

// 父组件B传值场景1：修改变量属性值
<template>
<A :data='injectData' @click='changeData'>
</template>
<script lang='ts'>
setup(){
  const injectData=ref({});
  function changeData(){
    injectData.value.name='12'
  }
}
</script>
// 像这种修改属性值的情况，在子组件A中就可以写成这样来监听props.data的变化
...
setup(props){
  watch(props.data,(newData,oldData)=>{ // oldData为改变之前的值，newData为改变后 props.data当前的值
    //  这里写监听到数据变化后的代码
  })
 ...

传值场景2:

// 父组件B传值场景2：修改变量的引用指向
<template>
<A :data='injectData' @click='changeData'>
</template>
<script lang='ts'>
setup(){
  const injectData=ref({});
  function changeData(){
    injectData.value={name:12}
  }
}
</script>
// 像这种修改指向的情况，在子组件A中就得写成这样，才能监听到props.data的变化
...
setup(props){
  watch(()=>props.data,()=>{})
}
 ...

vue3常用api功能总览

前言

watch的使用