Vue底层实现原理总结


Posted in Javascript onFebruary 17, 2018

前言

最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章,一边学习一边总结一下自己的思考。

Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢?

实现原理概述

这是前言提到的文章里的代码,一段典型的体现了Vue特点的代码:

<div id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button,word的值会发生改变
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
  var vm = new MVVM({
    el: '#mvvm-app',
    data: {
      word: 'Hello World!'
    },
    methods: {
      sayHi: function() {
        this.word = 'Hi, everybody!';
      }
    }
  });
</script>

ue实现这种数据双向绑定的效果,需要三大模块:

Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

Observer

Observer的核心是通过Obeject.defineProperty()来监听数据的变动,这个函数内部可以定义setter和getter,每当数据发生变化,就会触发setter。这时候Observer就要通知订阅者,订阅者就是Watcher。

Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:

  1. 在自身实例化时往属性订阅器(dep)里面添加自己
  2. 自身必须有一个update()方法
  3. 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调

Compile

Compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。

总结

以上就是本次整理关于Vue底层实现原理的全部知识内容,如果大家还有任何不明白的地方可以在下方的留言区讨论。

Javascript 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 #Javascript
图文介绍Vue父组件向子组件传值
Feb 17 #Javascript
JavaScript异步加载问题总结
Feb 17 #Javascript
js装饰设计模式学习心得
Feb 17 #Javascript
Vue组件库发布到npm详解
Feb 17 #Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 #Javascript
JavaScript中严格判断NaN的方法
Feb 16 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
浅析return false的正确使用
2013/11/04 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python中的闭包总结
2014/09/18 Python
Python中装饰器的一个妙用
2015/02/08 Python
python逆序打印各位数字的方法
2018/06/25 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
影视制作岗位职责
2013/12/04 职场文书
勤俭节约倡议书
2014/04/14 职场文书
2014年调度员工作总结
2014/11/19 职场文书
党员思想汇报材料
2014/12/19 职场文书
转让协议书
2015/01/27 职场文书
2019年教师入党申请书
2019/06/27 职场文书