关于一些Vue的文章。(5)
来源:互联网 发布:linux推荐书籍 编辑:程序博客网 时间:2024/05/22 16:38
原文链接我的blog,欢迎STAR。https://juejin.im/post/58e0900961ff4b00616ae382
前三篇里,我们开始从render, template, el
的渲染DOM树的优先级,最终都编译成render
函数,而后得到vnode
(虚拟DOM),经过diff算法后,得到真实DOM。
那么问题来了?得到真实DOM以后接下来该做什么?以及怎么做?
照例,分享一篇文章,vue。(官网,暂时还没有找到一篇文章能比较好的解决上述几个问题,so,我们带着问题出发,直接上官网,然后上源码。)
我们先解决第一个问题,得到真实DOM以后,接下来该做什么?
相信各位同学对原生的创建元素节点对象,一定不陌生:
const odiv = document.createElement('div')
, 此时虽然已经新创建一个元素节点,但它还不是任何一颗DOM节点树的组成部分,它只是游荡在JavaScript世界里的一个孤儿。这种情况称文档碎片(document fragment),不过它已经有了DOM属性。接下来,我们需要把新创建的元素节点插入DOM节点树,parent.appendChild(odiv)
。
由此,我们猜想,是不是也要像上述中parent.appendChild(odiv)
一样,插入到DOM节点树上?
官网里,有一个重要的信息:
beforeMount hook是的,在Vue里,也需要插入到DOM节点树上,并且有一个名字挂载。
于是,第一个问题解决,真实DOM之后,挂载到DOM节点树上。
现在来解决第二个问题,该怎么挂载到DOM节点树上?
存在两种种方式(一般是在main.js文件中可以看到):
第一种不存在el选项。
不存在el选项,需要使用vm.$mount(),手动地挂载一个未挂载的实例第二种存在el选项。
存在el选项时
这有两个值得注意的地方:
细心的同学,应该已经发现上面两种方法并不只是是否存在el选项的差别,在第一个方法里,使用的是
render: h => h(App)
, 而第二种使用的是...App
。关于第一种写法
render: h => h(App)
,h
实际是createElement的别名,也是一个通用惯例。至于=>
这个是es6里面的箭头函数写法,所以换一种写法也就是(不涉及this):render: function (createElement) { return createElement(App) }
App组件最终也会编译成render函数,从而有vnode。
贴一张官网的图:
createElement参数
或者使用jsx时这样更容易:
jsx语法第二种写法
...App
,这个其实也比较容易理解,...
是es6扩展运算符,关于扩展运算符不做深入,具体的学习,可以参照阮老师写的教程。在这里...App
的意思是:取出App
实例对象的所有可枚举属性,混入全局配置。或许你还有点疑问,这里既没有
打印出一个新对象,对象的属性包含App对象中可枚举的属性render
又没有template
,如果用挂载DOM元素的HTML用作模板,那必须使用独立构建的Vue库。怎么编译的?别急,我们来看App实例对象里有些什么可枚举属性:
得到结果
其中有个render
方法,于是render
混入到了new Vue({})
的配置中。
另一个值得注意的地方是:
也就是说,如果el选项
在实例化时,没有作用,且没有显示调用vm.$mount()
手动开启编译时,是不会编译成render
函数的,从而不会存在vnode
。
编译成render
函数,有真实DOM以后,插入通过el
选项,或者显示调用vm.$mount()
手动设置一个挂载点,挂载到DOM上。
第二个问题解决。
下一篇,我们深入源码,看看这个el
与vm.$mount()
在搞什么事。
完。
- 关于一些Vue的文章。(5)
- 关于一些Vue的文章。(5)
- 关于一些Vue的文章。(5)
- 关于一些Vue的文章。(1)
- 关于一些Vue的文章。(2)
- 关于一些Vue的文章。(3)
- 关于一些Vue的文章。(6)
- 关于一些Vue的文章。(7)
- 一些关于vue的心得
- 关于vue的一些总结
- 一些关于数据库的文章
- 一些关于VC的文章
- 关于CoreDump的一些文章
- 一些关于Launcher的文章
- 关于C++的一些文章
- 关于QT的一些文章
- 关于mockito的一些文章
- 关于autohotkey的一些文章
- makefile编写
- php,java实现观察者模式
- Android截屏,无需权限。
- CSDN学霸课表——MongoDB深度学习
- nandflash驱动之添加MTD设备与测试
- 关于一些Vue的文章。(5)
- Git:代码冲突常见解决方法
- 汐月教育之理解TensorFlow(五)调试工具
- 1.11OpenCV 离线文档下载地址
- Android屏幕适配备忘录
- AD的PCB界面下如何全部显示或隐藏元件数值
- 使用vue开发项目遇到的一些问题
- 每天定时备份数据库,并删除30天之前的备份文件
- IOS 系统日历开发实战