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


Posted in Javascript onDecember 10, 2018

引子: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的.vue文件是怎么run起来的(vue-loader)

vue核心的执行过程主要分为这几个阶段:

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

总结

以上所述是小编给大家介绍的vue的.vue文件是怎么run起来的(vue-loader) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript原始值和对象引用实例分析
Apr 25 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
svg动画之动态描边效果
Feb 22 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
深入探究node之Transform
Jul 20 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 #Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
You might like
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python最长回文串算法
2018/06/04 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
如何理解委托
2012/01/06 面试题
我的求职计划书
2014/01/10 职场文书
报社实习生自荐信
2014/01/24 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2015选调生工作总结
2015/07/24 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python