这次给大家带来监听方法watch，使用监听方法watch的注意事项有哪些，下面就是实战案例，一起来看一下。
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来
当vue视图中的数据变化时, 关联的函数会被执行
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script></head><body> <p id="root"></p> <script> var vm = new vue({ el: #root, data: { obj: {name: zhaoolee, age: 12} , tel:6666666}, template: `<p><p>姓名: {{obj.name}}</p> <p>电话: {{tel}}</p> <input type="text" v-model="obj.name"> <input type="text" v-model="tel"></p>`, watch: { obj: { handler(){ console.log(obj被改变); }, // 页面加载之初先执行一次handle immediate: true, // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能) deep: true }, obj.name: { handler(){ console.log(=>obj.name被改变); } }, tel:{ handler(){ console.log(tel被改变); } } } }) </script></body></html>
对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写<template>//观察数据为字符串或数组 <input v-model="example0"/> <input v-model="example1"/>/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数 <input v-model="example2.inner0"/></template><script> export default {data(){return {example0:,example1:,example2:{inner0:1,innner1:2}}},watch:{example0(curval,oldval){console.log(curval,oldval);},example1:'a'，//值可以为methods的方法名example2:{ //注意：当观察的数据为对象或数组时，curval和oldval是相等的，因为这两个形参指向的是同一个数据对象handler(curval,oldval){conosle.log(curval,oldval)},deep:true}},methods:{a(curval,oldval){conosle.log(curval,oldval)}} }</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue2实现购物车地址选配
jquery做出上传图片时可优先本地预览
以上就是监听方法watch的详细内容。