这是v-on:change的正确使用方式吗？

Question

我有一个文本输入框，它有一个v-model和一个v-on:change绑定。当用户输入时，我会更新data中的数组，并将UI绑定到该数组。我还想调用一个方法通过AJAX发送用户输入。发送到服务器的数据是一个计算属性的结果。

<div id="app">
  <input
      id="user-input"
      type="text"
      v-model="userInput"
      v-on:change="process()">

   <ul id="parsed-list">
      <li v-for="item in parsedInput">
          {{ item }}
      </li>
    </ul>
</div>

let parse = input => {
    return input.split(',')
}

let serverProcess = values => {
    // Send array to server
}

new Vue({
  el: '#app',
  data: {
    userInput: ''
  },
  computed: {
    parsedInput () {
        return parse(this.userInput)
    }
  },
  methods: {
    process () {
        serverProcess(this.parsedInput);
    }
  }
});

在Vue中，同时使用 v-model 和 v-on:change 是否是最佳实践？

- user9993

Answer 1

我建议使用watch而不是v-on:change。在视图中，您将删除v-on:change。每当parsedInput更改（由于userInput更改），则会调用watch函数。重要的是watch函数与计算/数据属性名称相同。

new Vue({
    computed: {
        parsedInput () {
            return parse(this.userInput)
        }
    }
    methods: {
        process () {
            serverProcess(this.parsedInput);
        }
    },
    watch: {
        parsedInput() {
            this.process()
        }
    }
})

您可以在此处阅读有关手表的更多信息：https://v2.vuejs.org/v2/guide/computed.html#Watchers

我认为这样做更好，因为您通过代码描述了应用程序的更多行为，而不是视图。这将使您的组件更易于测试。它还具有此效果：如果parsedInput或userInput因某种其他原因而发生更改（而不是通过v-model），则会调用观察器。

- kmc059000

Answer 2

点赞 @kmc0590000。 此外，使用 watch 你也可以查看之前的状态和当前的状态，它们作为参数传递。

v-model 只是一种语法糖，实际上执行以下操作：

<input :value="userInput" @input="change">

您也可以使用@change代替v-on:，并使用:value代替v-bind:value。

在第6行（v-on:change="process()"）中，您可以删除括号。输入事件作为参数传递给您的方法，您可以直接访问属性。（https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers）

- Philip