为什么通过$ refs设置值后Vue.js无法更新该值

2024-05-02 • 问答

一旦回调函数执行完毕，或者单击“更改标题”按钮，为什么标题在这里没有更改？

这是Udemy VueJS课程的一个示例，它在视频上运行良好，但是无论我如何尝试，我似乎都无法使其正常工作。我希望这个问题是可以理解的，并且可以制定得很好。

var vm1 = new Vue({
  el: '#app1',data: {
    title: 'The VueJS Instance',},methods: {
    updateTitle: function(title) {
      this.title = title;
    }
  }
});

vm1.$refs.heading.innerText = 'Something else';

setTimeout(function() {
  vm1.title = 'Changed by Timer';
},3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>


<div id="app1">
  <h1 ref="heading">{{ title }}</h1>
  <button v-on:click="updateTitle('a')" ref="myButton">Change title</button>
</div>

$ refs是非反应性的，因此您不能使用它进行数据绑定。查看文档https://vuejs.org/v2/api/#ref

如果要使用$ refs更改值，则必须直接使用property引用它。

var vm1 = new Vue({
  el: '#app1',data: {
    title: 'The VueJS Instance',},methods: {
    updateTitle: function(title) {
      this.$refs.heading.innerText = title;
    }
  }
});

vm1.$refs.heading.innerText = 'Something else';
setTimeout(function() {
  vm1.$refs.heading.innerText = 'Changed by Timer';
},3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>


<div id="app1">
  <h1 ref="heading">{{ title }}</h1>
  <button v-on:click="updateTitle('a')" ref="myButton">Change title</button>
</div>

我不能肯定地说，但这很可能是因为您在Vue所不了解的情况下手动将DOM弄乱了。

Vue做了大量记账工作，以使DOM修补尽可能高效。通过设置标题元素的innerText，现有的文本节点（由Vue控制）将被Vue无法控制的新文本节点替换。当Vue重新渲染该组件时，它检测到仅title数据属性已更改，因此它修补了由于替换而不再存在于DOM中的旧文本节点。

为什么通过$ refs设置值后Vue.js无法更新该值

mdlyou 回答：为什么通过$ refs设置值后Vue.js无法更新该值

大家都在问