vue的.vue文件是怎么run起来的(vue-loader)
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
vue的.vue文件是怎么run起来的(vue-loader)的更多相关文章
- vue的单文件组件
五. 单文件组件 1. .vue文件 .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html.css.js .vu ...
- vue 查看dist文件里的结构
场景:优化打包后的代码,提高性能. 1.方式一:report-json. 1.1 package.json文件里加入以下命令, "report": "vue-cli-se ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
- vue之element-ui文件上传
vue之element-ui文件上传 文件上传需求 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...
- vue 设置头文件
vue的头文件是在index.html文件中设置的,毕竟vue的入口 先说一下标签页的名字: 就是这个名字的设置,要想每个标签页的名字都不一样,需要做以下这三步:1. 首先,在index.html文件 ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- 前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
随机推荐
- openshift 容器云从入门到崩溃之四《配置用户验证》
1.配置本地用户 之前安装的时候选择了htpasswd验证方式 先创建用户 # htpasswd -c /etc/origin/master/htpasswd admin 授权为集群管理员 # oc ...
- node 解析图片二维码的内容
const {readFile, readFileSync} = require('fs'); const decodeImage = require('jimp').read; const qrco ...
- linux----------安装Supervisor是用Python开发的一套通用的进程管理程序
1.linux环境必须安装 python 2.yum install python-setuptools 3.获取supervisor包 wget https://pypi.python.org/pa ...
- 修改caffe层的一般流程
https://blog.csdn.net/u012273127/article/details/78701161
- 基于注解的Spring事务配置
spring采用@Transactional注解进行事务申明,@Transactional既可以在方法上申明,也可以在类上申明,方法申明优先于类申明. 1.pom配置 包括spring核心包引入以及s ...
- Linux分区、文件系统
Linux分区类型: ◆主分区:总共最多只能分四个 ◆扩展分区:只能有一个,也算作主分区的一种,也就是 说主分区不能存储数据和格式化,必须再划分为逻辑分区才能使用. ◆逻辑分区:逻辑分区是在扩展分区中 ...
- 【Bcftools】合并不同sample的vcf文件,通过bcftools
通过GATK calling出来的SNP如果使用UnifiedGenotype获得的SNP文件是分sample的,但是如果使用vcftools或者ANGSD则需要Vcf文件是multi-sample的 ...
- js中prototype,constructor的理解
连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...
- Linux 查看磁盘读写速度IO使用情况
# 查看io进程 命令:iotop 注:DISK TEAD:n=磁盘读/每秒 DISK WRITE:n=磁盘写/每秒. 注:标黄的可查看磁盘的读写速率,下面可以看到使用的io ...
- VOC标签转化为YOLO标签
参考darknet自带的voc_label.py import xml.etree.ElementTree as ET import pickle import os from os import l ...