vue中v-model的实现原理到底是什么?

看了网上好多关于v-model实现原理的文章,不是很清楚,还跟vue双向数据绑定混在一起了。
下面说下我我对v-model的理解,请大家看下问题出在哪里了。


v-model是语法糖。
v-model原理:

  1. v-bind绑定响应式数据
  2. 通过oninput触发事件获取当前$event.target.value,然后赋值给当前变量。
不知道以下算不算是v-model原理

3.当前变量值修改,会触发object.definedProperty中的set方法,将data中的当前变量进行赋值。

v-bind绑定响应式数据,是什么原理,搜索网上也查不出来
以上是看了好多篇v-model实现原理后自己的理解,可能跟原理有些偏差,请大家多提建议,谢谢。
阅读 184
评论
    3 个回答
    linong
    • 14.6k

    首先 v-bind 、 v-model 是什么?指令,那么他能控制什么,如何使用?

    然后说一下 v-model 是什么。语法糖 :value + @input。还要分为两种情况。

    1. 原生DOM

      1. input
      2. select
      3. textarea

        <input v-model="val">
        <!-- 基本等价于,因为内部还有一些其他的处理 -->
        <input :value="val" @input="val = $event.target.value">
    2. 自定义组件

      <v-input v-model="val"></v-input>
      <!-- 等价于 -->
      <v-input :value="val" @input="val = $event"></v-input>

    我说的这些官网都有,没找到就是因为看的不仔细而已。

    评论 赞赏

      v-model原理

      v-model本质就是一个语法糖,可以看成是value + input方法的语法糖。 可以通过model属性的propevent属性来进行自定义。原生的v-model,会根据标签的不同生成不同的事件和属性。

      响应式数据原理

      Vue2.x

      Vue在初始化数据时,会使用Object.defineProperty重新定义data中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

      Vue3.x

      Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

      评论 赞赏

        楼上已经说得很清楚了。
        使用v-model分为两种场景。

        1. 父子组件之间的双向绑定
        2. dom元素上双向绑定

        第一种场景可以看文档。
        第二种场景分两个方向:

        1. 改变数据时通知视图更新

          vue初始化时会进行依赖收集,通过Object.definedProperty()的getter收集某个属性的所有依赖,然后通过Object.definedProperty()的setter在某个属性更新时通知视图更新。

        2. 视图改变时通知数据更新

          通过监听表单元素的input事件,从而通知数据更新。

        你会发现vue-model只能用于input、textarea这些表单元素。根本原因是div、span这些普通的dom元素的“值“发生变化时,vue没办法监听到。

        评论 赞赏
          撰写回答

          登录后参与交流、获取后续更新提醒