Vue2知识积累

Vue2知识积累

这里是我的个人在工作中或学习中遇到的bug或知识点积累

this.$set / Vue.set

使用方法：

	this.$set / Vue.set(往哪里添加，“添加后的字段名”，需要添加的内容)

例如：

const a = [],
xxxxxx.(xxx).then((res)=>{
	if(res.code ==0){
	this.$set(a,'a',res.date)
	Vue.set(a,'a',res.date)
	}
})

使用场景

当需要往一个数组里进项添加数据，并且还可以改变，双向绑定的时候，可以调用这个方法

看看ChatGPT怎么说：

Vue.set 是 Vue.js 中的一个全局方法，用于在特定对象上添加响应式属性。这个方法主要用于解决在使用 Vue 时，直接添加新属性到对象上可能导致该属性不具备响应式的问题。

Vue.js在实例化时会对 data 对象进行响应式处理，但是如果你在实例化之后，直接添加一个新的属性到 data 中，Vue.js 无法自动检测到这个变化，因为它在初始化时已经完成了对 data 的响应式处理。

这时候，你可以使用 Vue.set 来手动触发对象的响应式更新。Vue.set 接受三个参数，分别是目标对象、要添加的属性名、以及属性值。

以下是一个简单的例子，演示了在 Vue 实例中如何使用 Vue.set：

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
      },
    };
  },
  methods: {
    updateUser() {
      // 直接添加新属性，不会触发响应式更新
      // this.user.age = 25;

      // 使用 Vue.set 添加属性，触发响应式更新
      this.$set(this.user, 'age', 25);
    },
  },
};
</script>

在上面的例子中，如果直接将 age 属性添加到 user 对象中，Vue.js 将无法检测到这个变化。但是，通过使用 Vue.set，我们手动告诉 Vue.js 在 user 对象上添加了一个新的属性，这样就会触发响应式更新，视图会正确地显示新的属性值。