vue中ref、reactive和 toRefs toRef

ref和reactive都是响应式的引用，其原理是通过 proxy 对数据进行封装，当数据变化时，触发模版等内容的更新， ref 处理基础类型的数据（string，number..），reactive 处理非基础类型的数据（对象，数组）。

let name=ref("li")

//变成proxy({value:"li"})这样一个响应式的引用

所以要改变name值时要 name.value="ll"

const nameObj = reactive({name: 'dell'});

// { name: 'dell'} 变成 proxy({ name: 'dell'}) 这样的一个响应式引用

 nameObj.name = 'lee'

如果把name从对象结构出来，就会失去响应式引用，需要使用toRefs使其成为响应式引用

const { name } = toRefs(nameObj);

 const { reactive,toRef} = Vue;
     
  //     const data = reactive({name: 'dell'});
  //     const age=toRef(data,'age');

如果对象中没有age属性，用roRef会给一个默认值

 const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props, context) {
      // const { ref } = Vue;
      // proxy , 'dell' 变成 proxy({value: 'dell'}) 这样的一个响应式引用
      // let name = ref('dell');
      // setTimeout(() => {
      //   name.value = 'lee'
      // }, 2000)
      // return { name }

      const { reactive, readonly, toRefs } = Vue;
       // proxy , { name: 'dell'} 变成 proxy({ name: 'dell'}) 这样的一个响应式引用
      const nameObj = reactive({name: 'dell', age: 28});
      setTimeout(() => {
        nameObj.name = 'lee'
      }, 2000)
      // toRefs proxy({ name: 'dell', age: 28}), { 
      //  name: proxy({ value: 'dell'}),
      //  age: proxy({value: 28})
      // }
      const { name, age } = toRefs(nameObj);
      return { name }
    }
  });
  const vm = app.mount('#root');