vue中watch * 用法之deep、immediate、flush
作者:前端打工人 时间:2024-04-27 16:13:35
一、watch 默认是浅层,使用deep深层监听
被侦听的 property,仅在被赋新值时,才会触发回调函数——而嵌套 property 的变化不会触发。如果想侦听所有嵌套的变更,你需要深层 * :设置deep: true
export default {
watch: {
someObject: {
handler(newValue, oldValue) {
// 注意:在嵌套的变更中,
// 只要没有替换对象本身,
// 那么这里的 `newValue` 和 `oldValue` 相同
},
deep: true
}
}
}
注意:深度侦听需要遍历被侦听对象中的所有嵌套的 property,当用于大型数据结构时,开销很大。因此请只在必要时才使用它,并且要留意性能。
二、watch 默认是懒侦听,使用immediate即时回调侦听
最初绑定的时候是不会执行的,要等到 监听的属性 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
export default {
// ...
watch: {
question: {
handler(newQuestion) {
// 在组件实例创建时会立即调用
},
// 强制立即执行回调
immediate: true
}
}
// ...
}
三、回调的刷新时机flush: 'post'
当你更改了响应式状态,它可能会同时触发 Vue 组件更新和 * 回调。
默认情况下,用户创建的 * 回调,都会在 Vue 组件更新之前被调用。这意味着你在 * 回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在 * 回调中能访问被 Vue 更新之后的DOM,你需要指明 flush: 'post' 选项:
export default {
// ...
watch: {
key: {
handler() {},
flush: 'post'
}
}
}
四、this.$watch()
我们也可以使用组件实例的 $watch() 方法来命令式地创建一个 * :
export default {
created() {
this.$watch('question', (newQuestion) => {
// ...
})
}
}
如果要在特定条件下设置一个 * ,或者只侦听响应用户交互的内容,这方法很有用。它还允许你提前停止该 * 。
五、停止 *
用 watch 选项或者 $watch() 实例方法声明的 * ,会在宿主组件卸载时自动停止。因此,在大多数场景下,你无需关心怎么停止它。
在少数情况下,你的确需要在组件卸载之前就停止一个 * ,这时可以调用 $watch() API 返回的函数:
const unwatch = this.$watch('foo', callback)
// ...当该 * 不再需要时
unwatch()
补充:这里一般使用最多的是deep:true,处理对象内部属性的变化,常用写法如下:
watch:{
// 对象的监听,采用deep:true
obj: {
handler:function(newVal){//监听到属性变化进行逻辑处理},
deep:true
},
'obj.name': {
handler:function(newVal){//监听到属性变化进行逻辑处理},
}
}
来源:https://blog.csdn.net/weixin_43953518/article/details/124472358
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
微信小程序 列表的上拉加载和下拉刷新的实现
![](https://img.aspxhome.com/file/2023/0/126160_0s.jpg)
python apscheduler cron定时任务触发接口自动化巡检过程
![](https://img.aspxhome.com/file/2023/2/111972_0s.jpg)
Python实现搜索算法的实例代码
Python的Django框架中settings文件的部署建议
浅谈MySQL模糊查询中通配符的转义
python3去掉string中的标点符号方法
Sql学习第一天——SQL 练习题(建表/sql语句)
![](https://img.aspxhome.com/file/2023/6/92746_0s.png)
python 多进程通信模块的简单实现
用Python画一个LinkinPark的logo代码实例
![](https://img.aspxhome.com/file/2023/9/90339_0s.png)
PHP伪静态页面函数附使用方法
php通过隐藏表单控件获取到前两个页面的url
![](https://img.aspxhome.com/file/2023/5/102105_0s.gif)
教你用pyecharts绘制各种图表案例(效果+代码)
![](https://img.aspxhome.com/file/2023/8/94168_0s.png)
php+js实现倒计时功能
SQL Server查询某个字段在哪些表中存在
![](https://img.aspxhome.com/file/2023/6/96226_0s.jpg)
python解析库Beautiful Soup安装的详细步骤
![](https://img.aspxhome.com/file/2023/4/92094_0s.png)
pandas 空的dataframe 插入列名的示例
python3 字符串知识点学习笔记
Python实现列表拼接和去重的三种方式
详解Django-auth-ldap 配置方法
Vue之计算属性详解
![](https://img.aspxhome.com/file/2023/2/133082_0s.png)