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: `
{{name}}
`,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');