Vue 双向绑定的原理及实现Demo

最新推荐文章于 2025-03-09 09:06:46 发布

Creabine

最新推荐文章于 2025-03-09 09:06:46 发布

阅读量8.9k

点赞数 9

分类专栏：学习笔记 vue.js 经常读一读别人的代码前端工程师从初级到高级文章标签： Vue MVVM 双向绑定机制 demo

本文链接：https://blog.youkuaiyun.com/Creabine/article/details/59201837

版权

Vue双向绑定的原理

Vue用了一段时间了，一直没有纠结过它的原理，今天看了一篇很不错的文章：Vue.js双向绑定的实现原理，跟着敲了一遍，发现其中有意思的地方还是很多的，一些知识我之前都没有接触过，这里要好好整理一下思路。

这篇博客涉及的东西比较多，还需要慢慢整理。目前还未写完。

主要的知识点：
1.Vue双向绑定原理（一）文档片段DocumentFragment
2.Vue双向绑定原理（二）访问器属性defineProperty()和发布/订阅模式

大致思路：首先Vue会使用documentfragment劫持根元素里包含的所有节点，这些节点不仅包括标签元素，还包括文本，甚至换行的回车。
然后Vue会把data中所有的数据，用defindProperty()变成Vue的访问器属性，这样每次修改这些数据的时候，就会触发相应属性的get，set方法。
接下来编译处理劫持到的dom节点，遍历所有节点，根据nodeType来判断节点类型，根据节点本身的属性（是否有v-model等属性）或者文本节点的内容（是否符合{ {文本插值}}的格式）来判断节点是否需要编译。对v-model，绑定事件当输入的时候，改变Vue中的数据。对文本节点，将他作为一个观察者watcher放入观察者列表，当Vue数据改变的时候，会有一个主题对象，对列表中的观察者们发布改变的消息，观察者们再更新自己，改变节点中的显示，从而达到双向绑定的目的。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定demo</title>
<style>
    body{
     margin: 200px auto;width: 800px;}
</style>
</head>
<body>
    <div id="app">
        <input type=

最低0.47元/天解锁文章