Question

我试图了解Vue的基础知识，到目前为止，我所了解的是每次data属性中的任何状态发生变化时，模板或组件都应重新呈现。这是我正在使用的代码段。

index.html

<div id="app">
  <h3>Generator</h3>
  <div>
    Input: 
    <input @input="onInput"/>
  </div>

  <div>
    Output: 

    {{test()}}

  </div>
</div>

main.js

new Vue({
  el:'#app',
  data: {
    textInput: ''
  },
  methods: {
    onInput(event){
      this.textInput = event.target.value
    },
    test(){
      console.log("Test running")
    }
  }
})

我期望发生什么？

由于我每次击键都会更新textInput数据属性，因此我认为由于模板会重新呈现自身，因此每次敲击键时，我都会在控制台中看到Test running消息并且由于该页面每次都会重新呈现，因此我会看到输入字段为空白。

当前发生的情况

运行代码时，我看到test函数仅运行一次。
我不会在每次击键时看到空白的输入字段

Answer 1

DOM不依赖于textInput，因此对其进行更改不会导致重新渲染。如果render函数使用该变量，则当变量更改时，您将获得重新渲染。

new Vue({
  el:'#app',
  data: {
    textInput: ''
  },
  methods: {
    onInput(event){
      this.textInput = event.target.value;
    },
    test(){
      console.log(this.textInput);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Generator</h3>
  <div>
    Input: 
    <input @input="onInput"/>
  </div>

  <div>
    Output: 
    {{textInput.length}}
    {{test()}}

  </div>
</div>

Vue-状态更改不会重新呈现模板吗？

1 个答案: