持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
vite
之所以使用新一代的构建工具vite，是因为它热更新速度更快，打包速度更快。
相对于vue的自带构建工具vue-cli，vite默认安装的插件非常少，所以在开发过程中需要自己配置。
npm init vite-app 项目名称
npm i
npm run dev (vuecli的是：npm run serve)
以上三行命令后，就创建了一个属于自己的vite项目。
之后再根目录src下创建main.js入口文件，书写：
// 1.导入createApp函数，并通过它来创建应用实例
import { createApp } from 'vue'
// 2.编写一个根组件App.vue并引入出来
mport App from './App.vue'
// 3.基于根组件创建应用实例
const app = createApp(App)
// 4.挂载
app.mount('#app')
options API和composition API
在vue2中写法属于optionsAPI的写法，data中写数据，methods中写方法等，这样写使得代码的组织性变差，相似逻辑的代码不便于复用，逻辑复杂代码不便于阅读。
composition API更像vue2中的minxin（混入）的写法，一个功能逻辑的代码组织在一起，包括数据，方法甚至是生命周期钩子等，便于阅读和维护。
setup函数
- setup函数是composition API的起点。
- setup函数会在beforeCreate钩子之前执行。
- 在setup里面的this是undefined。
- 模板中使用的数据和函数，都要在setup中返回。
示例代码：
<template>
<div>VUE3</div>
<div>{{msg}}</div>
</template>
<script>
export default {
name: "App",
setup() {
const msg = "hi,vue3";
console.log("setup");
return {
msg
};
},
beforeCreate() {
console.log("beforeCreate");
}
};
</script>
<style>
</style>
生命周期钩子
composition API的生命周期钩子一共有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。
vue2中的生命周期钩子：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
vue3中的生命周期钩子：
- setup
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
示例代码：
<template>
<div class="v3">VUE3</div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue";
export default {
name: "App",
setup() {
// 1.dom渲染前钩子
onBeforeMount(() => {
console.log("dom渲染前钩子", document.querySelector(".v3"));
//打印结果： dom渲染前钩子 null
});
// 2.dom渲染后钩子
onMounted(() => {
console.log("dom渲染后钩子", document.querySelector(".v3"));
// 打印结果：<div class="v3">VUE3</div>
});
return {};
}
};
</script>
<style>
</style>
