vue3中的this.$set怎么写呢

最新推荐文章于 2024-09-14 11:33:12 发布

m0_67394006

最新推荐文章于 2024-09-14 11:33:12 发布

阅读量2.6k

点赞数

分类专栏：前端 html 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67394006/article/details/123219632

版权

前端同时被 2 个专栏收录

31 篇文章 3 订阅

订阅专栏

html

31 篇文章 0 订阅

订阅专栏

Vue3移除了$set方法，转而使用reactive和ref来创建响应式数据。在Vue2中，由于使用Object.defineProperty实现响应式，对于深层属性修改需要$set确保视图更新。而Vue3通过ES6的Proxy实现更深层次的响应式，结合Composition API，使得直接修改state.input.text即可触发视图更新。这简化了数据处理并提高了性能。

摘要由CSDN通过智能技术生成

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