您好,欢迎来到锐游网。
搜索
您的当前位置:首页关于vue中的侦听器watch

关于vue中的侦听器watch

来源:锐游网

1. 前言

日常开发确实没用过这个,没办法,一般来说我会的都是项目中用到过的,没用过的不太会单独了解,哎,vue入门太快也不好,很多点容易忽视,今天就研究一下watch中两个我不常用的属性,deepimmediate

二、watch三个属性

通过看api得知watch有三个基本属性,分别是 handlerdeepimmediate

2.1 handler属性

handler就是回调函数,也就是当watch监听的值发生改变的时候调用的回调函数,vue会默认在回调函数填入两个参数,分别是改变后的值和改变前的值
代码类似这样


   
   
<script> export default { data: function() { return { person: "张三", } } watch: { person: { handler: function(newVal, oldVal) { console.log(newVal); }, immediate: false, deep: true }, }, } </script>

通过handler绑定事件执行函数,handler接受一个参数
也可以像这样简写:


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

这样就是只绑定了事件处理函数,deepimmediate 均采用默认值
如果想给监听属性绑定多个执行函数, 可以这么写


   
   
watch: { person: [ function(newVal, oldVal){ console.log(newVal); }, { handler: function(newVal, oldVal){ console.log(oldVal); }, deep: true, } ] }

通过这种方式可以为监听属性绑定多个事件处理函数, 这是最常用的一个属性, 借 狂神说java 的一句话:“很多工程师就只会这个handler,你学会剩下deep和immediate属性,就超过了90%的程序员”

2. deep属性

deep属性的默认值为false
举个例子


   
   
data: function(){ return { person: { name: "张三", age: 12 } } }, watch: { person: { handler: function(newVal) { console.log(newVal); }, deep: false } }, methods: { edit: function() { this.person.name = "123" } }

   
   
edit: function(){ this.person = { name: "newName", age: 15 } }

如果将deep属性修改为true,则上述例子结果就不一样,我们将edit代码还原,只修改 person.name 同时将watch中的deep修改为true,当edit方法触发的时候,发现控制台会打印,也就是说watch成功的监听到了person中name属性的改变。
我觉得Vue可能是考虑到性能的问题,如果 deep 属性不是true,没有必要为这个属性的每一个子属性绑定一个侦听器,只有 deep 为true,才会这样做

然而有时候没有必要监听这个person对象的所有属性,可能我们只想监听name属性,那可以这样写


   
   
watch: { "person.name":{ handler: function(newVal, oldVal){ console.log(newVal); } } }

这样可以只监听person对象的name属性

2.3 immediate属性

代表绑定的函数是否立即执行,经过试验,如果 immediate 属性为true, 那么在绑定的时候就会触发,这个过程是在created生命周期之前,应该是在数据劫持的时候完成的(个人猜测,没看过源码)


   
   
<script> export default { name: 'App', data: function() { return { person: { id: 1, name: "张三" }, } }, watch: { person: { handler: function(newVal) { console.log(newVal); }, immediate: true, }, }, created: function(){ console.log(1); } } </script>

最终的结果是handler中的函数先执行,然后才执行created生命周期中的代码

三、注销

发现每一篇博客最后基本都会写注销,我也跟个风(摘自掘金)
组件是经常要被销毁的,平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。
但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了


   
   
const unWatch = app.$watch('text', (newVal, oldVal) => { console.log(`${newVal} : ${oldVal}`); }) unWatch(); // 手动注销watch

vue官网关于实例watch方法解释


app.$watch调用后会返回一个值,就是unWatch方法(手动销毁)

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- ryyc.cn 版权所有 湘ICP备2023022495号-3

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务