Vue - изменение состояния не повторяет шаблон?

Question

Я пытаюсь понять основы Vue, и до сих пор я понимаю, что каждый раз, когда изменяется любое состояние в свойстве данных, шаблон или компонент должны визуализироваться.Вот фрагмент кода, с которым я работаю.

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 в консоли каждый раз, когда нажимаю клавишу, и, поскольку страница будет рендериться каждый раз, поле ввода будет пустым.

Что происходит в настоящее время

1. Я вижу, что функция test запускается только один раз, когда я запускаю код.
2. Я не вижу пустое поле ввода при каждом нажатии клавиши

Answer 1

DOM не зависит от textInput, поэтому изменения в нем не вызывают повторного рендеринга.Если функция рендеринга использует переменную, вы получите повторный рендеринг при изменении переменной.

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>