toRefs意思是是通过对对象的结构赋值，当原来对象里面的内容发生改变的时候，渲染到页面上的数据也发生改变，toRefs用在结构赋值响应式引用
如果牵涉到对象中没有的属性, 希望解构时返回一个空的响应式数据, 我们可以使用
toRef
首先看toRefs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<h1>{{username}}</h1>
`,
// setup函数
setup() {
// 把要用的方法从vue里面结构出来
const { reactive, toRefs } = Vue;
// 变量
const userObj = reactive({
username: "zhangsan",
});
// 逻辑
setTimeout(() => {
userObj.username = "lisi";
}, 4000);
// 从userObj里面结构赋值得到username
const { username } = toRefs(userObj);
return { username };
},
});
const vm = app.mount("#root");
</script>
</html>
接着看toRef
模板里面用到age，但是在setup里面没有定义，我们希望返回一个空的响应式数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 模板里面用到age，但是在setup里面没有定义，我们希望返回一个空的响应式数据
template: `
<h1>{{age}}</h1>
`,
setup() {
// 先结构要用到的vue方法
const { toRef, reactive } = Vue;
const userObj = reactive({
username: "zhangsan",
});
const age = toRef(userObj, "age");
setTimeout(() => {
age.value = "lisi";
}, 4000);
return { age };
},
});
const vm = app.mount("#root");
</script>
</html>
