Vue核心⑤(监视属性)

Vue核心⑤(监视属性)

文章目录

​​案例引入​​​​监视属性​​​​深度监视​​​​监视的简写形式​​​​watch对比computed​​

案例引入

我们实现以下的一个小案例：

我们先不考虑控制台的那一部分，先把切换部分给做出来。

我们可以使用前文刚刚介绍的计算属性。第一部分实现代码如下：

然后控制台的捕获部分就要使用监视属性了。

监视属性

监视属性顾名思义就是我们要监视的属性。那么我们如何去监视一个属性呢。Vue为我们提供了一个新的配置项​​watch​​。我们直接看相关实现代码，再进行解释：

watch里面的被监视属性同样也要写成一个配置对象。其中：

handler是一个回调函数，当被监视的属性值发生变化的时候就会被调用。它会被传入两个参数：一个新值，一个旧值。immediate是一个布尔属性，默认值是false。当设置为true的时候表示初始化的时候也要调用以下handler

不论是已有的属性还是计算属性都可以被监视

我们也可以不通过watch来进行监视，我们可以直接通过vm实现监视(前提是确保vm实例对象已经被创建完毕)，代码如下：

注意：$watch()这个方法的第一个参数是要监视的对象。这个地方是有引号的。我们对象中的属性不写引号是一种简写形式，如果写全的话也是有引号的(因为是字符串类型)。

那么这两种我们如何选择呢？ 如果一开始，也就是创建vm实例对象的时候，就已经很明确要监视谁，就可以直接选择watch配置， 如果创建实例的时候不是很明确要检测谁，后续根据用户的行为才能确定。那么就可以选择vm的相应api来监视

深度监视

我们还是通过一个案例来理解：我们想检测number中的a的变化(b如果发生变化不管)

网页端：

也就是说监视多级结构中某个属性的变化,代码实现如下：

之所以加引号是因为对象里的key必须是字符串，里面直接写​​.​​是不可以的，所以我们只能还原原始的写法。实现效果：

现在我们有新的需求，我们想要检测numbers中所有属性的变化(也就是说只要其中一种属性发生了变化就会被监测到)，如果numbers中有很多很多的属性，继续沿用上面的代码的思路显然代码会非常冗长麻烦。这个时候我们就可以使用​​深度监视​​！

我们只需要添加一个配置项​​deep​​即可。它的默认值是false，以此来保证程序的运行效率。

监视多级结构中所有属性的变化，代码如下：

小结： 深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

监视的简写形式

使用前提：当你监视属性的配置项中只有handler的时候才可以使用。

与前文的计算属性的简写方法一致，直接写成一个函数。函数名对应监视的函数名，方法体就是handler的方法体。

代码如下：

同样的我们也可以使用vm的api进行监视，常规及简写版如下：

//正常写法 vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 deep:true,//深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) //简写 vm.$watch('isHot',(newValue,oldValue)=>{ console.log('isHot被修改了',newValue,oldValue,this) })

注意：此处不能写箭头函数(Vue管理的函数不能写成箭头函数)

watch对比computed

我们发现有时候一个功能可以用这两种方式分别实现。例如我们还是使用前面的一个小案例：有3个input框，姓、名、姓名。当姓和名发生变化的时候，姓名会跟着动态的发生变化。

watch实现：

computed实现：

从这里可以看出使用计算属性的代码是比监听属性更加简洁的。但是这并不是绝对的，有时候我们要实现的功能甚至只有监听属性才能做。

下面我们讲将案例进行修改：我们要求修改之后的变化延迟一秒才生效。

代码实现如下： 使用监视属性实现：

使用计算属性是不能完成这个需求的。因为计算属性的变化全靠return，而我们是没有办法实现延迟return的。

所以我们可以知道：计算属性里面是不能开启异步任务去维护数据的。但是使用监视属性是可以完成的。

当有一个需求，watch能实现computed也能实现，我们一般使用计算属性。但是当我们面临一些异步的计算的时候，我们就要使用watch.

同时还有一个小问题：

我们在这个箭头函数里面使用了this，那么它指向的是Vue的实例对象吗？

确实如此。我们可以在此基础上进行总结：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。