Vue框架简单的实现原理以及简介 |
您所在的位置：网站首页 › vue的工作原理 › Vue框架简单的实现原理以及简介 |
Vue框架简单的实现原理以及简介
|
1. 前端框架发展历史
静态页面 （写好后固定，不能进行其他改变或渲染）==> ajax（异步请求） ==> mvc(model负责获取数据，controller处理成view层需要的数据，view显示数据) ==> mvvm(model与view双向绑定，不需要手动处理) ==> single page application 【spa】阶段（Vue、Angular、React等等，都属于Spa开发框架，不再通过页面之间相互跳转，以组件形式进行跳转功能的实现） 2. MV*模式（MVC/MVP/MVVM）MVC的全称为Model-View-Controller,即模型-视图-控制器。 Model：处理数据和业务逻辑等View：显示界面，展示结果等Controller：控制流程，处理交互等 MVC各个模块通信方式如下：
MVP的全称为Model-View-Presenter，即模型-视图-协调器（主持者） Model：处理数据和业务逻辑等View：显示界面，展示结果等Presenter：协调Model和View模块工作，处理交互 协调器（Presenter）起到了协调作用，mv的任何操作都要经过协调器统一调配。
MVVM:双向数据绑定、View的变动、映射在ViewModel、反之一样 - Model：处理数据和业务逻辑等 - View：显示界面，展示结果等 - ViewModel：数据一旦变化，对应的视图自动更新 显然实现了mv直接的联系，没有第三方制约，但是并不是简单的直接去掉第三方，该理念的实现，后面开始讲解。 Vue实现数据绑定的原理1）数据通过Object.defineProperty进行get、set拦截 2）通过watcher(观察者模式、订阅发布模式)触发组件重新渲染，创建新的虚拟dom（js对象模拟dom)对比旧的虚拟dom,通过diff算法，找到不同的地方，以最小的代价更新节点 用到的ES5语法（ECMAScript5，通俗来讲就是javascript） 1）Object.defineProperty定义对象属性的方法 2）对象函数简写 Object.defineProperty(obj, "name", { //正常函数属性书写 // get:function(){ // }, //对象函数简写 get() { }, // set:function(){ // }, set() { } })在设置和获取属性值是会触发set/get方法，在方法里绑定元素即可实现对元素的重新渲染。 |
可以看到是一个循环的流程，但是方向不可以改变。【本文地址】