Vue计算属性原理
1.计算属性的初始化 computed可以为函数也可以为对象，将lazy设置为true传给构造函数Watcher创建计算属性Watcher 2.对计算属性进行属性劫持 defineComputed方法用于重新定义计算属性，主要是劫持get方法，需要根据依赖值是否发生变化来判断计算属性是否需要计算 c…
Vue监听属性原理
1.监听属性的初始化 初始化watch时对options上的watch属性进行处理，如果是数组则遍历处理调用createWatcher函数，最后调用$watch创建用户watcher 2.$watch 创建自定义watch的核心方法，把用户定义的options和user:true传给构造函数watc…
Vue模板组件原理
1.全局组件注册 initGlobalApi方法主要用来注册Vue的全局方法，类似：Vue.Mixin,Vue.extend,Vue.component 通过extend函数把传入的选项处理之后挂载到了Vue.options.components 2.Vue.extend定义 Vue.extend核…
Vue的mixin原理
1.定义全局Mixin函数 2.mergeOptions方法 主要是遍历父亲和儿子的属性，进行合并，选项有自己的合并策略直接调用。 这里的生命周期的合并策略mergeHook明显把全部生命周期各自混入成了数组的形式依次调用 3.生命周期的调用 init初始化的时候调用mergeOptions来进行选…
Vue的Diff算法原理
1.patch核心渲染方法改写 当oldNode为真实DOM即初次渲染，反之为虚拟DOM，更新过程需要使用diff算法， 算法中，判断新旧标签是否一致，同级比较，不一致则新替换旧。 如果旧节点为文本节点，直接替换标签文本内容。 如果不符合以上两种情况，直接把旧的虚拟DOM对应的真实DOM赋值给新的虚…
Vue异步更新原理
1.watcher更新的改写 在update更新方法中加入异步队列的机制 2.queueWatcher实现队列机制 同步把watcher都放队列里面去，执行完队列的事件之后再清空队列，主要使用nextTick来执行watcher队列 3.nextTick实现原理 微任务优先的方式调用异步方法执行ne…
Vue响应式更新原理
1.定义Watcher Vue使用到了观察者模式，其中可以将Watcher当做观察者，当数据变动后，通知它执行某些方法，本质是一个构造函数，初始化的时候会去执行get 2.创建渲染Watcher 组件挂载方法内注册一个updateComponent方法用于更新渲染页面，初始化时也是调用 update…
虚拟DOM渲染原理
1.组件挂载入口 通过compile转化成render之后，调用mountComponent核心方法进行组件实例的挂载。该函数与生命周期相关，位于beforeMount和mounted生命周期钩子之间。 2.核心方法mountComponent 核心方法mountComponent中主要调用vm. …
vue模板编译原理
1.模板编译入口 在初始化时，传入的options参数中有el属性，则进行模板渲染。其中主要的渲染函数为$mount()。//将模板挂载在HTML上 进行render判断，template判断，什么情况下，最终都是将模板转换为render函数进行渲染。 2.核心方法compileToFunction…
防抖与节流
防抖 含义 合并多次函数为一个 思路 将目标方法包装在setTimeout里面，然后该方法是一个事件的回调函数，如果一直执行该回调，则通过clearTimeout将连续动作给删除，待不触发该事件时，setTimeout就会执行这个方法 使用场景 页面resize需要做页面适配，需要根据页面最终情况做…