vue的.vue文件是怎么run起来的(vue-loader)

引子：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.欢迎大家进群交流讨论，学习交流，共同进步。

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

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

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