vue数据驱动

vue 数据驱动指的是当数据发生变化, 对应的 UI 也跟随变化, 但有时候数据变化了, UI 并没有改变, 这是为什么呢 ?
默认情况下, Vue 只能监听到第一层 data 的属性边变化, 比如下面这段 data, 当 userId, 发生变化, 对应的 UI 也会随着改变

data() => {
  return {
    userId: 'userId'
  };
}

想想, 如果数据格式是这样, 要怎么办 ?

data() => {
  return {
    user: {
      userId: 'userId'
    },
  };
}

当我们信誓旦旦的使用这种方式去修改 userId, this.$data.user.userId = 'xxxx', 发现怎么修改都没有效果, 为此浪费了一个晚上加一个早上加一个上午(Me), 可能我们并不知道, 也可能这个知识点已经忘记了, 那么就重新复习一下. 遇到这种方式推荐使用 this.$set() 方法处理

this.$set(this.$data.user, 'userId', 'xxxx')

Well done!!!

vue数据驱动 ​

vue数据驱动