为什么 vue 文档说 refs 实际上不是反应性的 [英] Why does the vue documentation say refs are not reactive when indeed they are

问题描述

引用自 vue 官方文档指出

<块引用>

$refs...不是反应性的.

然而，我在模板中使用了这样的引用，它们确实是反应式的，甚至在方法、计算道具和观察者中(只要你在安装后访问它).几个第三方 vue 库 e.g.这个还提供了使用/依赖于引用的反应性的功能.

有人可以澄清一下官方文档中的 refs 不是响应式是什么意思吗?

解决方案

您误解了在 Vue 框架上下文中响应式的含义.当然，您可以在安装组件时设置 $refs 对象的值后访问它们，但这并不意味着该对象是响应式的.

当数据是反应性时，这意味着对该数据值的更改将触发依赖于该数据值的组件的某些部分的反应"，例如重新渲染模板，重新计算计算变量，或触发观察者.

阅读有关反应性的文档.

<小时>

这是一个例子:

Vue.config.productionTip = false;Vue.config.devtools = false;新的 Vue({el: '#app',安装(){console.log('$refs.foo in mount', this.$refs.foo);},手表: {'$refs.foo':{立即:真实，处理程序(值){console.log('$refs.foo watcher', value);}}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><div ref="foo"></div><div v-if="$refs.foo">如果 $refs.foo 是被动的，模板会更新，你会看到这个消息

在该示例中，您可以看到 $refs.foo 的观察者最初记录 $refs.foo 的值是 undefined.这是有道理的，因为观察者在组件安装之前已经触发，所以 $refs 对象的属性还没有设置.然后，在 mounted 钩子中，我们看到 $refs.foo 的值已按预期设置.

如果 $refs 是响应式的，我们将看到模板更新，因为 v-if="$refs.foo" 指令将评估为 真实.在设置 $refs.foo 的值后，我们还会看到观察者再次触发，记录 $refs.foo 的新值.然而，由于 $refs 不是响应式的，这些事情都不会发生.

A quote from the vue official documentation states that

$refs...are not reactive.

However, I have used such refs in templates and they are indeed reactive, and even in methods, computed props, and watchers (as long as you access it after being mounted). Several third party vue libraries e.g. this one also provides features that use/depend on the reactivity of refs.

Can someone please clarify what the official doc meant by refs not being reactive please?

解决方案

You are misunderstanding what it means for something to be reactive in the context of the Vue framework. Sure, you are able to access the value of the $refs object after they have been set when the component is mounted, but that does not mean that the object is reactive.

When data is reactive, it means that changes to the value of that data will trigger a "reaction" from some part of the component that depends on that data's value, such as re-rendering the template, recalculating a computed variable, or triggering a watcher.

Read through the documentation on reactivity.

---

Here's an example:

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>

In that example, you can see that the watcher for $refs.foo initially logs that the value of $refs.foo is undefined. This makes sense because the watcher has fired before the component has mounted, so the properties of the $refs object haven't been set yet. Then, in the mounted hook, we see that the value of $refs.foo has been set as expected.

If $refs was reactive, we would then see the template update, because the v-if="$refs.foo" directive would have evaluated to true. We would also see the watcher fire again after the value of $refs.foo was set, logging that new value of $refs.foo. However, since $refs is not reactive, neither of those things happen.

这篇关于为什么 vue 文档说 refs 实际上不是反应性的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！