VUE3中ref与reactive
- ref：支持所有类型
- reactive：只支持引用类型(Obj，Array...)
- 两者都是实现数据视图响应式
JS逻辑使用中
ref：需要使用.value
reactive：不需要使用.value
<el-button @click="handle()" type="primary">操作ref</el-button>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+...解构
let list = reactive<string[]>([])
const listhandle = () => {
let res = ['as', 'asd', 'asdf']
list = res // 赋值失败！
list.push(...res) //数组利用解构赋值成功！
console.log(list);
}解决方法2:声明对象一个，数组为对象中的属性进行赋值