-
2020-06-14 16:30:43
经过几天的研究,发现学习框架的底层技术,收获颇丰,相比只学习框架的使用要来的合算;如果工作急需,快速上手应用,掌握如何使用短期内更加高效;如果有较多的时间来系统学习,建议研究一下框架的等层技术、原理。
Vue、React、Angular三大框架对比
1、Vue
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。
它有以下的特性:
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点:
- 简单:官方文档很清晰,比 Angular 简单易学。
- 快速:异步批处理方式更新 DOM。
- 组合:用解耦的、可复用的组件组合你的应用程序。
- 紧凑:~18kb min+gzip,且无依赖。
- 强大:表达式 无需声明依赖的可推导属性 (computed properties)。
- 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
缺点:
- 新生儿:Vue.js是一个新的项目,没有angular那么成熟。
- 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
- 不支持IE8
2、React
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
它有以下的特性:
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好地配合。
优点:
- 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
- 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
- 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
- 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
- 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
- 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点:
- React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。
3、Angular
Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
它有以下的特性:
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点:
- 模板功能强大丰富,自带了极其丰富的angular指令。
- 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
- 自定义指令,自定义指令后可以在项目中多次使用。
- ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
- angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
缺点:
- angular 入门很容易 但深入后概念很多, 学习中较难理解.
- 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
- 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
- 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
- DI 依赖注入 如果代码压缩需要显示声明.
通过以上相比较,您更加倾向于学习哪一个呢?
正题:Vue的基本原理
1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据{{ prop }}、v-model等规则进行compile;
2、通过Object.defineProperty()进行数据变化拦截;
3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;
4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值,完成双向绑定完成数据的双向绑定在于Object.defineProperty()
Vue双向绑定的实现
1、简易双绑
首先,我们把注意力集中在这个属性上:Object.defineProperty。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
语法:Object.defineProperty(obj, prop, descriptor)什么叫做,定义或修改一个对象的新属性,并返回这个对象呢?
var obj = {}; Object.defineProperty(obj,'hello',{ get:function(){ //我们在这里拦截到了数据 console.log("get方法被调用"); }, set:function(newValue){ //改变数据的值,拦截下来额 console.log("set方法被调用"); } }); obj.hello//输出为“get方法被调用”,输出了值。 obj.hello = 'new Hello';//输出为set方法被调用,修改了新值
通过以上方法可以看出,获取对象属性值触发get、设置对象属性值触发set,因此我们可以想象到数据模型对象的属性设置和读取可以驱动view层的数据变化,view的数据变化传递给数据模型对象,在set里面可以做很多事情。
在这基础上,我们可以做到数据的双向绑定:
let obj = {}; Object.defineProperty(obj, 'name', { set: function(newValue){ console.log('触发setter'); document.querySelector('.text-box').innerHTML = newValue; document.querySelector('.inp-text').value = newValue; }, get: function(){ console.log('触发getter'); } }); document.querySelector('.inp-text').addEventListener('keyup', function(e){ obj.name = e.target.value; }, false);
html
<input class="inp-text" type="text"> <div class="text-box"></div>
以上只是vue的核心思想,通过对象底层属性的set和get进行数据拦截,vue的虚拟dom又是怎么实现的,且看以下分解。
2、虚拟DOM树
创建虚拟DOM:
var frag = document.createDocumentFragment();
view层的{{msg}}和v-model的编译规则如下:
html:<div id="container"> {{ msg }}<br> <input class="inp-text" type="text" v-model="inpText"> <div class="text-box"> <p class="show-text">{{ msg }}</p> </div> </div>
view层做了多层嵌套,这样测试更多出现错误的可能性。
var container = document.getElementById('container'); //这里我们把vue实例中的data提取出来,更加直观 var data = { msg: 'Hello world!', inpText: 'Input text' }; var fragment = virtualDom(container, data); container.appendChild(fragment); //虚拟dom创建方法 function virtualDom(node, data){ let frag = document.createDocumentFragment(); let child; // 遍历dom节点 while(child = node.firstChild){ compile(child, data); frag.appendChild(child); } return frag; } //编译规则 function compile(node, data){ let reg = /\{\{(.*)\}\}/g; if(node.nodeType === 1){ // 标签 let attr = node.attributes; for(let i = 0, len = attr.length; i < len; i++){ // console.log(attr[i].nodeName, attr[i].nodeValue); if(attr[i].nodeName === 'v-model'){ let name = attr[i].nodeValue; node.value = data[name]; } } if(node.hasChildNodes()){ node.childNodes.forEach((item) => { compile(item, data); // 递归 }); } } if(node.nodeType === 3){ // 文本节点 if(reg.test(node.nodeValue)){ let name = RegExp.$1; name = name.trim(); node.nodeValue = data[name]; } } }
解释:
1、通过virtualDom创建虚拟节点,将目标盒子内所有子节点添加到其内部,注意这里只是子节点;
2、子节点通过compile进行编译,a:如果节点为元素,其nodeType = 1,b:如果节点为文本,其nodeType = 3,具体可以查看详情http://www.w3school.com.cn/js...;
3、如果第二步子节点仍有子节点,通过hasChildNodes()来确认,如果有递归调用compile方法。3、响应式原理
核心思想:Object.defineProperty(obj, key, {set, get})function defineReact(obj, key, value){ Object.defineProperty(obj, key, { set: function(newValue){ console.log(`触发setter`); value = newValue; console.log(value); }, get: function(){ console.log(`触发getter`); return value; } }); }
这里是针对data数据的属性的响应式定义,但是如何去实现vue实例vm绑定data每个属性,通过以下方法:
function observe(obj, vm){ Object.keys(obj).forEach((key) => { defineReact(vm, key, obj[key]); }) }
vue的构造函数:
function Vue(options){ this.data = options.data; let id = options.el; observe(this.data, this); // 将每个data属相绑定到Vue的实例上this }
通过以上我们可以实现Vue实例绑定data属性。
如何去实现Vue,通常我们实例化Vue是这样的:
var vm = new Vue({ el: 'container', data: { msg: 'Hello world!', inpText: 'Input text' } }); console.log(vm.msg); // Hello world! console.log(vm.inpText); // Input text
实现以上效果,我们必须在vue内部初始化虚拟Dom
function Vue(options){ this.data = options.data; let id = options.el; observe(this.data, this); // 将每个data属相绑定到Vue的实例上this //------------------------添加以下代码 let container = document.getElementById(id); let fragment = virtualDom(container, this); // 这里通过vm对象初始化 container.appendChild(fragment); }
这是我们再对Vue进行实例化,则可以看到以下页面:
至此我们实现了dom的初始化,下一步我们在v-model元素添加监听事件,这样就可以通过view层的操作来修改vm对应的属性值。在compile编译的时候,可以准确的找到v-model属相元素,因此我们把监听事件添加到compile内部。
function compile(node, data){ let reg = /\{\{(.*)\}\}/g; if(node.nodeType === 1){ // 标签 let attr = node.attributes; for(let i = 0, len = attr.length; i < len; i++){ // console.log(attr[i].nodeName, attr[i].nodeValue); if(attr[i].nodeName === 'v-model'){ let name = attr[i].nodeValue; node.value = data[name]; // ------------------------添加监听事件 node.addEventListener('keyup', function(e){ data[name] = e.target.value; }, false); // ----------------------------------- } } if(node.hasChildNodes()){ node.childNodes.forEach((item) => { compile(item, data); }); } } if(node.nodeType === 3){ // 文本节点 if(reg.test(node.nodeValue)){ let name = RegExp.$1; name = name.trim(); node.nodeValue = data[name]; } } }
这一步我们操作页面输入框,可以看到以下效果,证明监听事件添加有效。
到这里我们已经实现了MVVM的,即Model -> vm -> View || View -> vm -> Model 中间桥梁就是vm实例对象。
4、观察者模式原理
观察者模式也称为发布者-订阅者模式,这样说应该会更容易理解,更加形象。
订阅者:var subscribe_1 = { update: function(){ console.log('This is subscribe_1'); } }; var subscribe_2 = { update: function(){ console.log('This is subscribe_2'); } }; var subscribe_3 = { update: function(){ console.log('This is subscribe_3'); } };
三个订阅者都有update方法。
发布者:
function Publisher(){ this.subs = [subscribe_1, subscribe_2, subscribe_3]; // 添加订阅者 } Publisher.prototype = { constructor: Publisher, notify: function(){ this.subs.forEach(function(sub){ sub.update(); }) } };
发布者通过notify方法对订阅者广播,订阅者通过update来接受信息。
实例化publisher:var publisher = new Publisher(); publisher.notify();
这里我们可以做一个中间件来处理发布者-订阅者模式:
var publisher = new Publisher(); var middleware = { publish: function(){ publisher.notify(); } }; middleware.publish();
5、观察者模式嵌入
到这一步,我们已经实现了:
1、修改v-model属性元素 -> 触发修改vm的属性值 -> 触发set
2、发布者添加订阅 -> notify分发订阅 -> 订阅者update数据
接下来我们要实现:更新视图,同时把订阅——发布者模式嵌入。发布者:
function Publisher(){ this.subs = []; // 订阅者容器 } Publisher.prototype = { constructor: Publisher, add: function(sub){ this.subs.push(sub); // 添加订阅者 }, notify: function(){ this.subs.forEach(function(sub){ sub.update(); // 发布订阅 }); } };
订阅者:
考虑到要把订阅者绑定data的每个属性,来观察属性的变化,参数:name参数可以有compile中获取的name传参。由于传入的node节点类型分为两种,我们可以分为两订阅者来处理,同时也可以对node节点类型进行判断,通过switch分别处理。function Subscriber(node, vm, name){ this.node = node; this.vm = vm; this.name = name; } Subscriber.prototype = { constructor: Subscriber, update: function(){ let vm = this.vm; let node = this.node; let name = this.name; switch(this.node.nodeType){ case 1: node.value = vm[name]; break; case 3: node.nodeValue = vm[name]; break; default: break; } } };
我们要把订阅者添加到compile进行虚拟dom的初始化,替换掉原来的赋值:
function compile(node, data){ let reg = /\{\{(.*)\}\}/g; if(node.nodeType === 1){ // 标签 let attr = node.attributes; for(let i = 0, len = attr.length; i < len; i++){ // console.log(attr[i].nodeName, attr[i].nodeValue); if(attr[i].nodeName === 'v-model'){ let name = attr[i].nodeValue; // --------------------这里被替换掉 // node.value = data[name]; new Subscriber(node, data, name); // ------------------------添加监听事件 node.addEventListener('keyup', function(e){ data[name] = e.target.value; }, false); } } if(node.hasChildNodes()){ node.childNodes.forEach((item) => { compile(item, data); }); } } if(node.nodeType === 3){ // 文本节点 if(reg.test(node.nodeValue)){ let name = RegExp.$1; name = name.trim(); // ---------------------这里被替换掉 // node.nodeValue = data[name]; new Subscriber(node, data, name); } } }
既然是对虚拟dom编译初始化,Subscriber要初始化,即Subscriber.update,因此要对Subscriber作进一步的处理:
function Subscriber(node, vm, name){ this.node = node; this.vm = vm; this.name = name; this.update(); } Subscriber.prototype = { constructor: Subscriber, update: function(){ let vm = this.vm; let node = this.node; let name = this.name; switch(this.node.nodeType){ case 1: node.value = vm[name]; break; case 3: node.nodeValue = vm[name]; break; default: break; } } };
发布者添加到defineReact,来观察数据的变化:
function defineReact(data, key, value){ let publisher = new Publisher(); Object.defineProperty(data, key, { set: function(newValue){ console.log(`触发setter`); value = newValue; console.log(value); publisher.notify(); // 发布订阅 }, get: function(){ console.log(`触发getter`); if(Publisher.global){ //这里为什么来添加判断条件,主要是让publisher.add只执行一次,初始化虚拟dom编译的时候来执行 publisher.add(Publisher.global); // 添加订阅者 } return value; } }); }
这一步将订阅者添加到发布者容器内,对订阅者改造:
function Subscriber(node, vm, name){ Publisher.global = this; this.node = node; this.vm = vm; this.name = name; this.update(); Publisher.global = null; } Subscriber.prototype = { constructor: Subscriber, update: function(){ let vm = this.vm; let node = this.node; let name = this.name; switch(this.node.nodeType){ case 1: node.value = vm[name]; break; case 3: node.nodeValue = vm[name]; break; default: break; } } };
6、完整效果
html:
<div id="container"> {{ msg }}<br> <input class="inp-text" type="text" v-model="inpText"> <p>{{ inpText }}</p> <div class="text-box"> <p class="show-text">{{ msg }}</p> </div> </div>
javascript:
function Publisher(){ this.subs = []; } Publisher.prototype = { constructor: Publisher, add: function(sub){ this.subs.push(sub); }, notify: function(){ this.subs.forEach(function(sub){ sub.update(); }); } }; function Subscriber(node, vm, name){ Publisher.global = this; this.node = node; this.vm = vm; this.name = name; this.update(); Publisher.global = null; // 清空 } Subscriber.prototype = { constructor: Subscriber, update: function(){ let vm = this.vm; let node = this.node; let name = this.name; switch(this.node.nodeType){ case 1: node.value = vm[name]; break; case 3: node.nodeValue = vm[name]; break; default: break; } } }; function virtualDom(node, data){ let frag = document.createDocumentFragment(); let child; // 遍历dom节点 while(child = node.firstChild){ compile(child, data); frag.appendChild(child); } return frag; } function compile(node, data){ let reg = /\{\{(.*)\}\}/g; if(node.nodeType === 1){ // 标签 let attr = node.attributes; for(let i = 0, len = attr.length; i < len; i++){ // console.log(attr[i].nodeName, attr[i].nodeValue); if(attr[i].nodeName === 'v-model'){ let name = attr[i].nodeValue; // node.value = data[name]; // ------------------------添加监听事件 node.addEventListener('keyup', function(e){ data[name] = e.target.value; }, false); new Subscriber(node, data, name); } } if(node.hasChildNodes()){ node.childNodes.forEach((item) => { compile(item, data); }); } } if(node.nodeType === 3){ // 文本节点 if(reg.test(node.nodeValue)){ let name = RegExp.$1; name = name.trim(); // node.nodeValue = data[name]; new Subscriber(node, data, name); } } } function defineReact(data, key, value){ let publisher = new Publisher(); Object.defineProperty(data, key, { set: function(newValue){ console.log(`触发setter`); value = newValue; console.log(value); publisher.notify(); // 发布订阅 }, get: function(){ console.log(`触发getter`); if(Publisher.global){ publisher.add(Publisher.global); // 添加订阅者 } return value; } }); } // 将data中数据绑定到vm实例对象上 function observe(data, vm){ Object.keys(data).forEach((key) => { defineReact(vm, key, data[key]); }) } function Vue(options){ this.data = options.data; let id = options.el; observe(this.data, this); // 将每个data属相绑定到Vue的实例vm上 //------------------------ let container = document.getElementById(id); let fragment = virtualDom(container, this); // 这里通过vm对象初始化 container.appendChild(fragment); } var vm = new Vue({ el: 'container', data: { msg: 'Hello world!', inpText: 'Input text' } });
未完待续......
更多相关内容 -
vue-router相关基础知识及工作原理
2020-11-28 22:57:35我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容。 那么为什么hash的不同,为什么会影响页面的展示呢?... -
vue实现原理
2018-06-29 12:10:31转载:https://blog.csdn.net/lishanleilixin/article/details/79360244一 理解vue的核心理念使用vue会让人感到...倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js(读音 /vjuː/,类似于 vie...转载:https://blog.csdn.net/lishanleilixin/article/details/79360244
一 理解vue的核心理念
使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.
倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.
那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的.
这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好
这种开发模式,就是所谓的MV*结构,我们现在了解的MVC,MVP,MVVM都是MV*的衍生物,对比这几种框架模式,我们会总结出来一个本质的特点,那就是这些开发模式都是让视图和数据间不会发生直接联系.对比用原生JS获得dom的操作,你会发现原生dom流其实是将dom作为数据,从dom中获得Model,随后又更改dom来实现更新视图,视图和模型其实混在一起,所以代码自然混乱,不易维护.
在具有响应式系统的Vue实例中,DOM状态只是数据状态的一个映射 即 UI=VM(State) ,当等式右边State改变了,页面展示部分UI就会发生相应改变。很多人初次上手Vue时,觉得很好用,原因就是这个.不过,Vue的核心定位并不是一个框架,设计上也没有完全遵循MVVM模式,可以看到在图中只有State和View两部分, Vue的核心功能强调的是状态到界面的映射,对于代码的结构组织并不重视, 所以单纯只使用其核心功能时,它并不是一个框架,而更像一个视图模板引擎,这也是为什么Vue开发者把其命名成读音类似于view的原因。
上文提到,Vue的核心的功能,是一个视图模板引擎,但这不是说Vue就不能成为一个框架。如下图所示,这里包含了Vue的所有部件,在声明式渲染(视图模板引擎)的基础上,我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是,这些功能相互独立,你可以在核心功能的基础上任意选用其他的部件,不一定要全部整合在一起。可以看到,所说的“渐进式”,其实就是Vue的使用方式,同时也体现了Vue的设计的理念.
二 探讨vue的双向绑定原理及实现
成果图
下面介绍两个内容
1.vue双向绑定的原理
2.实现简易版vue的过程,包括声明式数据渲染及一些简单的指令
vue双向绑定原理
vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情.我们可以看一下通过控制台梳齿一个定义在vue初始化数据上的对象是什么.
var vm = new Vue({ data: { test : { a: 1 } }, created: function () { console.log(this.test); } })
打印结果:
在打印结果中我们可以看到属性a有两个方法:get和set.为什么会有这两个方法呢,这正是vue通过Object.defineProperty()进行数据劫持的.
Object.defineProperty()这个方法是做什么的呢?文档上是这样说的
简单的说,他可以控制一个对象属性的一些特有操作,比如读写权,是否可枚举,这里我们主要研究它的get和set方法,如果想清楚更多用法,可以参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
我们可以很轻松的打印出一个对象的属性数据:
var Book = { name: '人性的弱点' }; console.log(Book.name); // 人性的弱点
但是如果在执行console.log(Book.name)的同时,给书的书名增加一个书名号呢,这个时候应该怎么做,这时候我们就需要用到Object.defineProperty( )了:
//在console.log(book.name)同时,直接给书加一个书号 var Book = {}; var name = ''; Object.defineProperty(Book,'name',{ set:function(value) { name = value; console.log('你取了一个书名叫:'+value); }, get:function() { console.log('get方法被监听到'); return '<'+name+'>'; } }); Book.name = '人性的弱点'; //你取了一个书名叫:人性的弱点 console.log(Book.name); //<人性的弱点>
通过Object.defineProperty( )这个方法设置了Book对象的name属性,对其get和set方法进行重写操作,get方法在获得name属性时被调用,set方法在设置name属性时被触发.所以在执行Book.name='人性的弱点' 这个语句时调用set方法,输出你取了一个书名叫:人性的弱点.当调用console.log(Book.name)时触发get方法,输出<人性的弱点>,如果在代码中加入这句话时,会打印出什么呢?
console.log(Book)
结果如下:
与上面vue打印数据进行对比非常类似,说明vue确实是通过这种方式进行数据劫持的.那么什么是发布者-订阅者模式呢??
订阅者和发布者模式,通常用于消息队列中.一般有两种形式来实现消息队列,一是使用生产者和消费者来实现,二是使用订阅者-发布者模式来实现,其中订阅者和发布者实现消息队列的方式,就会用订阅者模式.
打个比方,所谓的订阅者,就像我们在日常生活中订阅报纸一样,在订阅报纸的时候,通常都得需要在报社或者一些中介机构进行注册,当有新版的报纸发刊的时候,邮递员就需要向订阅该报纸的人,依次发放报纸.
所谓的订阅者,就像我们在日常生活中,订阅报纸一样。我们订阅报纸的时候,通常都得需要在报社或者一些中介机构进行注册。当有新版的报纸发刊的时候,邮递员就需要向订阅该报纸的人,依次发放报纸。
所有如果用代码实现该模式,需要进行两个步骤:
1、初始化发布者、订阅者。 2、订阅者需要注册到发布者,发布者发布消息时,依次向订阅者发布消息。
订阅者注册
发布者发布消息
那么接下来我们将通过vue原理实现一个简单的mvvm双向绑定的demo
思路分析
要想实现mvvm,主要包含两个方面,视图变化更新数据,数据变化更新视图.
view变化更新data其实可以通过事件监听实现,比如input标签监听input事件,所有我们着重分析data变化更新view.
data变化更新view的重点是如何知道view什么时候变化了,只要知道什么时候view变化了,那么接下来的就好处理了.这个时候我们上文提到的Object.defineProperty( )就起作用了.通过Object.defineProperty( )对属性设置一个set函数,当属性变化时就会触发这个函数,所以我们只需要将一些更新的方法放在set函数中就可以实现data变化更新view了
实现过程
我们已经知道如何实现数据的双向绑定了, 那么首先要对数据进行劫持监听,所以我们首先要设置一个监听器Observer,用来监听所有的属性,当属性变化时,就需要通知订阅者Watcher,看是否需要更新.因为属性可能是多个,所以会有多个订阅者,故我们需要一个消息订阅器Dep来专门收集这些订阅者,并在监听器Observer和订阅者Watcher之间进行统一的管理.以为在节点元素上可能存在一些指令,所以我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化成一个订阅者Watcher,并替换模板数据并绑定相应的函数,这时候当订阅者Watcher接受到相应属性的变化,就会执行相对应的更新函数,从而更新视图.
整理上面的思路,我们需要实现三个步骤,来完成双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
流程图如下:
1.实现一个监听器Observer
数据监听器的核心方法就是Object.defineProperty( ),通过遍历循环对所有属性值进行监听,并对其进行Object.defineProperty( )处理,那么代码可以这样写:
//对所有属性都要蒋婷,递归遍历所有属性 function defineReactive(data,key,val) { observe(val); //递归遍历所有的属性 Object.defineProperty(data,key,{ enumerable:true, //当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。 configurable:true, //当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中 get:function() { return val; }, set:function(newVal) { val = newVal; console.log('属性'+key+'已经被监听,现在值为:"'+newVal.toString()+'"'); } }) } function observe(data) { if(!data || typeof data !== 'object') { return; } Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); }); } var library = { book1: { name: '' }, book2: '' }; observe(library); library.book1.name = 'vue权威指南'; // 属性name已经被监听了,现在值为:“vue权威指南” library.book2 = '没有此书籍'; // 属性book2已经被监听了,现在值为:“没有此书籍”
通过observe()方法进行遍历向下找到所有的属性,并通过defineReactive()方法进行数据劫持监听.
在上面的思路中,我们需要一个可以容纳消息订阅者的消息订阅器Dep,订阅器主要收集消息订阅者,然后在属性变化时执行相应订阅者的更新函数,那么消息订阅器Dep需要有一个容器,用来存放消息订阅者.我们将上面的监听器Observer稍微修改一下:
function defineReactive(data,key,val) { observe(val); var dep = new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { if (是否需要添加订阅者) { //Watcher初始化触发 dep.addSub(watcher); // 在这里添加一个订阅者 } return val; }, set: function(newVal) { if (val === newVal) { return; } val = newVal; console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”'); dep.notify(); // 如果数据变化,通知所有订阅者 } }); } function observe(data) { if(!data || typeof data !== 'object') { return; } Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); }); } function Dep() { this.subs = []; } //prototype 属性使您有能力向对象添加属性和方法 //prototype这个属性只有函数对象才有,具体的说就是构造函数具有.只要你声明定义了一个函数对象,这个prototype就会存在 //对象实例是没有这个属性 Dep.prototype = { addSub:function(sub) { this.subs.push(sub); }, notify:function() { this.subs.forEach(function(sub) { sub.update(); //通知每个订阅者检查更新 }) } } Dep.target = null;
在代码中,我们将订阅器Dep添加一个订阅者设计在get里面,这是为了让Watcher在初始化时触发,因此判断是否需要需要添加订阅者,至于具体实现的方法,我们在下文中深究.在set方法中,如果函数变化,就会通知所有的订阅者,订阅者们将会执行相对应的更新函数,到目前为止,一个比较完善的Observer已经成型了,下面我们要写订阅者Watcher.
2.实现订阅者Watcher
根据我们的思路,订阅者Wahcher在初始化时要将自己添加到订阅器Dep中,那么如何进行添加呢?
我们已经知道监听器Observer是在get函数中执行了添加订阅者的操作的,所以我们只需要在订阅者Watcher在初始化时触发相对应的get函数来执行添加订阅者的操作即可.那么怎么触发对应的get函数呢?我们只需要获取对应的属性值,就可以通过Object.defineProperty( )触发对应的get了.
在这里需要注意一个细节,我们只需要在订阅者初始化时才执行添加订阅者,所以我们需要一个判断,在Dep.target上缓存一下订阅者,添加成功后去除就行了,代码如下:
function Watcher(vm,exp,cb) { this.vm = vm; //指向SelfVue的作用域 this.exp = exp; //绑定属性的key值 this.cb = cb; //闭包 this.value = this.get(); } Watcher.prototype = { update:function() { this.run(); }, run:function() { var value = this.vm.data[this.exp]; var oldVal = this.value; if(value !== oldVal) { this.value = value; this.cb.call(this.vm,value,oldVal); } }, get:function() { Dep.target = this; // 缓存自己 var value = this.vm.data[this.exp]; // 强制执行监听器里的get函数 Dep.target = null; // 释放自己 return value; } }
这个时候我们需要对监听器Observer中的defineReactive()做稍微的调整:
function defineReactive(data,key,val) { observe(val); var dep = new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { if(Dep.target) { //判断是否需要添加订阅者 dep.addSub(Dep.target); } return val; }, set: function(newVal) { if (val === newVal) { return; } val = newVal; console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”'); dep.notify(); // 如果数据变化,通知所有订阅者 } }); }
到目前为止,一个简易版的Watcher已经成型了,我们只需要将订阅者Watcher和监听器Observer关联起来,就可以实现一个简单的双向绑定.因为这里还没有设计指令解析器,所以对于模板数据我们都进行写死处理,假设模板上有一个节点元素,且id为'name',并且双向绑定的绑定变量也是'name',且是通过两个大双括号包起来(暂时没有什么用处),模板代码如下:
<body> <h1 id="name">{{name}}</h1> </body>
我们需要定义一个SelfVue类,来实现observer和watcher的关联,代码如下:
//将Observer和Watcher关联起来 function SelfVue(data,el,exp) { this.data = data; observe(data); el.innerHTML = this.data[exp]; new Watcher(this,exp,function(value) { el.innerHTML = value; }); return this; }
然后在页面上new一个SelfVue,就可以实现双向绑定了:
<body> <h1 id="name"{{name}}></h1> </body> <script src="../js/observer.js"></script> <script src="../js/Watcher.js"></script> <script src="../js/SelfVue.js"></script> <script> var ele = document.querySelector('#name'); var selfVue = new SelfVue({ name:'hello world' },ele,'name'); window.setTimeout(function() { console.log('name值改变了'); selfVue.name = 'byebye world'; },2000); </script>
这时我们打开页面,显示的是'hello world',2s后变成了'byebye world',一个简单的双向绑定实现了.
对比vue,我们发现了有一个问题,我们在为属性赋值的时候形式是: ' selfVue.data.name = 'byebye world' ',而我们理想的形式是:' selfVue.name = 'byebye world' ',那么怎么实现这种形式呢,只需要在new SelfVue时做一个代理处理,让访问SelfVue的属性代理为访问selfVue.data的属性,原理还是使用Object.defineProperty( )对属性在包装一层.代码如下:
function SelfVue(data,el,exp) { var self = this; this.data = data; //Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组 Object.keys(data).forEach(function(key) { self.proxyKeys(key); //绑定代理属性 }); observe(data); el.innerHTML = this.data[exp]; // 初始化模板数据的值 new Watcher(this,exp,function(value) { el.innerHTML = value; }); return this; } SelfVue.prototype = { proxyKeys:function(key) { var self = this; Object.defineProperty(this,key,{ enumerable:false, configurable:true, get:function proxyGetter() { return self.data[key]; }, set:function proxySetter(newVal) { self.data[key] = newVal; } }); } }
这样我们就可以用理想的形式改变模板数据了.
3.实现指令解析器Compile
再上面的双向绑定demo中,我们发现整个过程都没有解析dom节点,而是固定某个节点进行替换数据,所以接下来我们要实现一个解析器Compile来解析和绑定工作,分析解析器的作用,实现步骤如下:
1.解析模板指令,并替换模板数据,初始化视图 2.将模板指令对应的节点绑定对应的更新函数,初始化相应的订阅器
为了解析模板,首先要获得dom元素,然后对含有dom元素上含有指令的节点进行处理,这个过程对dom元素的操作比较繁琐,所以我们可以先建一个fragment片段,将需要解析的dom元素存到fragment片段中在做处理:
nodeToFragment:function(el) { var fragment = document.createDocumentFragment(); //createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。 var child = el.firstChild; while(child) { // 将Dom元素移入fragment中 fragment.appendChild(child); child = el.firstChild; } return fragment; }
接下来需要遍历所有节点,对含有指令的节点进行特殊的处理,这里我们先处理最简单的情况,只对带有 '{{变量}}' 这种形式的指令进行处理,代码如下:
//遍历各个节点,对含有相关指定的节点进行特殊处理 compileElement:function(el) { var childNodes = el.childNodes; //childNodes属性返回节点的子节点集合,以 NodeList 对象。 var self = this; //slice() 方法可从已有的数组中返回选定的元素。 [].slice.call(childNodes).forEach(function(node) { var reg = /\{\{(.*)\}\}/; var text = node.textContent; //textContent 属性设置或返回指定节点的文本内容 if(self.isTextNode(node) && reg.test(text)) { //判断是否符合{{}}的指令 //exec() 方法用于检索字符串中的正则表达式的匹配。 //返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。 self.compileText(node,reg.exec(text)[1]); } if(node.childNodes && node.childNodes.length) { self.compileElement(node); //继续递归遍历子节点 } }); }, compileText:function(node,exp) { var self = this; var initText = this.vm[exp]; this.updateText(node,initText); // 将初始化的数据初始化到视图中 new Watcher(this.vm,exp,function(value) { self.updateText(node,value); }); }, updateText:function(node,value) { node.textContent = typeof value == 'undefined' ? '': value; },
获取到最外层节点后,调用compileElement函数,对所有子节点进行判断,如果节点是文本节点且匹配{{}}这种形式指令的节点就开始进行编译处理,编译处理首先需要初始化视图数据,对应上面所说的步骤1,接下去需要生成一个并绑定更新函数的订阅器,对应上面所说的步骤2。这样就完成指令的解析、初始化、编译三个过程,一个解析器Compile也就可以正常的工作了。
为了将解析器Compile与监听器Observer和订阅者Watcher关联起来,我们需要再修改一下类SelfVue函数:
function SelfVue(options) { var self = this; this.vm = this; this.data = options.data; Object.keys(this.data).forEach(function(key) { self.proxyKeys(key); //绑定代理属性 }); observe(options.data); new Compile(options.el,this.vm); return this; }
更改后,我们就不要像之前通过传入固定的元素值进行双向绑定了,可以随便命名各种变量进行双向绑定了:
<body> <div id="app"> <h1>{{title}}</h1> <h2>{{name}}</h2> <h3>{{content}}</h3> </div> </body> <script src="../js/observer2.js"></script> <script src="../js/Watcher1.js"></script> <script src="../js/compile1.js"></script> <script src="../js/index3.js"></script> <script> var selfVue = new SelfVue({ el:'#app', data:{ title:'aaa', name:'bbb', content:'ccc' } }); window.setTimeout(function() { selfVue.title = 'ddd'; selfVue.name = 'eee'; selfVue.content = 'fff' },2000); </script>
到这里,一个数据双向绑定功能已经基本完成了,接下去就是需要完善更多指令的解析编译,在哪里进行更多指令的处理呢?答案很明显,只要在上文说的compileElement函数加上对其他指令节点进行判断,然后遍历其所有属性,看是否有匹配的指令的属性,如果有的话,就对其进行解析编译。这里我们再添加一个v-model指令和事件指令的解析编译,对于这些节点我们使用函数compile进行解析处理:
compile:function(node) { var nodeAttrs = node.attributes; //attributes 属性返回指定节点的属性集合,即 NamedNodeMap。 var self = this; //Array.prototype属性表示Array构造函数的原型,并允许为所有Array对象添加新的属性和方法。 //Array.prototype本身就是一个Array Array.prototype.forEach.call(nodeAttrs,function(attr) { var attrName = attr.name; //添加事件的方法名和前缀:v-on:click="onClick" ,则attrName = 'v-on:click' id="app" attrname= 'id' if(self.isDirective(attrName)) { var exp = attr.value; //添加事件的方法名和前缀:v-on:click="onClick" ,exp = 'onClick' //substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回值为一个新的字符串 //dir = 'on:click' var dir = attrName.substring(2); if(self.isEventDirective(dir)) { //事件指令 self.compileEvent(node,self.vm,exp,dir); }else { //v-model指令 self.compileModel(node,self.vm,exp,dir); } node.removeAttribute(attrName); } }); }
上面的compile函数是挂载Compile原型上的,它首先遍历所有节点属性,然后再判断属性是否是指令属性,如果是的话再区分是哪种指令,再进行相应的处理.
最后我们再次改造一下SelfVue,是它的格式看上去更像vue:
function SelfVue(options) { var self = this; this.data = options.data; this.methods = options.methods; Object.keys(this.data).forEach(function(key) { self.proxyKeys(key); }); observe(options.data); new Compile(options.el,this); options.mounted.call(this); }
测试一下:
<body> <div id="app"> <h2>{{title}}</h2> <input v-model="name"> <h1>{{name}}</h1> <button v-on:click="clickMe">click me!</button> </div> </body> <script src="../js/observer3.js"></script> <script src="../js/Watcher1.js"></script> <script src="../js/compile2.js"></script> <script src="../js/index4.js"></script> <script> new SelfVue({ el: '#app', data: { title: 'hello world', name: 'canfoo' }, methods: { clickMe: function () { this.title = 'hello world'; } }, mounted: function () { window.setTimeout(() => { this.title = '你好'; }, 1000); } }); </script>
效果如下:
到目前为止,我们简易版的demo已经成功了,通过上面这个例子,我们可以更加深刻的理解vue的一些机制,比如双向绑定,声明式渲染等.
写在后面
因为代码量比较多,所以对于一些不重要的没有一一展示,我把代码放在我的github上了,github Clone with HTTPS:https://github.com/2686685661/SelfVue.git
-
Vue分页器实现原理详解
2021-01-19 19:12:16本文为大家讲解了Vue分页器实现原理,供大家参考,具体内容如下 网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧... -
Vue原理面试题
2021-09-29 15:27:34数据驱动视图 - Vue MVVM MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到View.一、大厂必考原理
1.组件化和MVVM
2.响应式原理
3.vdom和diff算法
4.模板编译
5.组件渲染过程
6.前端路由
1.组件化基础=>(MVVM模型)
传统组件,知识静态渲染,更新依赖于操作DOM
Vue
的核心理念是数据驱动的理念,所谓的数据驱动的理念:当数据发生变化的时候,用户界面也会发生相应的变化,开发者并不需要手动的去修改dom
.这样做给我们带来的好处就是,我们不需要在代码中去频繁的操作
dom
了,这样提高了开发的效率,同时也避免了在操作Dom
的时候出现的错误。Vue.js
的数据驱动是通过MVVM
这种框架来实现的,MVVM
框架主要包含三部分:Model
,View
,ViewMode
数据驱动视图 - Vue MVVM
MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到ViewModel层并自动将数据渲染到页面中,视图变化的时候通知viewModel层更新数据
2.Vue响应式原理的实现组件data的数据一旦改变,立马触发视图的更新。
核心API -- Object.defineProperty
Object.defineProperty有缺点(Vue3启用Proxy)
Proxy的兼容性不太好,且无法使用polyfill
Object.defineProperty基本用法
Object.defineProperty实现响应式
- 监听对象,监听数组
- 复杂对象,深度监听
Object.defineProperty的缺点
- 深度监听需要递归到底,一次性计算量大
- 无法监听新增属性、删除属性(要使用Vue.set Vue.delete)
- 无法原生监听数组,需要特殊处理
总结;
1.核心API -- Object.defineProperty
2.如何监听对象(深度监听),如何监听数组
3.缺点
// 触发更新视图 function updateView() { console.log('视图更新') } // 重新定义数组原型 const oldArrayProperty = Array.prototype // 创建新对象,原型指向 oldArrayProperty ,再扩展新的方法不会影响原型 const arrProto = Object.create(oldArrayProperty); ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => { arrProto[methodName] = function () { updateView() // 触发视图更新 oldArrayProperty[methodName].call(this, ...arguments) // Array.prototype.push.call(this, ...arguments) } }) // 重新定义属性,监听起来 function defineReactive(target, key, value) { // 深度监听 observer(value) // 核心 API Object.defineProperty(target, key, { get() { return value }, set(newValue) { if (newValue !== value) { // 深度监听 observer(newValue) // 设置新值 // 注意,value 一直在闭包中,此处设置完之后,再 get 时也是会获取最新的值 value = newValue // 触发更新视图 updateView() } } }) } // 监听对象属性 function observer(target) { if (typeof target !== 'object' || target === null) { // 不是对象或数组 return target } // 污染全局的 Array 原型 // Array.prototype.push = function () { // updateView() // ... // } if (Array.isArray(target)) { target.__proto__ = arrProto } // 重新定义各个属性(for in 也可以遍历数组) for (let key in target) { defineReactive(target, key, target[key]) } } // 准备数据 const data = { name: 'zhangsan', age: 20, info: { address: '北京' // 需要深度监听 }, nums: [10, 20, 30] } // 监听数据 observer(data) // 测试 // data.name = 'lisi' // data.age = 21 // // console.log('age', data.age) // data.x = '100' // 新增属性,监听不到 —— 所以有 Vue.set // delete data.name // 删除属性,监听不到 —— 所有已 Vue.delete // data.info.address = '上海' // 深度监听 data.nums.push(4) // 监听数组
3.虚拟DOM(vdom)和diff算法
- DOM操作非常耗费性能
- 以前用jQuery,可以自行控制DOM操作时机,手动调整
- vue和react都是数据驱动试图,如何有效控制DOM操作?
解决方案——vdom
- 有一定的复杂度,想减少计算次数比较难
- 难不能把计算,更多的转移为JS计算?因为JS执行比较快
- vdom——用JS模拟DOM结构,计算出最小的变更,操作DOM
面试题:用JS模拟DOM元素
包含三部分:标签tag,附着在标签上的属性、样式、事件props,子元素children
通过snabbdom 学习vdom
- vue3重写了vdom的代码,优化了性能
- 但vdom的理念不变,面试考点不变
h函数、vnode数据结构、patch函数
vdom总结
- 用js模拟DOM结构(vnode)
- 新旧vnode对比,得出最小的更新范围,最后更新DOM
- 数据驱动视图的模式下,有效控制DOM操作
diff算法
两个数做diff,如这里的vdom diff
vnode ->patch ->new vnode
树diff的时间复杂度O(n^3)
- 第一,遍历tree1;第二,遍历tree2
- 第三,排序
- 1000个节点,要计算1亿次,算法不可用
优化时间复杂度到O(n)
- 只比较同一层级,不跨级比较
- tag不相同,直接删掉重建,不再深度比较
- tag和key,两者都相同,则认为是相同的节点,不再深度比较
diff算法总结
- patchVnode
- addVnodes removeVnodes
- updateChildren(key的重要性)
vdom和diff总结
- 细节不重要,updateChildren更新过程也不重要,不要深究
- vnode核心概念很重要:h vnode patch diff key 等
- vnode的存在价值更重要:数据驱动试图,控制DOM操作
4.模板编译
with语法
模板编译
总结
vue中使用render代替template
总结
5.组件渲染更新过程
vue原理的三大知识点
组件渲染/更新过程
初次渲染过程
第二步是因为,执行render函数会触发getter操作
更新过程
触发setter,看是修改的data是否在getter中已经被监听,如果是,就执行render函数
patch的diff算法,会计算出最小差异,更新在DOM上
完整流程图
模板编译完,生成render函数,执行render函数生成vnode (虚拟DOM的树)
执行render函数的时候会touch getter,即执行函数的时候回触发Data里的getter
触发的时候就会收集依赖,即在模板中出发了哪个变量的getter就会把哪个给观察起来(watcher)
在修改Data的时候,看这个Data是否是之前作为依赖被观察起来的
如果是,就重新出发re-render,重新渲染,重新生成vdom tree,重新touch
异步渲染
1.$nextTick:
vue是异步渲染,$nextTick会待Dom渲染完之后调用
页面渲染时会将data的修改做整合,多次data修改只会渲染一次
2.汇总data的修改,一次性更新试图
3.减少DOM操作次数,提高性能
6.前端路由原理
网页url组成部分
hash的特点
<!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>hash test</title> </head> <body> <p>hash test</p> <button id="btn1">修改 hash</button> <script> // hash 变化,包括: // a. JS 修改 url // b. 手动修改 url 的 hash // c. 浏览器前进、后退 window.onhashchange = (event) => { console.log('old url', event.oldURL) console.log('new url', event.newURL) console.log('hash:', location.hash) } // 页面初次加载,获取 hash document.addEventListener('DOMContentLoaded', () => { console.log('hash:', location.hash) }) // JS 修改 url document.getElementById('btn1').addEventListener('click', () => { location.href = '#/user' }) </script> </body> </html>
H5 history
- 用url规范的路由,但跳转时不刷新页面
- history.pushState
- window.onpopstate
<!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>history API test</title> </head> <body> <p>history API test</p> <button id="btn1">修改 url</button> <script> // 页面初次加载,获取 path document.addEventListener('DOMContentLoaded', () => { console.log('load', location.pathname) }) // 打开一个新的路由 // 【注意】用 pushState 方式,浏览器不会刷新页面 document.getElementById('btn1').addEventListener('click', () => { const state = { name: 'page1' } console.log('切换路由到', 'page1') history.pushState(state, '', 'page1') // 重要!! }) // 监听浏览器前进、后退 window.onpopstate = (event) => { // 重要!! console.log('onpopstate', event.state, location.pathname) } // 需要 server 端配合,可参考 // https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 </script> </body> </html>
总结
两者选择
to c的要是不需要管seo、搜索引擎也不需要用H5 history 简单一点就好
-
【Vue2.0学习】—Vuex工作原理图(二十五)
2021-11-22 16:42:58【Vue2.0学习】—Vuex工作原理图(二十五) 一、 Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式...【Vue2.0学习】—Vuex工作原理图(二十五)
一、 Vuex 是什么?
概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
二、什么时候使用Vuex
(1)多个组件依赖于同一状态
(2)来自不同组件的行为需要变更同一状态
三、搭建坏境
(1) npm install vuex (2) Vue.use(Vuex) (3) store (4) vc==>store
创建文件src/store/index.js
在main.js中创建vm时传入store配置项
Vuex工作原理图
-
Vue原理简介
2019-03-27 09:16:25Vue原理简介 Vue就是基于MVVM模式实现的一套框架,在vue中: Model:指的是js中的数据,如对象,数组等等。 View:指的是页面视图 viewModel:指的是vue实例化对象 为什么说VUE是一个渐进式的javascript框架, 渐进... -
理解vue ssr原理并自己搭建简单的ssr框架
2020-10-17 14:33:53主要介绍了理解vue ssr原理并自己搭建简单的ssr框架,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
Vue插槽原理与用法详解
2020-10-17 08:16:54主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下 -
vue实现原理浅析
2019-08-10 08:29:37那么本文是以一种通俗易懂的的角度来实现一个简单 的双向数据绑定系统,如果你用过vue却对vue的实现原理不太清楚,或者没用过vue想学习vue那我相信看完本文你会的vue的实现有一个比较简单明确的了解。 -
Vue动态组件和异步组件原理详解
2020-10-17 01:47:02主要给大家介绍了关于Vue动态组件和异步组件原理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 -
面试重点-vue原理
2020-07-06 18:57:11数据驱动视图 传统组件,只是静态渲染,更新还要依赖于操作DOM 数据驱动视图-Vue MVVM 数据驱动视图-React ... 考察Vue原理的第一题 核心API-Object.defineProperty Object.defineProperty的缺点(vue3.0启用P -
Vue底层实现原理总结
2020-08-28 00:25:43小编给大家整理Vue底层实现原理的知识点总结,如果大家对此有需要,可以学习参考下,希望我们整理的内容能够帮助到你。 -
vue内置组件transition简单原理图文详解(小结)
2020-12-11 15:05:50Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以... -
vue原理图
2019-06-14 16:24:32 -
详解Vue监听数据变化原理
2020-08-31 04:30:37本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
Spring Boot和Vue跨域请求问题原理解析
2020-08-25 08:17:23主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
vue3实现v-model原理详解
2020-10-16 06:22:14主要介绍了vue3实现v-model原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
vue3原理解析
2021-02-19 16:26:20大家都知道vue2的时候是使用了Object.defineProperties方法通过set和get来进行数据的劫持,从而达到响应式数据。 在vue3中则是使用es6 proxy代理,将对象进行转化拦截,使用weakMap做弱引用缓存。当触发代理的get时... -
深入理解Vue Computed计算属性原理
2020-08-27 10:32:51Computed 计算属性是 Vue 中常用的一个功能,本篇文章主要介绍了Vue Computed 计算属性原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
Vue 3.0双向绑定原理的实现方法
2020-12-13 03:49:18proxy方法 ...可查看Vue 2.0双向绑定原理的实现 具体实现过程的代码如下: 1、定义构造函数 function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data = -
Vue CLI脚手架工作原理
2020-10-31 18:09:06使用Vue CLI创建脚手架 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript,vue等),并... -
Vue中的基础过渡动画及实现原理解析
2020-12-10 09:19:23在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的... -
详解Vue双向数据绑定原理解析
2020-08-29 11:10:56本篇文章主要介绍了详解Vue双向数据绑定原理解析 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
剖析vue实现原理自己动手实现mvvm
2019-08-10 08:54:30剖析vue实现原理,自己动手实现mvvm -
vue核心原理解析
2020-07-11 06:54:581. MVVM原理 vue的精髓在于组件化和数据驱动视图。 组件化之前就有,比如php等语言,vue使用了组件化思想。 进行了数据驱动视图的创新。之前的前端操作是静态渲染,要操作dom修改视图。 数据劫持的优势 无需显示... -
Vue简单实现原理详解
2020-11-21 08:33:05本文实例讲述了Vue实现原理。分享给大家供大家参考,具体如下: 用了Vue也有两年时间了,一直以来都是只知其然,不知其所以然,为了能更好的使用Vue不被Vue所奴役,学习一下Vue底层的基本原理。 Vue官网有一段这样的... -
vue 组件开发原理与实现方法详解
2020-10-15 22:42:35主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下