Vue的$set方法是用來添加和更新組件或響應式對象中的屬性。它的語法如下:
Vue.set(object, propertyName, value) // 或者 this.$set(object, propertyName, value)
其中object是待操作的對象,propertyName是需要添加/更新的屬性名,value是屬性的值。
如果我們使用JavaScript原生的方式添加或更新屬性,那么該屬性不會觸發組件重新渲染,也不會響應數據的變化。例如:
let vm = new Vue({ data: { fruits: [] } }) vm.fruits.push('apple') // 不會觸發重新渲染 vm.fruits[0] = 'banana' // 不會觸發重新渲染
如果我們希望這些操作能夠響應式地更新組件,就需要使用Vue提供的$set方法。
let vm = new Vue({ data: { fruits: [] } }) vm.$set(vm.fruits, 0, 'apple') // 觸發重新渲染 vm.$set(vm.fruits, 0, 'banana') // 觸發重新渲染
可以看到,使用$set方法添加或更新屬性能夠觸發組件重新渲染,從而讓組件能夠響應數據的變化。$set方法的實現原理是利用Vue的響應式機制,在對象上添加一個新屬性或更新一個已有屬性時會自動觸發數據更新。