Bootstrap

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

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修改数组数据可以立即更新视图

;