watch

用于观察一个表达式或computed函数在Vue.js实例上的变化。回调函数调用时会从参数得到新数据（new value）和旧数据（old value）。表达式只接受以点分割的路径，例如obj,obj.a.如果是比较复杂的表达式，可以用函数代替表达式。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">姓名：<input type="text" v-model="obj.name"><br>年龄：<input type="text " v-model="obj.age"><br><button @click="fn">点我修改</button></div>
</body>
<script src="./vue.js"></script>
<script>// watch:// 1.只要被监听的数据发生改变，就会触发对应的逻辑代码// 2.如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的let vm = new Vue({el: '#app',data: {obj: {name: "xiaoming",age: 18}},watch: {// 如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的// obj: function () {//   console.log('obj改变了');// },// 单独监听obj中的name属性，只要其修改watch就会触发'obj.name': function (newValue, oldValue) {// newValue为新值// oldValue为旧值console.log('obj改变了');console.log('obj改变了');}},methods: {fn() {this.obj = {} // 修改了obj中的内在指向// this.obj.name = "zhansang" //还是在obj中内存中修改不会触发watch}},})
</script></html>

watch深度监听

deep 为true开启，默认为false
开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
数组也是同样如此

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app">姓名：<input type="text" v-model="obj.name" /><br />年龄：<input type="text " v-model="obj.age" /><br /></div></body><script src="./vue.js"></script><script>// watch:// 1.只要被监听的数据发生改变，就会触发对应的逻辑代码// 2.如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的let vm = new Vue({el: '#app',data: {obj: {name: 'xiaoming',age: 18}},watch: {obj: {handler: function () {console.log('obj改变了')},// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码deep: true}}})</script>
</html>

watch的immediate

在选项中指定immediate: true,将立即以表达式的当前值触发回调

 watch: {obj.name: {handler: function () {console.log('obj改变了')},// 立即以obj.name的当前值触发回调immediate: true}}

watch的数组格式

传入的回调数组，它们会被逐一调用

有时我们需要在某一变量中调用多个操作

  watch: {'obj.name': {handler () {this.fn1 ()this.fn2 ()},immediate: true,deep: true}},methods: {fn1 () {console.log('执行了fn1')},fn2 () {console.log('执行了fn2')} }

fn1,fn2都需要在value变动的时候调用，如果需要两者的调用时机不同，以上写法就无法实现了，这就需要用到watch的数组格式了

  watch: {'obj.name': [{handler () {this.fn1 ()},deep: true},// 进入需立即执行一次fn2{handler () {this.fn2 ()},deep: true,immediate: true}]},methods: {fn1 () {console.log('执行了fn1')},fn2 () {console.log('执行了fn2')}},

watch中的深度监听相关推荐

vue中如何深度监听一个对象？
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
Vue.js中 watch(深度监听-deep)原理以及详解
handler方法和immediate属性这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎 ...
vue2.0中watch总结：普通监听和深度监听
watch:{} 是一个对象,一定要当成对象来用,可监听数据,是vue中数据发生变化进行处理的函数, 它有三个选项第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 第二个是d ...
vue中watch的初次监听和深度监听
文章目录 handler immediate deep 代码示例 handler 监听值变化时的回调函数 immediate 是否做初次监听,一般用于需要对该值初始化的监听 deep 是否做深度监听, ...
watch深度监听数组_vue watch普通监听和深度监听实例详解(数组和对象)
vue watch普通监听和深度监听实例详解(数组和对象) 下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num ...
Angular.js中使用$watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
vue2中的watch监听
一. watch使用的几种方法 1. 通过 watch 监听 msg 数据的变化. watch: {msg(oldValue, newValue) {console.log(oldValue) ...
VUE对数组进行深度监听无法改变值解决办法(全网最详细)
最近三水在做项目的时候遇到这样一个需求,点击新增按钮弹框,然后添加一堆主表的数据 ,因为是一对多关联,下面还有可以新增子表中的数据.其中主表中有有一个数量字段,当主表输入数字的时候,子表中也改变. 首 ...

watch中的深度监听

watch

watch深度监听

watch的immediate

watch的数组格式

watch中的深度监听相关推荐

最新文章

热门文章