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的概念

到此这篇关于vue3中的this.$set怎么写呢?的文章就介绍到这了,更多相关vue3 this.$set内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！