美文网首页
组件化实例化过程&&编译原理

组件化实例化过程&&编译原理

作者: key君 | 来源:发表于2019-10-16 09:24 被阅读0次

    组件化:

    组件声明、注册:

    全局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转换为渲染函数的代码字符串

    相关文章

      网友评论

          本文标题:组件化实例化过程&&编译原理

          本文链接:https://www.haomeiwen.com/subject/akoemctx.html