监听器 watch

官方文档：https://cn.vuejs.org/v2/api/#watch
官方文档：https://cn.vuejs.org/v2/api/#vm-watch

实例：监听器 watch

Watch 用法1：常见用法

<body><div id="root"><h3>Watch 用法1：常见用法</h3><input v-model="message"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root',watch: {message(value) {this.copyMessage = value}},data() {return {message: 'Hello Vue',copyMessage: ''}}})</script>
</body>

键值一体，键为message，值为message()方法

message(value) {this.copyMessage = value
}

监听器的一些默认值：

Watch 用法2：绑定方法

<body><div id="root2"><h3>Watch 用法2：绑定方法</h3><input v-model="message"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root2',watch: {message: 'handleMessage'},data() {return {message: 'Hello Vue',copyMessage: ''}},methods: {handleMessage(value) {this.copyMessage = value}}})</script>
</body>

键为message，值为’handleMessage()方法，每次监听到message变化，'handleMessage()方法就会执行一次

PS：双向绑定的值（v-model="message"和data() {return {message}}）和watch监听的键要保持一致，同为message

Watch 用法3：deep + handler

<body><div id="root3"><h3>Watch 用法3：deep + handler</h3><input v-model="deepMessage.a.b"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root3',watch: {deepMessage: {handler: 'handleDeepMessage',deep: true}},data() {return {deepMessage: {a: {b: 'Deep Message'}},copyMessage: ''}},methods: {handleDeepMessage(value) {this.copyMessage = value.a.b}}})</script>
</body>

默认情况下 watch方法只监听data中的对象，而无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。（默认：deep:false）

这个案例可以看出：双向绑定的值（v-model="deepMessage.a.b"和deepMessage:{a: {b:'Deep Message'}},）保持一致；watch不能直接监听deepMessage.a.b，而是需要通过handler和deep属性来完成监听

Watch 用法4：immediate

<body><div id="root"><div id="root4"><h3>Watch 用法4：immediate</h3><input v-model="message"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root4',watch: {message: {handler: 'handleMessage',immediate: true,}},data() {return {message: 'Hello Vue',copyMessage: ''}},methods: {handleMessage(value) {this.copyMessage = value}}})</script>
</body>

watch默认情况下在页面首次渲染时，即使监听的值有初始值，也不会直接执行，这种情况下想要第一次渲染后直接监听就需要添加属性：immediate: true

initWatch

createWatch

Watch 用法5：绑定多个 handler

<body><div id="root5"><h3>Watch 用法5：绑定多个 handler</h3><input v-model="message"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root5',watch: {message: [{handler: 'handleMessage',},'handleMessage2',function(value) {this.copyMessage = this.copyMessage + '...'}]},data() {return {message: 'Hello Vue',copyMessage: ''}},methods: {handleMessage(value) {this.copyMessage = value},handleMessage2(value) {this.copyMessage = this.copyMessage + '*'}}})</script>
</body>

监听值为多个，需要用数组形式：

值为对象：执行对象的handler属性值对应方法handleMessage
值为字符串：执行字符串对应方法handleMessage2
值为方法：直接执行方法

先监听的先执行，各自独立，每个都是独立的监听器

本示例中value都是一致的，只有handleMessage获取了这个value，其他监听器处理的都是上一步处理过的copyMessage

若多个监听器监听同一个对象，那么只会渲染最后一次处理结果

Watch 用法6：监听对象属性

<body><div id="root6"><h3>Watch 用法6：监听对象属性</h3><input v-model="deepMessage.a.b"><span>{{copyMessage}}</span></div><script>new Vue({el: '#root6',watch: {'deepMessage.a.b': 'handleMessage'},data() {return {deepMessage: { a: { b: 'Hello Vue' } },copyMessage: ''}},methods: {handleMessage(value) {this.copyMessage = value}}})</script>
</body>

只监听对象的某少数个属性值时，可以用对象.属性字符串形式进行监听

源码解析参见：Vue.js 源码分析(七) 基础篇侦听器 watch属性详解

vue.js中watch的六种用法（附实例解析）相关推荐

Vue.js 中的渲染函数是什么？如何使用渲染函数？
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
Vue.js 3.0快速入门（附电影购票APP开发实战源码）
前言文档笔记来源:kuangshenstudy,清华大学出版社,结合视频资源食用更佳,相关资源源码在文末,有需要自取. 一.概述 Vue是什么? Vue.js是基于JavaScript的一套MVVC ...
echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
html dom createevent,js 中 document.createEvent的用法
js 中 document.createEvent的用法更新时间:2010年08月29日 23:22:02 作者: 用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象. ...
js 中 document.createEvent的用法-转载
js 中 document.createEvent的用法 <a class="comment-mod" οnclick="alert('ss')" hre ...
Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
VUE.js 中取得后台原生HTML字符串原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...

vue.js中watch的六种用法（附实例解析）

文章目录