javascript - $refs 会搞乱插值吗？

Question

我正在学习这个 vue.js 类(class)，作者明确表示通过 $refs 更改元素的 DOM 不会影响插值，事实上，直接对 DOM 进行的任何更改都将被插值覆盖(如果存在) .那不会发生。

尝试通过查询选择器而不是 $refs 来完成，结果相同。

    <div id="app11">
        <h1 ref="myHeading">{{ val }}</h1>
        <button @click="viaRefs">Change value via $refs to 5</button>
    </div>

const vm11 = new Vue({
    el: "#app11",
    data: {
        val: 0
    },
    methods: {
        viaRefs: function() {

            this.$refs.myHeading.innerText = 5;
        }
    }
});

setInterval(() => {
    vm11.val++;
}, 1000);

我希望这个标题中的文本在我点击按钮后显示 5 片刻，然后这个 setInterval 再次更改 val 并且 Vue.js 通过将标题的内部 HTML 更新为 val 当前值来使用react，就像它在那一刻所做的那样.但是，它卡在我直接给它的值上。我错过了什么？

Answer 1

这里的问题是当你设置 innerText ，您正在用一个新的替换 Vue 知道的 TextNode。您基本上失去了绑定(bind)。

在您的情况下，您可以通过将分配更改为:

this.$refs.myHeading.childNodes[0].data = 5;

通过此更改，单击按钮将导致您的 <h1>临时显示5 ，然后从停止的地方继续。

如果您打算将显示值“重置”为 5并从那里开始计数，那么你的作业应该处理 data直接属性，而不是通过 refs 的 innerHtml :

this.val = 5;