vue中的监听方法watch
注意 名字 你想监听哪个属性，就要和他起一样的名字 1.作用用来监听vue实例中的数据变化
可以随时修改状态的变化 2.触发条件当你监听的属性发生变化时，会自动调用对应的监听方法 3.使用场景用于异步处理，开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') console.log(newvalue,oldvalue) }5.监听对象时<script>export default { data() { return { obj: { name: "张三", age: 20, children: [ { name: "李四", age: 27 }, { name: "王五", age: 23 } ] } }; }, watch: { obj: { handler: function(newVal, oldVal) { console.log("newVal:", newVal); console.log("oldVal:", oldVal); }, deep: true, immediate: true }, "obj.name": function(newVal, oldVal) { console.log("newVal obj.name:", newVal); console.log("oldVal obj.name:", oldVal); } },};</script>监听对象的时候，需要加deep:true，这样才能深入底层去实时监听，如果没有加的话，对象是监听不到变化的。
immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听 deep:true；
是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。 到此这篇关于Vue之监听方法案例详解的文章就介绍到这了,更多相关Vue之监听方法内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
Vue生命周期区别详解
Vue的方法和属性案例详解 |
