深入浅出Vue.js
文章平均质量分 73
vue源码
IamSmaLLR.
这个作者很懒,什么都没留下…
展开
-
深入浅出Vue.js:第14章 常见Vue问题最佳实践总结
1.为列表渲染设置属性keykey这个特殊属性主要用于Vue.js的虚拟DOM算法中,在对比新旧虚拟节点时辨识虚拟节点。在更新子节点时,需要从旧虚拟节点列表中查找与新虚拟节点相同的节点进行更新。如果这个查找过程设置了key,那么查找速度会快很多,所以尽可能在使用v-for的时候提供key属性,可以获取性能上的提升。2.在v-if/v-if-else/v-else 中使用key如果一组v-if+v-else的元素类型相同,最好使用属性key3.路由切换组件不变当页面切换到同一个路由但不同参数的地址原创 2021-01-08 18:23:23 · 197 阅读 · 0 评论 -
深入浅出Vue.js:第13章 (第⑤篇 生命周期)生命周期
1.生命周期图示1.1 初始化阶段**从new Vue()到created之间的阶段叫作初始化阶段。**这个阶段主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。1.2 模板编译阶段**在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。**这个阶段的主要目的是将模板编译为渲染函数,只存在于完整版中。运行时版本已经预编译成渲染函数,所以不存在这个阶段。原创 2021-01-08 18:22:35 · 130 阅读 · 0 评论 -
深入浅出Vue.js:第12章 (第④篇 整体流程)实例方法与全局API的实现原理(下)
4. 全局API的实现原理4.1 Vue.extendVue.extend( options )【参数】{Object} options【用法】使用基础Vue构造器创建一个“子类”,其参数是一个包含“组件选项”的对象。data选项是特例,在Vue.extend()中,它必须是一个函数。<div id="mount-point"></div>//创建构造器var Profile = Vue.extend({ template:'<p>{{first原创 2021-01-08 18:20:58 · 150 阅读 · 0 评论 -
深入浅出Vue.js:第12章 (第④篇 整体流程)实例方法与全局API的实现原理(中)
3.3 vm.$nextTicknextTick接收一个回调函数作为参数,作用是将回调延迟至下次DOM更新之后执行,它与全局方法Vue.nextTick相同,不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持promise的环境中,则会返回一个promise。需要用到nextTick的开发场景:当更新了状态后,需要对新DOM做一些操作,但是这时其实获取不到更新后的DOM,因为还没有重新渲染,所以这时需要使用nextTick方法。当状态发生变化时,会通知watcher,然后触发虚拟原创 2021-01-08 18:20:08 · 126 阅读 · 0 评论 -
深入浅出Vue.js:第12章 (第④篇 整体流程)实例方法与全局API的实现原理(上)
Vue.js内部,有这样一段代码:import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'funct原创 2021-01-08 18:19:18 · 123 阅读 · 0 评论 -
深入浅出Vue.js:第11章 (第③篇 模板编译原理)代码生成器
代码生成器是模板编译地最后一步,它的作用是将AST转换成渲染函数中的内容,这个内容叫做代码字符串。代码字符串可以被包装在函数中执行,这个函数就是通常所说的渲染函数。虚拟DOM中的_c,_v,_e,_s函数_c是createElement的别名。createElement是虚拟DOM中所提供的方法,它的作用是创建虚拟节点,有三个参数,分别是标签名,一个包含模板相关属性的数据对象,子节点列表。渲染函数其实是执行了createElement,从而生成了vnode。_v是createTextVNode,创建文原创 2021-01-08 18:18:10 · 135 阅读 · 0 评论 -
深入浅出Vue.js:第10章 (第③篇 模板编译原理)优化器
优化器的是在AST中找出静态子树并打上标记。静态子树指的是那些在AST中永远不会发生变化的节点。纯文本节点就是静态子树,而带变量的文本节点就不是静态子树,它会随着变量的变化而变化。标记静态子树有两个好处:1.在每次重新渲染时,不需要为静态子树创建新节点(使用克隆节点)2.在虚拟DOM中打补丁(patching)的过程可以跳过。直接跳过后续的各种对比就可以节省js的运算成本。优化器内部实现主要分为两个步骤:1.在AST中找出所有静态节点并打上标记2.在AST中找出所有静态根节点并打上标记,静态根节原创 2021-01-07 12:24:10 · 107 阅读 · 0 评论 -
深入浅出Vue.js:第9章 (第③篇 模板编译原理)解析器
解析器的作用解析器要实现的功能就是将模板解析成AST。AST类似vnode只是用JavaScript中的对象来描述一个节点。解析器内部的运行原理解析器中最主要的就是HTML解析器,它在解析HTML过程中会不断触发各种钩子函数。parseHTML(template,{ start(tag,attrs,unary){ //三个参数分别是标签名,标签属性,是否是自闭合标签 //每当解析到标签的开始位置触发的钩子函数 }, end(){原创 2021-01-07 12:23:30 · 167 阅读 · 1 评论 -
深入浅出Vue.js:第8章 (第③篇 模板编译原理)模板编译
开篇模板编译再整个渲染过程中的位置。1.模板→2.模板编译→3.渲染函数→4.vnode→5.用户界面1-3属于模板编译 3-5属于虚拟DOMVue.js提供了模板语法,允许我们声明式地描述状态和DOM之间的绑定关系,然后通过模板来生成真实DOM并将其呈现在用户界面上。在底层是线上,Vue.js将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时,Vue.js可以结合响应式系统,聪明地找出最小数量的组件进行重新渲染以及最少量地进行DOM操作。将模板编译成渲染函数将模板编译成渲染函数可以分原创 2021-01-07 12:22:01 · 157 阅读 · 0 评论 -
深入浅出Vue.js:第7章 (第②篇 虚拟DOM)diff中的patch
patching算法虚拟DOM最核心的部分就是patch,它可以将vnode渲染成真实的DOM。patch也可以叫做patching算法,通过它渲染真实DOM时,并不是暴力覆盖原有DOM,而是比对新旧两个vnode之间有什么不同,然后根据比对结果找出实际需要更新的节点进行更新,其实际作用就是在现有DOM上进行修改来实现更新视图的目的。之所以要这么做,是因为DOM操作的执行速度远不如JavaScript的运算速度快,因此将大量的DOM操作搬运到js中,使用patching算法来计算出真正需要更新的节点,原创 2021-01-07 12:21:07 · 257 阅读 · 0 评论 -
深入浅出Vue.js:第6章 (第②篇 虚拟DOM)VNode
什么是VNode在Vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素,例元素节点,文本节点或者是注释节点。VNode类的代码:export default class VNode{ constructor(tag...){ this.tag = tag this.data = data this.children = children thi原创 2021-01-07 12:19:43 · 225 阅读 · 0 评论 -
深入浅出Vue.js:第5章 (第②篇 虚拟DOM)虚拟DOM介绍
开篇Vue.js2.0引入了虚拟DOM,比Vue.js1.0的初始渲染速度提升了2~4倍,并大大降低了内存消耗。什么是虚拟DOM?在Web早期,页面的交互效果简单的多,没有复杂的状态需要管理,使用JQuery来操作DOM完全满足需求,而现在随着时代的发展,页面上的功能越来越多,当DOM操作越来越频繁的时候,使用之前的方法来开发旧变得非常混乱,这其实就是命令式操作DOM存在的问题。现在,前端三大主流框架Angular、Vue、React都是声明式操作DOM,我们只需要描述状态和DOM之间的映射关系,就原创 2021-01-07 12:18:37 · 249 阅读 · 0 评论 -
深入浅出Vue.js:第4章 (第①篇 变化侦测)变化侦测相关的API实现原理
#几个与变化侦测相关的常用API的内容原理vm.$watchvm.$watch(expOrFn,callback,[options])【参数】:1.{string|Function} expOrFn2.{Function|Object} callback3.{Object} [options] =>{boolean} deep =>{boolean} immediate【返回值】:{Function} unwatch【用法】:用于观察一个表达式或computed函数在Vue.js原创 2021-01-07 12:17:56 · 139 阅读 · 0 评论 -
深入浅出Vue.js:第3章 (第①篇 变化侦测)Array的变化侦测
Array的变化侦测Array的变化侦测与Object的有所不同,前面Object侦测方式是通过getter/setter的方式实现的,但如果使用数组方法例如“push”等来改变数组,并不会触发getter/setter,因为可以使用数组上的原型方法来改变数组的内容,所以Object的getter/setter实现方式就行不通。如何追踪变化我们可以用自定义的方法去覆盖原生的原型方法,用一个拦截器覆盖Array.prototype,之后每次使用Array原型上的方法的时候,其实使用的是拦截器中提供的方法原创 2021-01-07 12:15:19 · 266 阅读 · 1 评论 -
深入浅出Vue.js:第2章 (第①篇 变化侦测)Object的变化侦测
开篇介绍Vue.js最独特的特性之一就是看起来并不显眼的响应式系统,数据模型仅仅是一个普通的js对象。从状态生成DOM,在输出到用户显示的界面的一系列流程叫做渲染,应用在运行过程中会不断的进行重新渲染,响应式系统赋予了框架重新渲染的能力,其中重要组成部分就是变化侦测,变化侦测是响应式系统的核心,简单来说,变化侦测的作用就是侦测数据的变化。当数据变化时,会通知视图进行相对应的更新变化。object的变化侦测什么是变化侦测?通常,在运行时应用内部的状态会不断进行变化,需要重新不停的进行渲染,如何确定是否原创 2021-01-07 12:14:21 · 197 阅读 · 0 评论 -
深入浅出Vue.js:第1章(渐进式框架)Vue.js简介
Vue.js是一款渐进式的JavaScript框架(The Progressive Framework),所谓渐进式框架,就是把框架进行了分层,最核心的部分是视图层渲染(view),然后往外是组件机制(component),在这个基础上再加入路由机制(router),再加入状态管理(vuex),最外层是构建工具(vue-cli),所谓封层,我们既可以只使用最核心的视图层渲染功能来快速开发一些需求,也可以使用整套全家桶来开发大型应用....原创 2021-01-07 12:12:59 · 618 阅读 · 1 评论