为什么vue文档说参考文献实际上是没有反应的？
为什么vue文档说参考文献实际上是没有反应的？
提问于 2019-02-28 14:15:30
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-28 14:49:26
在Vue框架的上下文中，您误解了什么是反应性的东西。当然，您可以在组件挂载后访问$refs对象的值，但这并不意味着该对象是反应性的。
当数据是反应性的，这意味着对该数据的值的更改将触发依赖于该数据的值的组件的某个部分的“反应”，例如重新呈现模板、重新计算一个计算变量或触发一个观察者。
下面是一个例子：
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
mounted() {
console.log('$refs.foo in mounted', this.$refs.foo);
},
watch: {
'$refs.foo':{
immediate: true,
handler(value) {
console.log('$refs.foo watcher', value);
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div ref="foo"></div>
<div v-if="$refs.foo">
If $refs.foo was reactive, the template would update and you would see this message
</div>
</div>
在这个例子中，您可以看到$refs.foo的观察者最初记录$refs.foo的值是undefined。这是有意义的，因为监视程序在组件挂载之前就已经启动了，因此还没有设置$refs对象的属性。然后，在mounted钩子中，我们看到$refs.foo的值已按预期设置。
如果$refs是反应性的，那么我们将看到模板更新，因为v-if="$refs.foo"指令将被计算为true。在设置$refs.foo值之后，我们还会再次看到观察者触发，记录下$refs.foo的新值。然而，由于$refs不是反应性的，所以这些事情都不会发生。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54927707
复制相关文章
相似问题
腾讯云开发者
