Question

来自the vue official documentation的引用指出

$ refs ...没有反应。

但是，我在模板中使用了这样的ref，它们确实是反应性的，甚至在方法，计算的prop和观察程序中也是如此（只要您在安装后访问它即可）。几个第三方Vue库e.g. this one还提供使用/取决于引用的反应性的功能。

请问有人可以澄清裁判没有反应的官方文件吗？

Answer 1

您误会了在Vue框架中进行响应是什么意思。当然，在安装组件时，可以在设置$refs对象的值后访问它们，但这并不意味着该对象是反应性的。

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

Read through the documentation on reactivity.

这是一个例子：

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不具有反应性，因此这两种情况均不会发生。

为什么vue文档说ref确实是无反应的，

1 个答案: