Vue 里 input 标签 watch 和 change 都能监听值的变化，哪个更好呢？

[chiuGi]

假如我拿 elementui 中最简单的 input 组件作为示例

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

此时我想监听 input 的值，input 标签的 change 方法和 vue 的 watch 都能监听到，那那个会更常用呢？ 哪个会性能更好捏？有什么检测这个的方法吗？

[asiasky]

性能应该是 watch 会更好一下吧也更常用一些,本来 vue 就帮你监听了没必要在重复声明,感觉有些过于吹毛求疵了,其实没有那么明显的性能优化...

[johnkiller]

@change 是原生 DOM 的回调事件，watch 是 Vue 中监听变量改变。主要还是看你自己的使用场景。

[zidian]

有时用法不一样啊。this.input = xxx 的时候 watch 也会被调用，change 只有表单输入才被调用。

[wunonglin]

<el-input v-model="content" placeholder="请输入内容"></el-input>

export default {
data() {
return {
input: ''
}
},
computed: {
content: {
get: function(){
return this.input
},
set: function(value){
this.input = value
// 想干嘛就干嘛
}
}
}
}

[marcong95]

v-model 是:value 和 @input 的语法糖，跟 @change 好像差距有点大，change 应该是 input 失去焦点时值发生更改才触发

[wunonglin]

复杂的话还是建议 watch，毕竟这是 vue 的方法，简单的话用 get/set 就行了，这是 js 的方法

[chiuGi]

@wunonglin 这个我也很常用阿，但是每次都要设置 getter/setter 感觉有点麻烦