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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
js post提交调用方法
Feb 12 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
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字符串替换函数substr_replace()用法实例
2015/03/17 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
深入浅析Python传值与传址
2018/07/10 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
开会迟到检讨书
2014/01/08 职场文书
实习生自我评价
2014/01/18 职场文书
高二英语教学反思
2014/01/19 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技