vue 在什么情况下在数据发生改变的时候不会触发视图更新

在 Vue 中,通常数据发生变化时,视图会自动更新。但是,有几种情况可能导致数据变化不会触发视图更新:

1.对象属性的添加或删除

Vue 无法检测到对象属性的添加或删除。因为 Vue 在初始化实例时对属性执行了 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应式的。

|---|---------------------------------------------------|
| | new Vue({ |
| | data: { |
| | a: 1 |
| | } |
| | }) |
| | |
| | // 添加新的根级响应式属性 |
| | vm.$set(vm.a, 'b', 2) // Vue.set(vm.a, 'b', 2) |
| | |
| | // 或者 |
| | vm.a = Object.assign({}, vm.a, { b: 2 }) |

  1. 数组索引直接赋值 :Vue 不能检测以下变动的数组:
    • 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    • 当你修改数组的长度时,例如:vm.items.length = newLength

为了解决这个问题,Vue 提供了一系列修改数组的方法,这些方法会触发视图更新:

|---|----------------------------------------------|
| | // Vue 提供的方法 |
| | vm.items.splice(indexOfItem, 1, newValue) |
| | vm.items.push(newValue) |
| | vm.items.pop() |
| | vm.items.shift() |
| | vm.items.unshift(newValue) |
| | vm.items.sort() |
| | vm.items.reverse() |

  1. 在初始化实例之后添加新的根级响应式属性:在 Vue 实例创建之后,添加新的根级响应式属性 (root level reactive property) 到已经创建的实例上,它不会触发视图更新。

|---|-----------------------|
| | var vm = new Vue({ |
| | data: { |
| | a: 1 |
| | } |
| | }) |
| | |
| | // 之后添加的属性不会触发视图更新 |
| | vm.b = 2 |

为了向响应式对象添加一个属性,并确保这个新属性同样是响应式的,你需要使用 Vue.set 方法:

|---|----------------------------------|
| | Vue.set(vm.someObject, 'b', 2) |

或者使用实例方法 $set

|---|--------------------------------------|
| | this.$set(this.someObject, 'b', 2) |

对于数组,由于 Vue 无法检测长度的变化,如果你需要更新数组的长度,可以考虑使用 splice 方法:

|---|------------------------------|
| | vm.items.splice(newLength) |

  1. 异步更新队列:Vue 异步执行 DOM 更新。这意味着当你修改数据后,DOM 不会立即更新。Vue 会在下一个"事件循环"更新 DOM。如果你需要等待 DOM 更新完成,可以使用 Vue.nextTick 方法:

|---|-------------------------------|
| | Vue.nextTick(function () { |
| | // DOM 更新了 |
| | }) |

或者在 Vue 组件内部使用 this.$nextTick()

请注意,虽然上述情况可能不会触发视图更新,但 Vue 的开发模式会发出警告,提示你可能存在潜在的问题。在生产模式下,Vue 不会发出这些警告,所以务必在开发过程中注意这些潜在的陷阱。

相关推荐
JiangJiang几秒前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang几秒前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein几秒前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam1 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript
夜熵2 分钟前
JavaScript 中的 this
前端·面试
绅士玖4 分钟前
Vue.js 核心特性解析:响应式原理与组合式API实践
vue.js
前端小巷子4 分钟前
CSS 单位指南
前端·css
St4 分钟前
探索JavaScript原型链设计——详解prototype、__proto__及constructor三者之间的关系
前端·javascript
前端大白话5 分钟前
JavaScript中`Symbol.for()`和`Symbol()`的区别,在创建全局唯一的`Symbol`值时如何选择使用?
前端·javascript·设计模式
喵爱吃鱼5 分钟前
原来这就是react设计模式啊
前端·javascript·react.js