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 相关文章推荐
日期 时间js控件
May 07 Javascript
jquery插件之easing使用
Aug 19 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
学习php笔记 字符串处理
2010/10/19 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python之生成多层json结构的实现
2020/02/27 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
经销商年会策划方案
2014/05/29 职场文书
小学捐书活动总结
2014/07/05 职场文书
离婚财产处理协议书
2014/09/30 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书