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

news/2024/7/10 0:26:19 标签: vue

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

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

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

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


http://www.niftyadmin.cn/n/1300842.html

相关文章

运输层:TCP流量控制

1.运输层&#xff1a;TCP流量控制 笔记来源&#xff1a; 湖科大教书匠&#xff1a;TCP流量控制 流量控制(flow control)就是让发送方的发送速率不要太快&#xff0c;要让接收方来得及接收。 实现方法&#xff1a;滑动窗口机制 移动发送窗口&#xff0c;因接收窗口大小为300&am…

PeekMessage和GetMessage的区别

区别&#xff1a; 1. GetMessage的主要功能是从消息队列中“取出”消息&#xff0c;消息被取出以后&#xff0c;就从消息队列中将其删除&#xff1b;而PeekMessage的主要功能是“窥视”消息&#xff0c;如果有消息&#xff0c;就返回true&#xff0c;否则返回false。也可以使用…

vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner&#xff0c;一般的ui框架无法满足产品需求&#xff1b;所以自己写了一个层叠式轮播组件&#xff1b;现在分享给大家&#xff1b; 主要技术栈是vue.js ;javascript;jquery&#xff1b;确定实现思路因工作繁忙&#xff0c;暂时不做梳理了&…

CrashRpt

今天原本打算在谷歌上搜索处理SEH的文章&#xff0c;以使我不需要在每一个线程中使用__try{}__except()代码块包裹代码的情况下&#xff0c;就能在任意线程抛出SEH时生成MiniDump文件。不过最后的结果是处理SEH的文章没有搜索出几篇&#xff0c;却幸运的搜索出了满足我需要的工…

TypeScript基础入门教程之三重斜线指令详解

前言 TypeScript是Javascript的超集&#xff0c;实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript。 三斜杠指令是包含单个XML标记的单行注释。 注释的内容用作编译器指令。 三斜杠指令仅在其包含文件的顶部有效。 三重斜杠指令只能在单行或多行注…

mpvue将vue项目转换为小程序

一、 mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架&#xff0c; 从整个 Vue的核心代码上经过二次开发而形成的一个框架&#xff0c;相当于是给Vue本身赋能&#xff0c;增加了开发微信小程序的能力。 使用 mpvue开发小程序&#xff0c;你将在小程…

vue、react等单页面项目部署到服务器的方法及vue和react的区别

tml页面空白&#xff0c;刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器&#xff1f; 由于前端路由缘故&#xff0c;单页面应用应该放到nginx或者apache、tomcat等web代理服务器中&#xff0c;千万不要直接访问index.htm…

vue服务端渲染添加缓存的方法

什么是服务器端渲染(SSR)&#xff1f; Vue.js 是构建客户端应用程序的框架。默认情况下&#xff0c;可以在浏览器中输出 Vue 组件&#xff0c;进行生成 DOM 和操作 DOM。然而&#xff0c;也可以将同一个组件渲染为服务器端的 HTML 字符串&#xff0c;将它们直接发送到浏览器&a…