![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 79
初学Vue
Cherish_喜爱
前端菜虫
展开
-
Vue源码解析--AST抽象语法树
一、概念介绍:在开发Vue的时候编译器会将模板语法编译成正常的HTML语法,而直接编译的时候是非常困难的,因此此时会借助AST抽象语法树进行周转,进而变为正常的HTML语法,使编译工作变得更加简单。抽象语法树的本质上是一个JS对象,Vue在审视所有HTML结构时是以字符串的新式进行的,最终将其解析为JS对象。AST抽象语法树服务于模板编译,将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法,自己作为中转站。二、抽象语法树与虚拟DOM节点的关系:图示:抽..原创 2021-02-09 17:16:02 · 3460 阅读 · 0 评论 -
Vue源码解析系列课程--Vue数据响应式原理笔记(对象、数组)
一、defineReactive函数:函数功能:创建闭包环境,完善Object.defineProperty(){}里面的getter()和setter()方法。不用闭包的情况(需要我们创建临时变量进行新旧值的周转):var obj = {};var temp;Object.defineProperty(obj,'a',{ //getter get(){ console.log("试图访问obj的"+a+"属性"); return temp原创 2021-02-07 15:56:11 · 453 阅读 · 1 评论 -
diff算法的深入学习--由浅入深循序渐进(一篇文章搞定)
一、感受diff算法的心得:1. 最小量更新:在最小量更新中key很重要,key是这个节点的唯一标识。告诉diff算法在更改前后它们是同一个DOM节点。2. 虚拟节点:只有是同一个虚拟节点,才能进行精细比较,否则就是暴力删除旧的,插入新的。3. 如何定义同一个虚拟节点?:选择器相同且key相同。4. 同层比较:diff算法只进行同层比较,不会进行跨层比较。即使是同一层虚拟节点但是跨层了,那么就不会进行精细算法比较,而是暴力删除旧的,然后插入新的。二、深入diff核心思路:原创 2021-02-04 10:13:05 · 1267 阅读 · 0 评论 -
Vue源码系列解析课程--虚拟DOM和diff算法(手写h函数)
一、介绍:h函数是用来产生虚拟节点。比如这样调用h函数:h('a',{propr:{href:'https://www.baidu.com/'}},'百度');将得到这样的虚拟节点:{"sel":"a","data":{props:{href:"https://www.baidu.com"}},"text":"百度"};它表示的真正的DOM节点是:<a href="https://www.baidu.com/">百度</a>注:从虚拟DOM如何变原创 2021-02-01 11:01:12 · 336 阅读 · 0 评论 -
简单介绍虚拟DOM和diff算法
一、diff算法简介:上面代码的改变有很多种方式,第一种:我们可以将左边box这个div全都删掉然后替换成右边这个div(但这种方式感觉太大费周章),第二种方法:是我们可以保持原有的内容不发生变化只添加新增的内容。像第二种这样进行精细化对比实现最小量更新我们称为diff算法。二、虚拟DOM :用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。diff算法是在两个虚拟DOM之间计算的,新虚拟DOM和老虚拟DOM进行diff(精细化比较.原创 2021-01-30 17:10:15 · 755 阅读 · 0 评论 -
Vue源码探索--mustache模板引擎(把模板字符串编译为虚拟DOM并渲染出真实DOM)下篇
注:在上篇中我们实现了将模板字符串转换为tokens数组,那么这一篇我们来聊聊将tokens数组结合数据并转换为真是DOM渲染出来的过程。一、图示:这一篇我们将来实现红框里面的过程。二、代码演示:1. index.js(入口文件):import parseTemplateToTokens from './parseTemplateToTokens.js'import renderTemplate from './renderTemplate.js';import lookup.原创 2021-01-30 11:51:19 · 258 阅读 · 0 评论 -
Vue源码探索--mustache模板引擎(把模板字符串编译为虚拟DOM并渲染出真实DOM)上篇
注:上一基础篇我们了解到什么是模板引擎以及如何使用,这一篇我们通过尝试写一些底层源码来深入理解其工作流程(把模板字符串编译为虚拟DOM并渲染出真实DOM)。一、正则实现简单模板数据填充:最简单模板引擎实现机理,利用的是正则表达式中的replace()方法:<div id="container"></div></body><script src="../js/mustache.js"></script><script&g原创 2021-01-27 14:55:00 · 564 阅读 · 2 评论 -
Vue源码探索--mustache模板引擎(基本使用)
一、什么是模板引擎?模板引擎是将数据变为视图最优雅的解决方案。二、将数据变为视图的方法:1、纯DOM法通过原生JS分别创建(document.createElement(" "))不同的标签把子元素的标签添加(appendChild())到父元素的内容上。 <ul id="list"> </ul> <script> var arr = [ { "name": "小明",...原创 2021-01-25 11:45:11 · 685 阅读 · 0 评论 -
Vue深入响应式的原理
核心点是:Object.defineProperty一、如何追踪变化:1. 把普通的JS对象传入Vue实例作为对data选项,Vue将遍历此对象所有的Property。并使用Object.defineProperty把这些property全部转为getter/setter。2. getter/setter在内部让Vue能够追踪依赖,在property被访问和修改时通知更变。3. 每个组建实例都对应一个watcher实例,在组建渲染过程中把“接触”过的数据property记为依赖。当依赖的se原创 2021-01-19 16:02:20 · 184 阅读 · 0 评论 -
Vue——MVVM理解
一、MVVM的组成:由Model、View、ViewModel三者组成。Model:代表数据模型 、数据对象(data),数据和业务逻辑都在Model层中定义。View:代表UI视图、模板页面,负责数据的展示。ViewModel:视图模型,View和Model的关系映射。数据库结构往往是不能直接跟界面控件一一相对应的,需要再定义一个数据对象专门对应View上的视图控件。ViewModel的职责就是把Model对象封装成可以显示和接受输入的界面数据对象。在MVVM架构下,View和Mode原创 2021-01-18 16:42:52 · 145 阅读 · 0 评论 -
Vuex核心属性总结
Vuex是Vue的一个插件。一、概念:Vuex是对Vue应用中多个组件的共享状态进行集中式的管理(读/写),Vue的应用是一个状态自管理的应用。二、Vuex的安装:NPM:npm install vuex --saveYarn:yarn add vuex三、学习:每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,包含着你的应用中大部分的状态(state)。Vuex的结构图:Vuex包含五个核心概念:分别是 State、 Mutations、Acti原创 2020-11-27 20:29:57 · 143 阅读 · 0 评论 -
Vue源码解析涉及知识--Object.defineProprty
一、 Object.defineProprty概念: Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。二、 语法:Object.definePrototype(obj,prop,descriptor)obj:要定义属性的对象。prop:要定义或修改的属性的名称。descriptor:要定义或修改的属性描述符。返回值:被传递给函数的对象。...原创 2020-11-16 13:11:15 · 1638 阅读 · 0 评论 -
Vue源码解析--模板解析(表达式文本节点)
一、模板解析的基本流程:(1)将el的所有子节点取出,添加到一个新建的文档fragment对象中。(2)对fragment中所有层次子节点递归进行编译解析处理。对大括号表达式文本节点进行解析。对元素节点的指令属性进行解析。事件指令解析。一般指令解析。二、大括号表达式文本节点解析流程:1.HTML中的代码:<div id="test"> <p>{{name}}</p></div>2.引入的JavaScript文件:&原创 2020-11-15 11:00:32 · 526 阅读 · 0 评论 -
Vue与React的区别
一、基本介绍: Vue是用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用,Vue的核心只关注图层。二、优点:注:这里只是列举了一小部分的优点。体积小——压缩后33k。更高的运行效率——基于虚拟DOM(一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,这个DOM操作属于预处理操作并没有真正的操作DOM,虚拟DOM的构建与更新都是在内存中完成的,并不会渲染到真正的DOM中去)。双向数据绑定。三、React与Vue的差别:相似之处:原创 2020-11-14 11:44:08 · 199 阅读 · 0 评论