vue核心原理快速记忆

233 阅读1分钟

一、响应式原理:

get收集,set更新。

二、子组件原理:

在render阶段生成组件构造函数VueComponent和组件vnode,在update阶段进行子组件初始化,将template生成真实节点elm,将elm赋值给组件vnode的elm属性

三、nextTick原理:

将要更新的watcher和手写的callback收集到一个数组中,在定时器中遍历数组元素,执行watcher.run和callback函数。

四、对象新加属性响应:

给对象属性赋值,并且手动更新dep.notify()

五、数组变异方法响应式:

先执行数组方法,再手动更新dep.notify()

六、key的作用:

快速找下标

七、父子组件通信原理:

  • 父传子:父组件将data传递给组件vnode,组件vnode见data传递给组件实例,组件实例通过代理就可以直接使用this访问data了
  • 子传父:将函数名和函数值做成一个map,子组件调用$emit,其实根据传入的参数执行响应的函数,在函数中修改父组件的data

八、编译原理:

将源码编译成AST,将AST转换成with函数

九、vue-router原理:

hash路由原理:监听hashchange事件获得hash值,来改变视图 history路由:通过pushState和replaceState设置历史记录并根据url来改变视图,当触发popsState获得最新url,来改变视图。

十、vuex原理与计算属性原理:

将state赋值给内部vue实例的date,在state的get函数中收集计算属性Watcher和渲染Watcher,在state的set函数中更新。