记 Vue 数据更新视图不同步的问题

问题描述：

控制台打印出数组/对象数据已经修改成功，但是页面上并没有同步更新。

解决方法：

搜索引擎搜一下可以看到有好多答案了，总结有以下两点：

• 数组：使用数组更新检测方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

• 对象：Vue.set( target, propertyName/index, value )

  向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

问题解析：

建议详细、仔细、逐字阅读深入响应式原理，文档已经描述的非常清晰。不知道你是否和我一样阅读文档不求甚解，只求快速找到解决方法 (･_･;

下面我们一起分析下产生这种问题的原因：参考示例

1. Vue 是如何追踪数据变化的

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

2. 检测变化的注意事项

const list = [
  {
   
    name: "Jim Green",
    age: 24