[JavaScript知识库]vue3中的this.$set怎么写呢?

vue3中的this.$set怎么写呢?

在vue2中我们常常会遇到明明已经改变了数据视图却没有实时更新这样的问题

举例

<el-input v-model="input.text" placeholder="请输入内容"></el-input>
data() {
	return{
		input:{
			text:'1'
		}
	}
}
mounted () {
  this.input.text = '2';  // 视图层并没有改变
}

这时vue2就提供了一个方法就是$set

this.$set(this.input, 'text', '3');

原因就是 Vue2 中的数据响应式是利用 object.definedProperty()实现的，它是无法深层监听数据的变化的。

而Vue3，用的是ES6的proxy，对数据响应式进行一个数据的代理。这个就厉害了啊，结合Vue3的 composition API。

- Vue3 中的 reactivity API：

• reactive
• readonly
• ref
• computed

- 如果想要让一个对象变为响应式数据，可以使用reactive或ref

setup() {
  const state =  reactive({
	input:{
		text:"1"
	}
  });
  return {
    state // 导出响应式数组
  }
},
mounted() {
  console.log(state); // 是一个proxy
  state.input.text = '2'; // 视图更新
}

Vue3中废弃了$set的概念