• .net工程师学习vue的心路历程(二)


    本章主要搞懂在通过vue init webpack projectname 命令创建 vue 项目过程中有个选择。即关于如何选择:runtime+compiler和runtime+only。

    现在我通过命令分别创建了这两个不同的项目,那么他们的主要区别点就是在main.js文件里面

    通过compiler创建的:

    通过compiler创建的vue实例下是有一个App组件和一个template,那么这个时候之前说过templat会替换掉index.html中div app挂载的标签元素。

    那么它从创建到运行的这样一个过程实际上是经历了几个最要步骤,什么步骤呢?  

    实际上它这一整个创建的vue实例中包括组件和template对象保存到vue底层的一个option里面,保存后就会解析成一个抽象语法树(abstract  syntax tree)然后通过编译render进行渲染我们这些template,此时它应该渲染到的是一个虚拟DOM(实际上是虚拟DOM树也是虚拟DOM节点),最后通过虚拟DOM树渲染成我们一个真实的DOM,也就是浏览器中最终形成的元素标签。

    整个过程实际上是这样的:

    vm.option.template-->(抽象语法树)ast-->render:function()-->虚拟DOM(virtual dom)-->真实DOM

    通过only创建的:

    对于这两个的区别,这里我可能口水话阐述比较多,见谅!

    这里主要就是only下的render的区别。

    我们都知道render是渲染的意思,这里的箭头函数相当于:

    render:function(h)
    {
         return h(App)  
    }
    

    那么这里的render实际上就等于通过compiler创建的时候vue运行过程中的第三步。也就是通过only创建的时候整个vue运行过程不需要走第一步template的保存以及第二步抽象语法树(ast)。那么显而易见,通过only创建的速度运行效率是比compiler要好的,而且创建出来的内存我没记错的话是少6kb的(实际上少的6kb就是没了前两步),所以打包起来也是比compiler创建的时候要小的。所以我们在区分这两个的时候一般是选择第二种only方式进行创建的。

    还有一个就是这个render函数。我把h改成了createElement意思就是创建一个元素,实际上创建的元素就是我们最基础的html标签,字不过通过回调将整个app组件对象传了过去,实际上渲染的还是App组件里面的html标签,它在这里面已经给我们完成了这件事情,所以是不需要再去通过template以及抽象语法树去渲染到UI界面!(这里只需要知道它是这么创建的就行了)

    由于这个比较重要,所以我单独抽出来作为一篇文章来记录。。。

  • 相关阅读:
    xcode debug
    ios 使用Quartz 2D画虚线
    ios UIGestureRecognizer
    ios 实现带矩形框的屏幕截图
    ios UISegemetedControl
    centos最小安装之后无法使用ifconfig
    无线LoRa智能远传水表
    智能水表188协议汇总
    无线LoRa远传智能水表
    静电除尘器除尘原理
  • 原文地址:https://www.cnblogs.com/hcyesdo/p/15576980.html
Copyright © 2020-2023  润新知