watch中的immediate、handler和deep属性

vue中的watch监听

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true
immediate:true代表如果在 wacth 里声明了 viewDetials之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

1. 通过 watch 监听 data 数据的变化，数据发生变化时，就会打印当前的值

watch: {data(val, value) {console.log(val)    //变化之前的值console.log(value)    //变化之后的值}
}

2. 通过 watch 监听 list 数据的变化，数据发生变化时，this.number++（使用深度监听）

data（） {return {list: {'id': 1,'type': 0},number: 0}
},
watch: {list: {handler(newVal) {this.number++},deep: true}
}

3. 通过 watch 监听 data 数据的变化，数据发生变化时,执行 change 方法，watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！

4. immediate 和 handler 使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

data（） {return {list: {'id': 1,'type': 0},number: 0}
}，
watch: {list: {handler(newVal) {this.number++},immediate: true}
}

5. watch是一个对象，一定要当成对象来用。对象就有键，有值，deep 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

data（） {return {list: {'id': 1,'type': 0},number: 0}
}，
watch: {list: {handler(newVal) {this.number++},deep: true}
}

①设置deep:true则可以监听到 list.id 的变化，此时会给 list 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性，这样只会给对象的某个特定的属性加监听器

data（） {return {list: {'id': 1,'type': 0}}
}，
watch: {'list.id': {handler(newVal, oldVal) {......},deep: true}
}data（） {return {list: {'id': 1,'type': 0},number: 0}
}，
watch: {list: {handler(newVal) {this.number++},immediate: true}
}

在大佬们的总上在总结一些https://blog.csdn.net/weixin_45449504/article/details/116132134

watch中的immediate、handler和deep属性相关推荐

Vue.js中 watch(深度监听-deep)原理以及详解
handler方法和immediate属性这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎 ...
Vue中的（computed）计算属性和（watched）侦听属性以及（methods）方法
1. computed 计算属性可用于快速计算视图中显示的属性. 这些计算将被缓存,并且只在需要时更新. 他的方法不需要在data里面定义它们完全是同步的. <div class=" ...
理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理 scoped /deep/ 实战总结 scoped vue项目一般是单页面.多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中 ...
DHTML中style的display和visibility属性
DHTML中style的display和visibility属性 display是隐藏该对象,使该对象不占用页面排版空间. document.all("tr1").style.di ...
请确保此代码文件中定义的类与“inherits”属性匹配，并且该类扩展的基类(例如Page 或UserControl)是正确的。...
编译ASP.NET时,提示"请确保此代码文件中定义的类与"inherits"属性匹配,并且该类扩展的基类(例如Page 或UserControl)是正确的.", ...
如何在Javascript中访问对象的第一个属性？
本文翻译自:How to access the first property of an object in Javascript? Is there an elegant way to access ...
python中的os.mkdir和os.makedirs的使用区别，以及如何查看某个模块中的某些字母开头的属性方法
1 os.mkdir的使用 os.mkdir(dir_name):用于新建文件夹,当要新建的文件夹已经存在的时候,就会报错:FileExistsError: [Errno 17] File exist ...
怎么在ASP.NET中写HTML,如何：在 ASP.NET 网页中设置控件的 HTML 属性
如何:在 ASP.NET 网页中设置控件的 HTML 属性 10/22/2014 本文内容更新:2007 年 11 月这些示例显示如何向页面中的元素添加 HTML 属性.第一个示例演示如何以声明方 ...
【Groovy】自定义 Xml 生成器 BuilderSupport ( 继承 BuilderSupport 抽象类 | 在 createNode 方法中获取节点名称、节点属性、节点值信息 )
文章目录一.继承 BuilderSupport 抽象类二.在 createNode 方法中获取节点名称.节点属性.节点值信息三.完整代码示例 1.MyBuilderSupport 生成器代码 2 ...

watch中的immediate、handler和deep属性

vue中的watch监听

watch中的immediate、handler和deep属性相关推荐

最新文章

热门文章