vue3中的this.$set怎么写呢

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值