Vue3中ref和reactive的用法

1 js中的方法、变量、watch只有被return出去才能被页面使用
创建响应式数据，即js中值改变，页面会跟着变，简单数据用ref，复杂数据-数组和对象用reactive，然后将数据return出去，

    let name = "星星";
    return {
      name
    };

这样的数据页面也能使用并显示出来，但不是响应式的，改为响应式：
2 简单数据,js中取值要用val.value

let name = ref("星星");
const handleChange = ()=>{
	console.log(name.value)//带.value
}
    return {
      name，handleChange
	};
<el-input v-model="name" @change="handleChange"></el-input>

3 复杂数据,js中取值可以直接用

let data = reactive({uname: "星星",age: 18,});
const handleChange = ()=>{
	console.log(data.uname)//直接用
}
    return {
      data，handleChange
	};
<div>{{data.uname}}</div>

4 如果要页面中直接使用uname，而不用data.uname,可以用toRef，不加的话uname:data.uname相当于解构赋值，会失去响应式

let data = reactive({uname: "lxc",age: 18,});
    return {
      uname:toRef(data,'uname'),//注意toRef接收2个参数，对象数组名，参数名必须有引号
	};

5 如果上述变量非常多时，每个都toRef很麻烦,可以用…toRefs,就可以在页面上直接用每个变量了

let data = reactive({uname: "lxc",age: 18,});
    return {
      ...toRefs(data)
    };
<div>{{uname}}</div>   <div>{{age}}</div>

6 watch中的变量要return出去，computed中的变量不用return就能使用，他本身返回的就是ref实例，具有响应式

7 reactive包裹数组如何正确赋值，不能整个直接赋值，要一个一个赋值，或者用ref

    const arr = reactive([]);
      const res = [2, 3, 4, 5]; //假设请求接口返回的数据
      // 方法1 失败，直接赋值丢失了响应性
      // arr = res;
      // 方法2 这样也是失败
      // arr.concat(res);
      // 方法3 可以，但是很麻烦
      res.forEach(e => {
        arr.push(e)})

8 复杂数据赋值的几种简洁方法

1   const state = reactive({
      arr: []
    });
    state.arr = [1, 2, 3]

2  const state = ref([])
    state.value = [1, 2, 3]

3  const arr = reactive([])
    arr.push(...[1, 2, 3])