目录
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种方法:
push()
向数组的末尾添加一个或多个元素,并返回新的长度。
this.items.push('New Item');
pop()
删除并返回数组的最后一个元素。
let lastItem = this.items.pop();
shift()
删除并返回数组的第一个元素。
let firstItem = this.items.shift();
unshift()
向数组的开头添加一个或多个元素,并返回新的长度。
this.items.unshift('New First Item');
splice()
通过删除或替换现有元素或者添加新元素来改变一个数组的内容。
// 从索引 1 开始删除 1 个元素,并插入 'Orange'
this.items.splice(1, 1, 'Orange');
sort()
对数组的元素进行排序,并返回数组。排序顺序可以是字母或数字,并按升序或降序。需要提供一个比较函数。
this.items.sort((a, b) => a - b); // 数字排序
// 或者
this.items.sort(); // 字母排序
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()
则用于向响应式对象中添加新的响应式属性。在使用这两个方法时,应根据具体的需求和场景来选择合适的方法。