组件化实例化过程&&编译原理
2019-10-16 本文已影响0人
key君
组件化:
组件声明、注册:
全局api:initAssetRegister(Vue) 声明三个方法component、fileter、directive 挂在根组件options选项里 并初始化空对象
生成组件的构造函数:
通过Vue.extend(opts) 传入配置对象 继承Vue的构造函数扩展出组件的构造函数VueComponent
注册组件:挂在Vue.options.components
(所有VueComponent都是继承于Vue构造函数,所有组件都会有options选项,全局声明组件在所有组件能用)
组件实例化及挂载
第一步是new Vue根组件创建,然后执行根组件_render()函数 得到整棵树的VNode,里面有个installComponentHooks安装子组件的钩子函数
第二步
render结束 根组件update()->patch()->createElm()
调用子组件的 初始化函数
编译原理:
解析parse:模板字符串转AST(抽象语法树),解析DOM结构及其中表达式、指令
优化optimize:标记不发生变化的节点为静态节点和静态根节点,将来可以跳过它们的patch过程起到优化作用
生成generate:将AST转换为渲染函数的代码字符串