vue的this.$forceUpdate()和this.$set()

目录

this.$forceUpdate()

下面举个例子：

改变数组的7种方法：

this.$set()

基本用法：

 向对象添加属性

  向数组添加属性

总的来说：

this.$forceUpdate()

使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中，Vue的响应式系统会自动追踪依赖的响应式属性，并在这些属性变化时自动更新DOM。但在某些情况下，如果你手动改变了 Vue 实例上某个数据属性的值（如：通过索引直接设置数组项或使用 Vue.set/this.set之外的方式添加对象的属性），并且你希望Vue立即重新渲染视图以反映这些变化，那么你可以调用‘forceUpdate()`。

下面举个例子：

我们直接通过索引修改了数组中的第二个元素。由于Vue不能检测到直接通过索引赋值的变化，因此我们需要调用this.$forceUpdate()来强制Vue实例重新渲染，从而更新视图。

<template>  
  <div>  
    <p>Items: {{ items.join(', ') }}</p>  
    <button @click="handleClick">点击按钮</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      items: ['Apple', 'Banana', 'Cherry']  
    };  
  },  
  methods: {  
   handleClick() {  
      // 直接通过索引修改数组元素，Vue可能检测不到这种变化  
      this.items[1] = 'Orange';  
        
      // 强制Vue实例重新渲染，以更新视图  
      this.$forceUpdate();  
    }  
  }  
};  
</script>

上面的这种方法它绕过了Vue的响应式系统。更好的做法是使用Vue提供的方法来修改数组（如push、pop、splice等用于数组，或者Vue.set用于对象）

methods: {  
  handleClick() {  
    // 使用Vue的响应式方法来修改数组，这样可以自动触发视图更新  
    this.items.splice(1, 1, 'Orange'); // 替换索引为1的元素为'Orange'  
  }  
}

由于 forceUpdate() 会强制组件重新渲染，触发updated钩子函数，并且是全局强制刷新，性能消耗高，这可能会导致性能问题，特别是在大型应用中，尽量少使用。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。 

改变数组的7种方法：

1. push()
   向数组的末尾添加一个或多个元素，并返回新的长度。

   this.items.push('New Item');

2. pop()
   删除并返回数组的最后一个元素。

   let lastItem = this.items.pop();

3. shift()
   删除并返回数组的第一个元素。

   let firstItem = this.items.shift();

4. unshift()
   向数组的开头添加一个或多个元素，并返回新的长度。

   this.items.unshift('New First Item');

5. splice()
   通过删除或替换现有元素或者添加新元素来改变一个数组的内容。

   	// 从索引 1 开始删除 1 个元素，并插入 'Orange'
   	this.items.splice(1, 1, 'Orange');

6. sort()
   对数组的元素进行排序，并返回数组。排序顺序可以是字母或数字，并按升序或降序。需要提供一个比较函数。

   	this.items.sort((a, b) => a - b); // 数字排序
   	// 或者
   	this.items.sort(); // 字母排序

7. reverse()
   颠倒数组中元素的顺序，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

   this.items.reverse();

this.$set()

this.$set() 是指向性强制刷新，性能消耗低，用于向响应式对象中添加一个属性，并确保这个新属性也是响应式的，并触发视图更新。这个方法主要用于解决Vue无法检测到对象属性的添加或删除的情况。

基本用法：

this.$set(target, propertyName/index, value)

• target：要修改的目标对象或数组。
• propertyName/index：要添加或修改的属性的名称（对于对象）或索引（对于数组）。
• value：新的属性值。

• 注意事项：如果你试图添加一个已经存在的属性，this.$set() 将更新这个属性的值并确保它是响应式的。

 向对象添加属性

data() {  
  return {  
    userInfo: {  
      name: 'Juny Long',  
      age: 24 
    }  
  }  
},  
methods: {  
  addEmail() {  
    // 使用 this.$set() 添加新属性  
    this.$set(this.userInfo, 'email', 'xxx520@gmail.com');  
    // 现在 this.userInfo.email 是响应式的  
  }  
}

  向数组添加属性

data() {  
  return {  
    myArray: [1, 2, 3]  
  }  
},  
methods: {  
  updateItemAtIndex(index, newValue) {  
    // 使用 this.$set() 更新数组项  
    this.$set(this.myArray, index, newValue);  
    // 现在变化是响应式的  
  }  
}

在Vue 2.x中，this.$set() 是必需的，因为Vue无法自动检测对象属性的添加或删除。但在Vue 3.x中，由于引入了Proxy，Vue可以自动检测到对象属性的添加或删除

总的来说：

$forceUpdate() 和 this.$set() 在 Vue.js 中有各自特定的用途。$forceUpdate() 强制 Vue 实例重新渲染，而 this.$set() 则用于向响应式对象中添加新的响应式属性。在使用这两个方法时，应根据具体的需求和场景来选择合适的方法。