watch 与 watchEffect监听

这里两个就是与 computed(计算属性有一点点差别)其他都是一样的,上一个章节就写了,看完这个可以去看一下,对比一下;

首先下了解一下 watch;下方是官网的声明,可以简单看一下然后我们在深入看一下

1.浅度监听

                首先我们先创建一个页面然后设置一个 ref 中的变量,在使用 watch去监听它,当然我们也需要使用到 v-model="需要被监听的变量",初始页面差不多就是这样了:然后我们在使用监听器:

理解一下就是使用watch监听器然后里面有我们要监听的变量 我这是叫 obj 然后括号里的是newValue (新值) ,olbValue (旧值),担任也可以只有一个参数,这个不是固定的,然后我在控制台依次输出所以他就回出现新旧新旧的出现,在删除输入框的依旧会出现;

在使用字符串的时候可以直接写我们想监听的变量,但是在监听对象的时我们就需要使用箭头函数了; 比如 obj.value.name 双向数据绑定也要改成 obj,name 否则他是监听不了的,会出现错误!

2.深度监听

深度监听的话可以理解为浅度监听的添加,就是在他监听对象时候不用修改监听器里的变量之需要在后面添加属性 {deep:true} 深度监听呢会消耗一定的资源,在他在你将控制台的数据展开后重新关闭再展开就会刷新出你新的数据了;

我们还可以为他开启一个属性为 immediate(立即执行);就是说原本在重新启动页面的时候他控制台是不会出数据的,但是加了这个,启动就会出现到控制台;

3.watchEffect

接下来我们在去谅解一下第二个 watchEffect 监听器 它呢是一个自动监听的,操作如下:

字符串:

对象:

4.总结:

1. watch与watchEffect 适合用于监听特定数据的变化，并执行相应的回调函数，可以深度监听对象内部的属性变化。
2. watchEffect 会立即执行传入的函数，并在响应式数据变化时自动重新执行，不需要明确指定监听的数据源。

计算属性computed适合用于根据已有数据派生出新的计算结果，并且会自动缓存结果，只有在依赖数据变化时才重新计算。