V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chiuGi
V2EX  ›  Vue.js

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

  •  
  •   chiuGi · 2020-11-23 15:54:33 +08:00 · 2706 次点击
    这是一个创建于 1461 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <el-input v-model="input" placeholder="请输入内容"></el-input>
    
    <script>
    export default {
      data() {
        return {
          input: ''
        }
      }
    }
    </script>
    

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

    7 条回复    2020-11-28 08:59:50 +08:00
    asiasky
        1
    asiasky  
       2020-11-23 16:06:22 +08:00
    性能应该是 watch 会更好一下吧也更常用一些,本来 vue 就帮你监听了没必要在重复声明,感觉有些过于吹毛求疵了,其实没有那么明显的性能优化...
    johnkiller
        2
    johnkiller  
       2020-11-23 16:10:40 +08:00
    @change 是原生 DOM 的回调事件,watch 是 Vue 中监听变量改变。主要还是看你自己的使用场景。
    zidian
        3
    zidian  
       2020-11-23 16:13:00 +08:00
    有时用法不一样啊。this.input = xxx 的时候 watch 也会被调用,change 只有表单输入才被调用。
    wunonglin
        4
    wunonglin  
       2020-11-23 16:15:30 +08:00
    <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
        5
    marcong95  
       2020-11-23 16:17:04 +08:00
    v-model 是:value 和 @input 的语法糖,跟 @change 好像差距有点大,change 应该是 input 失去焦点时值发生更改才触发
    wunonglin
        6
    wunonglin  
       2020-11-23 16:17:59 +08:00
    复杂的话还是建议 watch,毕竟这是 vue 的方法,简单的话用 get/set 就行了,这是 js 的方法
    chiuGi
        7
    chiuGi  
    OP
       2020-11-28 08:59:50 +08:00
    @wunonglin 这个我也很常用阿,但是每次都要设置 getter/setter 感觉有点麻烦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1131 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 18:39 · PVG 02:39 · LAX 10:39 · JFK 13:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.