数组的监听"/>
Vue 3 迁移策略笔记—— 第29节:数组的监听
前言
本笔记主要基于官方文档《迁移策略——Watch on Arrays》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
知识储备:
《Vue api —— vm.$watch》
概述
当侦听一个数组时,只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调,必须指定 deep
选项。
Vue 3.x 用法展示
在 Vue 3.x 当我们监听一个数组时,只有在数组被整体替换时才会触发回调。也就是说,如果我们只对数组进行增删改查操作时,是不会被 Vue 捕捉到的。如果想要在数组在发生改变时被 Vue 识别到,我们必须手动添加 deep
选项。如下:
watch: {bookList: {handler(val, oldVal) {console.log('book list changed')},deep: true},
}
Vue 2.x 的watch
其实,watch 的 deep
选项在 Vue 2.x 就有了。不过,在 Vue 2.x 只是用来处理对象的监听问题。设置 deep:true
后,Vue 就可以发现对象内部的数值变化。但是,在 Vue 2.x 中,监听数组并不需要这么做。
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定
deep: true
。注意监听数组的变更不需要这么做。摘抄自——《Vue api —— vm.$watch》
我们都知道 JS 的数组是一种特殊的对象。可能 Vue 3.x 的这次变动是为了统一 Vue 的在监听对象处理吧!
本系列目录
-
Vue 3 迁移策略笔记—— 第1节:v-for 中的 Ref 数组
-
Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
-
Vue 3 迁移策略笔记—— 第3节:Attribute Coercion Behavior (属性强制行为)
-
Vue 3 迁移策略笔记——第4节:$attrs 包括class&style
-
Vue 3 迁移策略笔记—— 第5节:移除 $children
-
Vue 3 迁移策略笔记—— 第6节:自定义指令
-
Vue 3 迁移策略笔记—— 第7节:自定义元素交互
-
Vue 3 迁移策略笔记—— 第8节:Data 选项
-
Vue 3 迁移策略笔记—— 第9节:新增 emits 选项
-
Vue 3 迁移策略笔记—— 第10节:事件 API
-
Vue 3 迁移策略笔记—— 第11节:移除过滤器
-
Vue 3 迁移策略笔记—— 第12节:片段
-
Vue 3 迁移策略笔记—— 第13节:函数式组件
-
Vue 3 迁移策略笔记—— 第14节:全局 API
-
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
-
Vue 3 迁移策略笔记—— 第16节:Inline Template 属性
-
Vue 3 迁移策略笔记—— 第17节:Key 属性
-
Vue 3 迁移策略笔记—— 第18节:按键修饰符
-
Vue 3 迁移策略笔记—— 第19节:移除 $listeners
-
Vue 3 迁移策略笔记—— 第20节:Props 的默认值函数不能访问this
-
Vue 3 迁移策略笔记—— 第21节:渲染函数 API
-
Vue 3 迁移策略笔记—— 第22节:Slots 的统一
-
Vue 3 迁移策略笔记—— 第23节:Transition Class 的变化
-
Vue 3 迁移策略笔记—— 第24节:Transition Group 不再需要设置根元素
-
Vue 3 迁移策略笔记—— 第25节:v-on.native修饰符被移除
-
Vue 3 迁移策略笔记—— 第26节:在组件上使用 v-model 的变化
-
Vue 3 迁移策略笔记—— 第27节:v-if 和 v-for 的优先级
-
Vue 3 迁移策略笔记—— 第28节:v-bind 合并行为
-
Vue 3 迁移策略笔记—— 第29节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第29节:数组的监听
发布评论