Javascript 为什么Vue.js可以'；t一旦通过$refs设置了值，则更新该值

为什么在回调函数执行完毕或者单击ChangeTitle按钮时，标题不会在此处更改

这是一个来自Udemy VueJS课程的示例，它在视频中运行良好，但无论我做什么尝试，我似乎都无法让它在我这边起作用。我希望这个问题是可以理解的，而且措辞恰当

var vm1=新的Vue({
el:'附录1'，
数据：{
标题：“VueJS实例”，
},
方法：{
updateTitle:函数（标题）{
this.title=标题；
}
}
});
vm1.$refs.heading.innerText='Something other'；
setTimeout（函数（）{
vm1.title='由计时器更改'；
}, 3000);

{{title}}
改名
我不能肯定，但最有可能发生这种情况的原因是您在Vue不知情的情况下手动处理DOM

Vue做了大量的簿记工作，以便尽可能高效地修补DOM。通过设置heading元素的
innerText
，现有文本节点（由Vue控制）将被Vue不控制的新文本节点替换。当Vue重新呈现组件时，它检测到只有
title
数据属性发生了更改，因此它会修补旧的文本节点，该节点由于被替换而不再存在于DOM中。
$refs是非反应性的，因此无法对其进行数据绑定。
检查文档

如果要使用$refs来更改值，则必须使用属性直接引用它


var vm1=新的Vue({
el:'附录1'，
数据：{
标题：“VueJS实例”，
},
方法：{
updateTitle:函数（标题）{
此.$refs.heading.innerText=标题；
}
}
});
vm1.$refs.heading.innerText='Something other'；
setTimeout（函数（）{
vm1.$refs.heading.innerText='Changed by Timer'；
}, 3000);

{{title}}
改名