$set()与nextTick

为什么把两个方法写在一起呢 其实就是为了方便联想记忆 没什么特殊的。

$set()

在某些情况下你可能会遇到更新了data里面的某些属性，但是在渲染时却不是最新的数据；

Vue无法检测到数组索引的变化；因此，在需要向响应式对象添加新属性时，使用$set()是一个好的做法。

<template>  
  <div>  
    <p>用户姓名: {{ user.name }}</p>  
    <p>用户年龄: {{ user.age }}</p>  
    <p>用户爱好（之前未定义）: {{ user.hobby }}</p>  
    <button @click="addHobby">添加爱好</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      // 初始时，user对象没有hobby属性  
      user: {  
        name: 'Alice',  
        age: 30  
      }  
    }  
  },  
  methods: {  
    addHobby() {  
      // 使用$set()向user对象添加hobby属性，并设置其值为'阅读'  
      // 第一个参数是目标对象（即user），第二个参数是要添加的属性的名称（即'hobby'），第三个参数是新属性的值（即'阅读'）  
      this.$set(this.user, 'hobby', '阅读');  
  
      // 注意：如果你直接这样做 this.user.hobby = '阅读';，  
      // 在某些情况下（比如当user是Vue组件的data返回的对象，且hobby属性之前未定义时），  
      // Vue可能无法追踪到这个新属性的变化，从而不会触发视图更新。  
      // 因此，使用$set()是更安全的做法。  
    }  
  }  
}  
</script>

nextTick

用于在下次 DOM 更新循环结束之后执行延迟回调。这在你需要基于更新后的 DOM 执行某些操作时非常有用

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="updateMessage">更新消息</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    }  
  },  
  methods: {  
    updateMessage() {  
      // 更新数据  
      this.message = 'Message updated!';  
  
      // 使用 nextTick 来确保在 DOM 更新后执行某些操作  
      this.$nextTick(() => {  
        // 这里可以安全地访问更新后的 DOM  
        // 例如，获取更新后元素的尺寸  
        const updatedElement = this.$el.querySelector('p');  
        console.log(updatedElement.textContent); // 输出: Message updated!  
  
        // 或者执行一些依赖于新 DOM 状态的操作  
        // ...  
      });  
  
      // 注意：如果你将上面的 console.log 放在 this.$nextTick 之外，  
      // 在某些情况下（尤其是在数据变化后立即执行时），  
      // 你可能会得到旧的 DOM 状态，因为 Vue 的 DOM 更新是异步的。  
    }  
  }  
}  
</script>