vue中如何实现双向绑定,vue3.0双向绑定实现

　　关于vue下的双向绑定功能，我个人理解是在处理逻辑的过程中缓存了大量的节点对象，节点对象可以是html标签，也可以是文本内容。既然选择了缓存这些对象，那么在使用过程中如果需要更改节点，可以取出节点，更改标签属性或者修改文本内容。本文主要谈如何实现双向绑定。

目录

　　首先说一下实现双向绑定的思路：先说一下实现这些功能的主要js方法：最后需要创建哪些工具类？见下图截图实现vue双向绑定。

　　这是一个普通的html文件，vue.js就不介绍了。你在代码中看到了一些熟悉的东西吗？比如：‘v-model’，‘v-on:click’，还有常用的“双花括号{{}}”赋值语句。

首先说一下实现双向绑定的思路：

　　1.创建一个定制的vue js对象，比如上面的wslVue对象。初始化方法中需要的参数有：(1)要挂载到的dom对象的id，(2)自定义vue对象的数据属性(json对象)，以及(3)后面增加一个模拟挂载的方法。(这里有用的是(1)和(2)参数，(3)参数可以用来渲染(挂载)vue对象所有初始化工作完成后的方法回调)。

　　第二，重写vue属性数据json对象的set和get方法，同时可以将data下的所有属性添加到vue对象中，重写vue生成属性的set和get方法。在方法中可以直接执行数据的set和get方法(目的是直接使用vue对象属性的读写进行dom操作)。

　　第三，解析html，具体是对html中的标签节点和文本节点进行重组(这里的具体重组是指将vue指令，{{}}赋值符号转换成正常的html文档进行输出)。在解析过程中，对每个需要操作的节点进行缓存、绑定逻辑、添加监听事件(比如input标签输入)。

再说一下实现这些功能的js主要的方法有哪些：

　　1.设置和获取js对象属性的方法。

　　第二，文件。html片段分析。

　　3.利用相关规则判断重组html代码片段。

最后需要创建哪些工具类？

　　I. vue对象。

　　二是观察者类Watcher，保存了要操作的节点node和属性变化时要做的回调方法。

　　3.管理所有观察器的管理Dep，控制与数据变化相关的观察器进行回调渲染。

实现vue双向绑定

　　初始化vue对象方法

　　注意事项：

　　1:添加vue对象数据中的所有属性，并重写set和get方法。

　　2.为vue对象添加方法管理方法对象，在解析html获取v-on:click方法时为tag添加click事件方法体。

　　3:这里解析html。当解析过程中遇到要处理的节点时，创建一个Watcher对象，相关的节点和指令保存在Watcher对象中，并将Watcher对象添加到观察者管理类的Dep集合中。

　　4:初始化后挂载，将完整的html呈现给指定的dom元素。

　　编译类解析需要挂载相应的dom。

　　获取所有节点节点。

　　解析特定指令

　　元素和文本内容判断

　　如果这是标签节点，它需要解析v-on和v-model指令。

　　v型车

　　v-on:点击

　　红线是与vue对象中的方法相匹配的方法，为当前节点添加了一个click事件。

　　如果这是文本内容，node需要解析里面的{{}}指令。

　　总结：这里会创建很多Watcher对象，保存当前的vue对象、节点和数据变化回调，保存在Dep管理类中，以便在数据变化时直接执行方法回调进行渲染。

　　特定指令判断

　　观察器和Dep对象

　　放最后一张思维导图。

　　结尾：基本思路到此结束，没有太复杂的逻辑，表达能力有限。希望对大家有所帮助，同时接受大神们的批评指正，共同进步。

　　以上是pure JS如何实现vue.js下双向绑定功能的细节，更多JS实现vue双向绑定的信息请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。