为什么在模板中使用reactive对象里的属性的时候数据仍然是响应式的？
来源：3-8 更近一步 - reactive
qq_我在时光机里找回忆
2020-10-28
在这一节的代码中，给reactive方法得到的对象data定义了一个类型，这个类型里的count和double都是number类型的
interface DataProps {
count: number;
double: number;
increase: () => void;
}
// 使用reactive，参数是对象，返回值也是对象
const data: DataProps = reactive({
count: 0,
increase: () => {
// 在里面通过这个对象的名字和属性来访问对应的数据，不需要访问value
data.count++
},
double: computed(() => {
return data.count * 2
})
})
那么，返回的data对象的count属性和double都应该是普通的number类型。
请问老师，**为什么在setup里直接导出data对象后，模板里使用data.count和data.double的时候仍然有响应式的魔力呢？**展开data以后导出，模板得到的是普通类型，不能响应式变化，但是为什么不展开data，模板访问data属性的时候仍然可以响应式呢变化呢？这里我在复习的时候不太明白。
2回答
-
同学你好 这是因为不是 data.count 和 data.double 有响应式，而是 data 这个对象有响应式的魔力，如果你打印出 data，会发现它是一个 Proxy 对象，Proxy 对象代表这它可以监控包裹属性的变化从而更新模版，所以我们需要把 data 返回，这样模版的变化和 data 形成了一个绑定。但假如你只是把 count 和 double 这两个值导出去后，它们就是普通的值（string 或者 number），它们没法监控变化，改变它们的值，自然没法让模版更新了。
012020-10-29 -
黎明L
2020-12-04
例子：
我们现在从接口获取了一个普通对象叫 res.data
如果现在我这么写可以吗：
let testData = reactive(res.data) 在控制台打印出testData 显示是Proxy 对象
然后在模板中使用testData取某个属性，但报错说不能读取到属性
这是为什么啊？00
相似问题