VUE双向绑定原理及其源码的简单分析（上）

最新推荐文章于 2022-03-04 16:49:33 发布

Larru-Sun

最新推荐文章于 2022-03-04 16:49:33 发布

阅读量452

点赞数 2

分类专栏： vue 双向绑定前端文章标签： vue 双向绑定

本文链接：https://blog.csdn.net/qq_33692349/article/details/103923517

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

双向绑定

1 篇文章 0 订阅

订阅专栏

在不少面试中都有涉及到VUE双向绑定原理这个问题，于是便简单研究了一下，在这里简单的记录下自己的学习心得，小白初识VUE，若有错的地方请各位大佬提出，一起进步。

首先来段代码看看这神奇的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    #app{
        width: 300px;
        margin: auto;
        margin-top: 300px;
        background: #ccc;
    }

</style>
<body>
    <div id="app">
        <input type="text" v-model="value" type="number">
        <button @click="add">加一</button>
        <br/>
        <div>value的值为： {{value}}</div>
    </div>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            value:0
        },
        methods:{
            add(){
                this.value++;
            }
        }
    })
</script>
这是一个很简单的vue实例，具体不在详细讲解，我们也将使用这段代码来进行讲解，贴上效果图

当我们在输入框输入1的时候value的值变为01此时下方显示也会变为01，此时说明了inutp输入框的值和视图层的值是同步更新的，效果如图

当我们点击加一按钮的时候触发了函数add去动态的给data中的value值加一，此时value为2，显示也同步更新为2，说明data变化时候视图也跟着变化了，效果如图

这就是双向绑定的效果，用起来也是很方便的

感受了双向绑定的效果和魅力后我们来简单的探讨下他的原理吧，

首先我们来看下VUE官网对响应式原理的解说

官网已经说的很明确了，使用 Object.defineProperty 把这些属性全部转为 getter/setter。（这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因）在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。但具体怎么追踪呢，我们在来看一张官网提供的原理图

图很简单，不过我相信大家也一定会看的有点蒙吧，在我第一眼看的时候也是这样的，不急让我们一点点解说。

原理图一眼看去大致可以分为三个部分，component（也就我们的视图层）、watcher、Data(也就是我们代码的Data)他们三者之间的关联下面我们分别讲讲这三个部分

Data：data是什么不用我多说就是我们代码里面的data部分，这里有一个getter和setter，这两个属性的由来是Object.defineProperty的成果，vue在初始化的时候会对我们data里面的所有属性通过 Object.defineProperty的重新定义让他们都能拥有getter（当值发生变化的时候会触发）和setter（获取值得方法）属性，同时发送通知给watcher。在我们的案例中data的value值被 Object.defineProperty赋予了getter和setter，当我们点击add按钮触发事件修改了value的值后setter触发同时notify通知告知watcher有值发生变化

视图层：不用多说负责渲染页面（render），渲染数据无非两件事，什么时候渲染？要渲染什么？明白这两个就简单了，从图中可以看出视图层是通过接受watcher发出的指令从而执行渲染动作（什么时候渲染），当视图层收到指令后变从Data中的geter中获取要渲染的数据从而达到动态渲染的效果

watcher（监听者）：watcher可以理解为data和视图层之间的中间桥梁，他负责视图层和data之间的通讯，也就是当data数据变的时候触发setter，从而在发送一个通知给watcher，watcher收到通知后便告知视图层有数据变化，视图层收到watcher的通知后再通过data里面的getter获取到对应的数据，从而进行试图渲染

理清了data、试图、和watcher之间的大概关系后我们在结合我们的实力在连起来一起看看他的大致工作原理，页面初始渲染的是后vue给我们的data里面的value值绑定上对应的setter和getter，当我们调用add函数给value加一的时候由于值发生了变化setter被触发，然后发送一个通知给watcher，watcher收到通知后立刻通知视图层，视图层在收到通知的时候变通过value的getter属性获取到新的值，从而进行渲染。好了，大致过程就是这样的。

此时很多人可能会迷惑，那么在input输入框输入值得时候又是怎么实现的让data的值也跟着改变？要理清这个问题先得研究研究v-mode的用法，官网已经说得很详细了

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。是的，他只是个语法糖而已，也就是v-model干了两件事，第一实现v-bind绑定我们的value值，第二监听change事件，并把值赋给我们的value，就是这么简单。

好了，由于时间问题，先就介绍到这，接下来我会在出下篇，结合vue源码的实现，具体讲解他们是怎么工作的和一些工作细节。今天就先到这。若有什么错误之处望各位大佬指出一起相互学习。谢谢！！！！！

Larru-Sun

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE双向绑定原理及其源码的简单分析（上）

在不少面试中都有涉及到VUE双向绑定原理这个问题，于是便简单研究了一下，在这里简单的记录下自己的学习心得，小白初识VUE，若有错的地方请各位大佬提出，一起进步。首先来段代码看看这神奇的双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫