关于name
来源：2-3 ref，reactive 响应式引用的用法和原理 （2）
请你摘掉伪善的面具
2021-08-29 16:45:37
相关代码：
<!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>lesson 35</title>
<style>
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// ref,reactive响应式的引用
// 通过proxy对数据进行封装，当数据发生变化时，触发模板等内容的更新
const app = Vue.createApp({
template:`
<div>{{name}}</div>
`,
setup(props,context){
// const {ref}=Vue;
// let name=ref('dell');
// setTimeout(() => {
// name.value="lee"
// }, 2000);
// return {name}
const {reactive,readonly,toRefs}=Vue;
const nameObj=reactive({name:'dell',age:28});
setTimeout(() => {
nameObj.name='lee';
}, 2000);
const{name,age}=toRefs(nameObj);
return{name};
}
});
const vm = app.mount('#root');
</script>
</body>
</html>
为什么return的是name而不是nameObj.name,模板不应该写成
相关代码：
<div>{{nameObj.name}}</div>
吗？
写回答
1回答
-
同学你好，课程中使用了es6的解构赋值操作，在vue中，es6的解构赋值操作在对一个响应式对象直接解构时，解构后的数据将不再有响应式，使用toRefs可以解决这个问题，toRefs用于将响应式对象转换为结果对象，并且获取数据值的时候需要加.value。再来看代码：
reactive()会把数据变成proxy({name:"dell"})这样的响应式，然后使用ES6进行结构赋值，解构赋值不再是响应式数据，所以需要加toRefs将其变成响应式数据，此时数据变化过程是由toRefs proxy({name:"dell"})变成{ name: proxy({ value: "dell" }) }，那么，这个时候return {name}返回的实际上是proxy({ value: "dell" })，所以在div中调用的name相当于是name.value（即获取数据值的时候需要加.value）
希望可以帮到你，祝学习愉快！
0
相似问题