vite
Vite(发音为"veet",法语中的“快速”意思)是一款由Evan You(Vue.js的创始人)创建的下一代前端构建工具。Vite的目标是提供一个快速、简单且功能强大的开发环境,特别是针对现代JavaScript框架(如Vue.js和React)的项目。Vite的核心理念是利用现代浏览器的原生ES模块支持,通过提供即时开发(Instant Server Start)和按需编译(On-Demand Compilation)来实现极速的开发体验。官网
特点
- 快速的开发服务器:Vite利用现代浏览器的原生ES模块支持,启动开发服务器的速度非常快。在开发过程中,Vite会根据需要动态编译模块,因此可以快速地响应文件更改,实现毫秒级的热更新。
- 按需编译:Vite只编译你的代码中引入的模块,而不是整个项目。这意味着如果你的应用程序只引入了部分功能模块,那么Vite只会编译这些模块,而不会浪费时间编译整个应用程序。这种按需编译的方式可以显著提高开发和构建的速度。
- 内置开箱即用的插件:Vite内置了许多常用的插件,例如支持TypeScript、CSS预处理器(如Sass、Less)、自动前缀等。这些插件可以通过简单的配置启用,无需额外安装和配置。
- 支持现代JavaScript:Vite完全支持ES模块,并默认情况下使用原生ES模块作为构建输出,这使得它成为现代JavaScript开发的理想选择。
- 支持热更新:Vite提供了热更新功能,可以在开发过程中实时更新浏览器中的页面,而无需手动刷新浏览器。
在vite+vue2项目中了解vue的生命周期
<script>
export default {
name: 'App',
data: function () {
return {
msg: 'Hello Vue 2 + Vite'
}
},
methods: {
sayHello: function () {
alert('Hello!');
},
delayChange(str, timer) {
setTimeout(() => {
this.msg = str;
}, timer);
}
},
beforeCreate() {
// 在实例初始化之后,数据观测和事件配置之前调用。在这个阶段,实例的初始化还没有完成,因此你不能访问到实例的数据和方法。
this.delayChange('vue2 + vite beforeCreate', 1000)
},
created() {
// 在实例创建完成后被立即调用。在这个阶段,实例已经完成了数据观测、属性和方法的运算,但是尚未挂载到DOM上。你可以在这个阶段进行数据的初始化、异步请求等操作。
this.delayChange('vue2 + vite created', 2000)
},
beforeMount() {
// 在挂载开始之前被调用。在这个阶段,Vue已经编译了模板,但尚未将其挂载到DOM上。
this.delayChange('vue2 + vite beforeMount', 3000)
},
mounted() {
// 在挂载完成后被调用。在这个阶段,Vue实例已经被挂载到DOM上,你可以访问到DOM元素,并且可以执行DOM操作、访问外部库等操作。
setTimeout(() => {
this.msg = 'vue2 + vite mounted'
}, 4000);
},
beforeUpdate() {
// 在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前。在这个阶段,你可以访问到更新之前的数据状态。
setTimeout(() => {
this.msg = 'vue2 + vite beforeUpdate'
}, 5000);
},
updated() {
// 在数据更新之后被调用,发生在虚拟DOM重新渲染和打补丁之后。在这个阶段,你可以执行一些需要依赖DOM的操作,但是要注意避免无限循环更新
setTimeout(() => {
this.msg = 'vue2 + vite updated'
}, 6000);
},
beforeDestroy() {
// 在实例销毁之前调用。在这个阶段,实例仍然完全可用,你可以执行一些清理工作,比如取消定时器、解绑事件监听器等。
setTimeout(() => {
this.msg = 'vue2 + vite beforeDestroy'
}, 7000);
},
destroyed() {
// 在实例销毁之后调用。在这个阶段,实例的所有指令和观察者都已被解绑,所有的事件监听器也已被移除,实例已经不再可用。
setTimeout(() => {
this.msg = 'vue2 + vite destroyed'
}, 8000);
}
};
</script>
<template>
<div class="container">
<h1>{{ msg }}</h1>
<button @click="sayHello">Say Hello</button>
</div>
</template>