VUE3中ref与reactive

Bunury2024-09-12 10:18

ref：支持所有类型

reactive：只支持引用类型(Obj，Array...)

两者都是实现数据视图响应式

JS逻辑使用中

ref：需要使用.value

reactive：不需要使用.value

html 复制代码

 <el-button @click="handle()" type="primary">操作ref</el-button>

javascript 复制代码

import { ref, reactive } from "vue";

const refobj = ref({name:'小李'})
const reactiveobj = reactive ({name:'小红'})

const handle = ()=>{
  refobj.value.name='小明' // refobj :{name:'小明'}
  reactiveobj.name='小花'  // reactiveobj :{name:'小花'}
}

reactive基于proxy 数组不能直接赋值否则破坏响应式对象

解决方法1:利用push+...解构

javascript 复制代码

let list = reactive<string[]>([])
const listhandle = () => {
  let res = ['as', 'asd', 'asdf']
  list = res // 赋值失败！
  list.push(...res) //数组利用解构赋值成功！
  console.log(list);

}

解决方法2:声明对象一个，数组为对象中的属性进行赋值