如何使用vue.js中的$watch
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用vue.js中的$watch相关的知识，希望对你有一定的参考价值。
参考技术A Observer, Watcher, vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看 如何实现一个简单的 $watch 功能，当然Vue 中使用了很多优化手段，在本文中暂不一一讨论。例子:
// 创建 vm
let vm = new Vue(
data: 'a'
)
// 键路径
vm.$watch('a.b.c', function ()
// 做点什么
)
先阐明在这个 demo 以及Vue 中，它们的关系：
vm 调用 $watch 后，首先调用 observe 函数 创建 Observer 实例观察数据，Observer 又创建 Dep , Dep 用来维护订阅者。然后创建 Watcher 实例提供 update 函数。一旦数据变动，就层层执行回调函数。本回答被提问者采纳
vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码:
HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js 使用watch监听实现类似百度搜索功能 </title> <script src="vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--> <input type="text" v-model="word"> <h1>{{result}}</h1> </div> <script> var app = new Vue({ //实例化vue el:‘#ask‘,//vue控制id为ask的元素, //watch 可以监听多个变量 watch:{ //监听word变量 word:function (newV,oldV) { console.log(‘旧值:‘+oldV+‘=======>新值:‘+newV); //这里可以写异步请求我用的是axios axios.get(‘Api.php?word=‘+newV).then(function (res) { console.log(res,‘这是异步返回的值‘); //这里写异步得到值之后的动作 app.result=res.data; }); } }, data:{ word:‘‘, result:‘‘ } }); </script> </body> </html>
以上是关于如何使用vue.js中的$watch的主要内容，如果未能解决你的问题，请参考以下文章
如何正确使用带有 lodash debounce 的 Vue JS 手表