vue v—model原理,vue中实现响应式数据的原理
本文主要介绍了vue中v-model和Responsive的实现原理，并通过示例代码非常详细的介绍给大家，对大家的学习或工作有一定的参考价值，有需要的朋友可以参考一下。
目录
垂直模型响应实施
v-model
首先我们要明白，v-model是vue给我们包装好的语法糖。真正的实现依赖于：v-bind:绑定响应数据触发输入事件并传递数据。
例如，下面的例子：
模板
//这两种写法是等价的。
input v-bind:name= name v-on:input= name=$ event . target . value /
输入v-model=name/
/模板
1.用v型车的经典例子
Textarea元素选择下拉框输入类型=单选单选框输入类型=复选框多选框2。使用v模型的副作用
绑定响应对象的一个不存在的属性，vue会悄悄增加这个属性，设置为responsive。
//在模板中：
el输入v-model=user.tel/el输入
//在脚本中：
导出默认值{
data() {
返回{
用户：{
姓名： xxx ，
}
}
}
}
3.自研组件如何支持v-model？
模型属性的默认值为
//默认模型属性
导出默认值{
型号：{
属性：“值”，
事件：“输入”
},
data() {.},
方法：{.},
}
响应式实现
简单一句话理解就是:通过重写数据的get和set属性方法，在渲染数据时，通过get属性方法将所有使用自己的观察者放到自己的观察者列表subs中。当数据发生变化时，通过set attribute方法通知所有观察者发生变化，实现重新渲染。
使用observer模式底层的Object.defineProperty()为所有数据添加getter和setter方法主要涉及三个函数：Dep: observed类，每个数据都有一个Dep实例对象，WatcherWatcher:执行Dep的Observer类。当观察者的数据触发getter时，依赖于收集依赖关系。在收集完依赖关系后，watcher对象将被保存在dep的subs中，当数据发生变化时，dep将通知watcher实例，然后watcher实例将回调cb来更新视图。观察者：将普通数据转化为响应性数据以实现响应性的主要过程；
1.观察者类的构造方法
为当前数据对象创建新的订户Dep。遍历对象的键并调用defineReactive方法(这里getter和setter实际上是绑定的。get方法是收集依赖关系，set方法是在数据发生变化时通知Watcher分发更新。) 2.收集依赖项。
当呈现视图时，get属性方法被触发，并且调用dep的一个方法dep.depend来收集依赖关系。
Watcher类：依赖是Watcher的实例。Dep类：存储依赖关系的位置，依赖关系举个通过Dep.subs[]管理
当componentA当前正在渲染时，组件使用data () {return {a: b 1}}，那么此时会触发B的get property方法，将当前的watcher添加到B的订阅者列表subs中。
3.分发更新
当数据属性上的某个值被修改时，会触发set attribute方法，根据自己的dep.notify开始分发更新(subs持有所有的观察者，在notify方法中，subs的观察者列表首先根据其id排序)。
为什么要排序？
将组件从父组件更新到子组件；因为父组件的创建过程先于子组件，所以观察器的创建也是父组件先于子组件，执行顺序也要保持父组件先于子组件。用户定义的观察器优先于呈现观察器；因为用户定义的观察器是在观察器呈现之前创建的。如果一个组件在父组件的watcher执行过程中被销毁，其对应的watcher执行可以跳过，所以应该先执行父组件的watcher。
排序后将遍历这个队列，执行watcher.run()方法实现数据更新通知。
运行的逻辑是：
当新值与旧值不同时，将触发通知；但当值为object或deep为true时，无论如何都会通知。
这就是为什么在可以解读手表数据的时候，可以得到新旧值。观察：{num(新，旧){.}}
自己实施应对。
根据以上分析，我实现了一个简单版本的数据双向绑定。
从文章中学习
关于vue中v-model和Responsive的实现原理的文章到此为止。关于VUE V-Model响应式原理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。