3.3 vm.$nextTick nextTick接收一个回调函数作为参数，作用是将回调延迟至下次DOM更新之后执行，它与全局方法Vue.nextTick相同，不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持promise的环境中，则会返回一个promise。需要用到nextTick的开发场景：当更新了状态后，需要对新DOM做一些操作，但是这时其实获取不到更新后的DOM，因为还没有重新渲染，所以这时需要使用nextTick方法。当状态发生变化时，会通知watcher，然后触发虚拟DOM的渲染流程，但是触发渲染这个操作不是同步的，而是异步进行的。Vue.js中有一个队列，...

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' function Vue(options){ if(process.env.NODE_EN...

代码生成器是模板编译地最后一步，它的作用是将AST转换成渲染函数中的内容，这个内容叫做代码字符串。代码字符串可以被包装在函数中执行，这个函数就是通常所说的渲染函数。虚拟DOM中的_c,_v,_e,_s函数_c是createElement的别名。createElement是虚拟DOM中所提供的方法，它的作用是创建虚拟节点，有三个参数，分别是标签名，一个包含模板相关属性的数据对象，子节点列表。渲染函数其实是执行了createElement，从而生成了vnode。_v是createTextVNode，创建文本节点。_e是createEmptyVNode，创建注释节点。_s是toString。 总结 ...

优化器的是在AST中找出静态子树并打上标记。静态子树指的是那些在AST中永远不会发生变化的节点。纯文本节点就是静态子树，而带变量的文本节点就不是静态子树，它会随着变量的变化而变化。标记静态子树有两个好处：1.在每次重新渲染时，不需要为静态子树创建新节点（使用克隆节点）2.在虚拟DOM中打补丁（patching）的过程可以跳过。直接跳过后续的各种对比就可以节省js的运算成本。优化器内部实现主要分为两个步骤：1.在AST中找出所有静态节点并打上标记2.在AST中找出所有静态根节点并打上标记，静态根节点就是一个节点如果下面的所有子节点都是静态节点，并且它的父级是动态节点，那么它就是静态根节点。落实到...

解析器的作用 解析器要实现的功能就是将模板解析成AST。AST类似vnode只是用JavaScript中的对象来描述一个节点。 解析器内部的运行原理 解析器中最主要的就是HTML解析器，它在解析HTML过程中会不断触发各种钩子函数。 parseHTML(template,{ start(tag,attrs,unary){ //三个参数分别是标签名，标签属性，是否是自闭合标签 //每当解析到标签的开始位置触发的钩子函数 }, end(){ //每当解析到标签的结束位置触发的钩子函数 }, chars(text...

开篇 模板编译再整个渲染过程中的位置。 1.模板→2.模板编译→3.渲染函数→4.vnode→5.用户界面1-3属于模板编译 3-5属于虚拟DOMVue.js提供了模板语法，允许我们声明式地描述状态和DOM之间的绑定关系，然后通过模板来生成真实DOM并将其呈现在用户界面上。在底层是线上，Vue.js将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时，Vue.js可以结合响应式系统，聪明地找出最小数量的组件进行重新渲染以及最少量地进行DOM操作。 将模板编译成渲染函数 将模板编译成渲染函数可以分为两个步骤：1.先将模板解析成AST（Abstract Syntax Tree,抽象语法树）。...

patching算法 虚拟DOM最核心的部分就是patch，它可以将vnode渲染成真实的DOM。patch也可以叫做patching算法，通过它渲染真实DOM时，并不是暴力覆盖原有DOM，而是比对新旧两个vnode之间有什么不同，然后根据比对结果找出实际需要更新的节点进行更新，其实际作用就是在现有DOM上进行修改来实现更新视图的目的。之所以要这么做，是因为DOM操作的执行速度远不如JavaScript的运算速度快，因此将大量的DOM操作搬运到js中，使用patching算法来计算出真正需要更新的节点，可以极大程度上减少DOM操作，从而提升性能。实际上是使用JavaScript的运算成本来替换...

什么是VNode 在Vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素，例元素节点，文本节点或者是注释节点。VNode类的代码： export default class VNode{ constructor(tag...){ this.tag = tag this.data = data this.children = children this.text = text ...... } }vnode事实上只...

开篇 Vue.js2.0引入了虚拟DOM，比Vue.js1.0的初始渲染速度提升了2~4倍，并大大降低了内存消耗。 什么是虚拟DOM？ 在Web早期，页面的交互效果简单的多，没有复杂的状态需要管理，使用JQuery来操作DOM完全满足需求，而现在随着时代的发展，页面上的功能越来越多，当DOM操作越来越频繁的时候，使用之前的方法来开发旧变得非常混乱，这其实就是命令式操作DOM存在的问题。现在，前端三大主流框架Angular、Vue、React都是声明式操作DOM，我们只需要描述状态和DOM之间的映射关系，就可以将状态渲染成视图，状态到视图的过程，框架会帮我们完成，不需要手动去操作DOM结构。通常...

几个与变化侦测相关的常用API的内容原理 vm.$watch vm.$watch(expOrFn,callback,[options])【参数】：1.{string|Function} expOrFn2.{Function|Object} callback3.{Object} [options] =>{boolean} deep =>{boolean} immediate【返回值】：{Function} unwatch【用法】：用于观察一个表达式或computed函数在Vue.js实例上的变化。回调函数调用时，会从参数得到新数据（new value）和旧数据（old value）。...

var arr = [49, 38, 65, 97, 76, 13, 27, 48, 55, 4]; function MergeSort(arr) { var len = arr.length; if(len<=1){ return arr; } var middle = Math.floor(len/2); var left = arr.slice(0,middle); var right = arr.slice(middle) ...

var arr = [49,38,27,97,76,13,65,50]; function MaxHeap(arr,size,i){ //左子节点 var left = i*2+1; //右子节点 var right = i*2+2; //假设这个根节点为最大 var max = i //如果左子树的节点大于根节点则将max赋值 if(left<size && arr[left]>arr[max]){ max...

//选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置， //然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。 //超级稳定的算法 时间复杂度永远是O（n的平方） //空间复杂度为O（1） var arr = [49, 38, 65, 97, 76, 13, 27, 48, 55, 4]; function SelectSort(arr) { for(var i=0;i<arr...

//时间复杂度分析： //最好的情况：整个数组被分为两个长度相等的子数组时， 时间复杂度为 O（nlogn） //最坏的情况：待排序的序列为正序或者逆序，每次划分只得到一个比上一次划分少一个记录的子序列 （退化成冒泡排序的情况）时间复杂度为O（n的平方） //平均时间复杂度为：O（nlogn）有可能改变相等元素的原始位置，所以快速排序是一种不稳定的排序。 //空间复杂度分析： //首先就地快速排序使用的空间是O(1)的，也就是个常数级；而真正消耗空间的就是递归调用了，因为每次递归就要保持一些数据； //最优的情况下空间复杂度为：O(logn)；每一次都平分数组的情况 //最差的情况下空间...