一、使用
- 1、基本用法
- 2、handler方法和immediate属性
- 3、deep属性（深度监听，常用语对象下面属性的改变）
二、讲解

一、使用

1、基本用法

当fullName值变化时，watch监听到并且执行

<div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p>
</div>new Vue({el: '#root',data: {firstName: 'Dawei',lastName: 'Lou',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}}
})

2、handler方法和immediate属性

上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性

watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样immediate: true}
}

3、deep属性（深度监听，常用语对象下面属性的改变）

<div><p>obj.a: {{obj.a}}</p><p>obj.a: <input type="text" v-model="obj.a"></p>
</div>new Vue({el: '#root',data: {obj: {a: 123}},watch: {obj: {handler(newName, oldName) {console.log('obj.a changed');},immediate: true}}
})

我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

二、讲解

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {this.obj = {a: '456'}
}

那么我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了:

watch: {obj: {handler(newName, oldName) {console.log('obj.a changed');},immediate: true,deep: true}
}

这样的方法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

watch: {'obj.a': {handler(newName, oldName) {console.log('obj.a changed');},immediate: true,// deep: true}
}

watch的注销这里就不在多说了，实际开发中，watch会随着组件一并销毁。

Vue中watch用法详解相关推荐

Vue中过滤器用法详解
一.什么是过滤器 Vue.js官方文档说明:可被用于一些常见的文本格式化. 个人理解就是把一些不需要的东西过滤掉,只是对数据进行加工处理然后返回处理后的数据,和计算属性很相似. 二.如何使用过滤器过 ...
pdo mysql limit_PHP mysql中limit用法详解（代码示例）
在MySQL中,LIMIT子句与SELECT语句一起使用,以限制结果集中的行数.LIMIT子句接受一个或两个offset和count的参数.这两个参数的值都可以是零或正整数. offset:用于指定要 ...
php 配置 error_reporting,PHP中error_reporting()用法详解技术分享
在php中error_reporting函数有什么作用? error_reporting([ int $level ] ) - 设置应该报告何种 PHP 错误. 该函数能够在运行时设置 error_r ...
mysql increment_mysql中auto_increment用法详解
在mysql中AUTO_INCREMENT类型的属性用于为一个表中记录自动生成ID功能,也就是会自动自增一个ID了,如现在是1下次会自动是2了,就这么简单,下面来看mysql中auto_increme ...
【 Python 中 int 用法详解】（转载）
Python 中 int 用法详解欢迎转载,转载请注明出处! 文章目录 Python 中 int 用法详解 0. 参考资料 1. int 的无参数调用 2. int 接收数字作为参数 3. int ...
Python 中 int 用法详解
Python 中 int 用法详解欢迎转载,转载请注明出处! 文章目录 Python 中 int 用法详解 0. 参考资料 1. int 的无参数调用 2. int 接收数字作为参数 3. int ...
Python中self用法详解
Python中self用法详解 https://blog.csdn.net/CLHugh/article/details/75000104 首页博客学院下载图文课论坛 APP 问答商城 V ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
c 语言中set的用法,C++中set用法详解
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...
sql语句中exists用法详解
文章目录一.语法说明 exists: not exists: 二.常用示例说明 1.查询a表在b表中存在数据 2.查询a表在b表中不存在数据 3.查询时间最新记录 4.exists替代distinc ...

Vue中watch用法详解

一、使用

1、基本用法

2、handler方法和immediate属性

3、deep属性（深度监听，常用语对象下面属性的改变）

二、讲解

Vue中watch用法详解相关推荐

最新文章

热门文章