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

Question

为什么回调函数完成执行后或单击“更改标题”按钮时标题不会在此处更改？

这是 Udemy VueJS 类(class)中的一个示例，它在视频中运行良好，但无论我尝试什么，我似乎都无法让它在我这边工作。我希望这个问题是可以理解的并且表述得当。

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>

Answer 1

$refs 是非 react 性的，所以你不能用它做数据绑定(bind)。 查看文档 https://v2.vuejs.org/v2/api/#ref

如果你想用$refs改变值，你必须直接用属性引用它。

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>