vue2中,v-model和.sync有什么区别?

首先,vue2是单向数据流,所以v-model实现的双向绑定一定是伪双向绑定,它的本质是语法糖,即其内部就是完成了监听input事件,并使用v-bind绑定input的value值

让我们简单的看一下vue的源码

  // transform component v-model info (value and callback) into
  // prop and event handler respectively.
  function transformModel(options, data) {
      var prop = (options.model && options.model.prop) || 'value';     //这里是自定义事件和绑定属性
      var event = (options.model && options.model.event) || 'input';
      //这里我理解是绑定prop里的属性
      (data.attrs || (data.attrs = {}))[prop] = data.model.value;
      var on = data.on || (data.on = {});
      //下面这段我理解就是监听事件了,可以看到之前定义在event中的事件通过on监听
      var existing = on[event];                    
      var callback = data.model.callback;
      if (isDef(existing)) {
          if (isArray(existing)
              ? existing.indexOf(callback) === -1
              : existing !== callback) {
              on[event] = [callback].concat(existing);
          }
      }
      else {
          on[event] = callback;
      }
  }

.sync其实也一样,同样是语法糖,但.sync有一些v-model没有的优点
1.v-model在一个元素上只能使用一次,而.sync可以使用多次
2.v-model默认是监听input事件,动态绑定value属性,直接用会导致语义不清晰,虽然可以通过配置model项修改,但修改会影响整个组件

最后,两者的使用方式,使用场景也有区别,只能说懂得都懂,这个就不多赘述了(滑稽