初入vue3之--->关于vue3的数据绑定(主要是对象和数组)

Vue3使用proxy实现数据响应,提供了ref和reactive两个API。ref用于单个数据的响应式绑定,而reactive适用于整个对象。由于reactive要求传入对象,对于单个值操作不便,故有了ref。数组绑定在Vue3中可以直接修改并触发视图更新,$set在Vue2中的需求已被替代。
摘要由CSDN通过智能技术生成

vue3因为运用的是proxy,所以提供了ref和reactive用于数据绑定,ref其实就是对reactive的二次封装,原因是reactive必须传入的是一个对象,对于一些只需要单个数据响应的就比较麻烦;

ref如下绑定变量

var btnText = ref("点我切换");
    function changeBtnText() {
      return (btnText.value = "已点击");
}

reactive如下绑定对象

   const info = reactive({
      age: 10,
      name: "我的世界",
    });
	console.log(info.age)

绑定对数组:

let tableColumns = reactive([
      {
        prop: "age",
        label: "年龄",
      },
      {
        prop: "name",
        label: "姓名",
      },
    ]);

因为vue2和vue3绑定的原理不同,在vue2种的$set自然在vu3种被弃置,因为vue3修改数组数据可以立即更新视图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值