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
猜你喜欢
- 1、Function 函数编程中,需要重复写的功能,可以包装成一个函数1)定义函数定义函数之前,实现给一个字符串增加前缀和后缀的操作:f1
- 前言PyInstaller可以用来打包python应用程序,打包完的程序就可以在没有安装Python解释器的机器上运行了。PyInstall
- 一、简介Flask是一个轻量级的基于Python的web框架。本文适合有一定HTML、Python、网络基础的同学阅读。这份文档中的代码使用
- 1.打包项目期间遇到的坑,提前说下,避免重复工作。1.1打包的app出现白屏。出现原因:路径不对,需要改config\index.js解决办
- 抢票脚本,python +splinter自动刷新抢票,可以成功抢到(依赖自己的网络环境太厉害,还有机器的好坏),但是感觉不是很完美。有大神
- 在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页
- 如下所示:ljust(len,str)字符向左对齐,用str补齐长度rjust(len,str)字符向右对齐,用str补齐长度rjust(l
- SQLSERVER编译与重编译编译的含义当SQLSERVER收到任何一个指令,包括查询(query)、批处理(batch)、存储过程、触发器
- 说明1、PCA是最经典、最实用的降维技术,尤其在辅助图形识别中表现突出。2、用来减少数据集的维度,同时保持数据集中对方差贡献最大的特征。保持
- js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^var arr = new Array();ar
- 图片轮播滤镜转换效果,只支持ie浏览器<img width="156" height="60"
- Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻
- 一、表格与键概念主键:可唯一表示该资料(可以设置多个列表为主键)设置外键进行表与表的相连,且外键必须是其他表的主键(外键也可以设置自己表格的
- 从ASP初入门到PHP,感觉到PHP的强大之一就是内置函数的丰富,比如先前学习的PHP日期时间函数,读写文件的相关函数等都无不表明了PHP的
- 凯撒密码的原理:计算并输出偏移量为3的凯撒密码的结果注意:密文是大写字母,在变换加密之前把明文字母都替换为大写字母def casar(mes
- 2015年1月1日,新的一年开始之际,本来应该好好做点有意义的事情来跨个年的。结果, * 惯 - 睡觉之前一定要折腾一下电脑,说干就干,给新到
- 只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子:def addlist(alist): &nbs
- 一、背景有些情况下,我们面对实时更新的数据,希望能够在一个窗口中可视化出来,并且能够实时更新,方便我们观察数据的变化,从而进行数据分析,例如
- javascript实现翻页效果:<html> <head> <title>上下翻页看 - aspxho
- List>>> [chr(i) for i in range(97,123)]['a', 'b