vue的.vue文件是怎么run起来的(vue-loader)
发布在前端全栈2019年2月22日view:223Vue.jsvue
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

引子:vue的.vue文件是怎么跑起来的?

   答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件

1、vue-loader做了什么?

vue-loader是一个webpack加载器,这是vue组件的格式:

<template>
 ...
</template>
<script>
 ...
</script>
<style>
 ...
</style>

它可以把这样的vue组件转化为JS模块,这其中最值得关注的是,它生成了 render function code

render function code 是从模板编译而来(可以并且应该预编译)的组件核心渲染方法, 在每一次组件的 Render 过程中, 通过注入的数据执行可生成虚拟 Dom

2、vue核心执行过程

vue核心的执行过程主要分为这几个阶段: 1) 编译模板, 生成可复用的render function code, 这一步在vue实例的整个生命周期中只会执行一次甚至零次, 因为我们可以在打包的时候可以预编译 2) 生成watcher等核心渲染监听, 在整个vue实例的生命过程中持续发生着作用, 对view和modal进行双向绑定 3) 虚拟dom的diff比较, 当watcher监听到data的变更的时候, 就会根据注入新的data执行render function code, 生成新的虚拟dom, 跟老的虚拟dom(第一次执行的时候可能为空)进行diff比对, 不同的部分将写入真实的dom

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论
发表评论
暂无评论
PUBLISHED IN
前端全栈

不定时推送有价值,干货的前端文章

我的收藏