文章目录
1. 创建vue3项目
1.1 基于webpack的工程创建
在用这种方式创建vue3项目时，要注意以下几点：
- 确保你的vue-cli 脚手架版本在 4.5.0 以上，这样才能创建
- 检查脚手架版本 vue -V 或 vue --version
- 如果版本低话，请重新安装 vue-cli，使用命令为：
npm install -g @vue/cli
创建流程：
-
在命令提示符输入
vue create vue3-project -
选择安装方式：
-
选择安装的模块
-
选择安装的vue版本
-
路由的模式
-
ccs预处理
-
配置文件的存储位置
-
不保存创建项目的设置,到此项目创建成功
1.2 通过vite来创建vue3项目
-
在命令提示符输入以下命令：
yarn create vite myapp01_vite
-
选中vue进行创建
-
选择语言模式
-
至此，项目创建完成，按提示运行项目
最后，我们来看一下创建成功后的目录结构：
vue3插件推荐
1.3 通过npm init vue@3创建项目
使用create-vue来创建vue3项目,它也是基于vite来构建的
命令：
npm init vue@3
指定项目名称：
选择需要的配置：
2. vue3入口文件
vue3 的入口文件，相对于 vue2 做了一定改变：
// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import {
createApp } from 'vue'
// 根组件
import App from './App.vue'
// 实例化一个Vue顶层组件
const app = createApp(App)
app.mount('#app')
3. vue3中的全局方法修改
vue2 中的全局方法都是添加在 Vue 类的静态方法或属性当中，而在 vue3 中，我们把全局方法都添加在了 app 实例当中。
| 2.x Global API | 3.x Instance API(app) |
|---|---|
| Vue.config | app.config |
| Vue.config.productionTip | 已移除 |
| Vue.config.ignoredElements | app.config.isCustomElement |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
示例：
入口文件（main.js）：
// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import {
createApp, h } from 'vue'
// 根组件
import App from './App.vue'
// 实例化一个Vue顶层组件
const app = createApp(App)
// vue3中把之前vue2中的全局方法进行了改变，全都迁移到app实例上
// 定义一个全局组件
app.component('loading', {
render() {
return h('h1', null, '加载中...')
}
})
// 给vue添加全局的成员属性
app.config.globalProperties.$http = '我是网络请求对象'
// 全局自定义指令 v-red
// 7个钩子函数：created beforeMount mounted beforeUpdate updated beforeUnmount unmounted
app.directive('red', {
created(el) {
el.style.cssText = 'color:red;'
},
// 删除app组件
// mounted(el) {
// el.remove()
// }
})
// 全局混入
app.mixin({
data() {
return {
title: '我是全局混入'
}
},
mounted() {
console.log('全局混入 -- mounted');
}
})
// 全局插件
app.use(instanceVue => {
// console.log(instanceVue);
instanceVue.component('test', {
render() {
return h('h3', null, '我是插件中定义的组件')
}
})
})
app.mount('#app')
App组件（App.vue）：
<template>
<div>
<h3 v-red>App组件--{
{ title }}</h3>
<!-- 全局组件 -->
<loading />
<test />
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$http, '组件内')
}
}
</script>
<style lang="scss" scoped>
</style>
4. vue3中封装全局方法
入口文件（main.js）：
// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import {
createApp } from 'vue'
// 根组件
import App from './App.vue'
import createGlobalComponent from './components'
import globalProperties from './config/globalProperties'
// 实例化一个Vue顶层组件
const app = createApp(App)
// 创建全局组件
// createGlobalComponent(app)
app.use(createGlobalComponent)
app.use(globalProperties)
app.mount('#app')
App组件（App.vue）：
<template>
<div>
<h3>App组件</h3>
<loading />
<test />
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
console.log(this.$http, '组件内')
}
}
</script>
<style lang="scss" scoped></style>
commponents入口文件（index.js）：
import loading from './loading'
import test from './test'
const createGlobalComponent = app => {
loading(app)
test(app)
}
export default createGlobalComponent
loading组件（index.js）：
import loading from './loading.vue'
export default app => app.component('loading', loading)
loading组件（loading.vue）：
<template>
<div>
<h3>加载中</h3>
</div>
</template>
<script>
export default {
setup() {
return {
}
}
}
</script>
<style lang="scss" scoped>
h3 {
color: red;
}
</style>
test组件同loading组件代码基本一致，这里省略。
全局成员属性配置文件（config/globalProperties.js）：
export default app => {
// 给vue添加全局的成员属性
app.config.globalProperties.$http = '我是网络请求对象'
}
运行结果：
5. vue3生命周期函数
执行顺序：
6. setup中生命周期使用
<template>
<div>
<h3>App组件</h3>
</div>
</template>
<script>
import {
onMounted } from 'vue'
export default {
// setup 配置选项出现，为了照顾vue2，又想使用vue3
// setup它就是组合Api的入口
// setup中，它不能使用this，它里面没有 beforeCreate和created生命周期
// 返回值 {} | ()=>{}
setup() {
// setup中的生命周期能执行多次
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
return {
}
},
// 这个生命周期只能执行一次
// mounted(){
// console.log('aaa');
// }
}
</script>
<style lang="scss" scoped>
</style>
由于组合API（setup()）中生命周期钩子函数能够执行多次，所以我们可以使用自定义钩子，实现不同的功能。
注意：setup中，它不能使用this，它里面没有 beforeCreate和created生命周期。
我们可以创建一个 hooks 文件，用来存储，我们自定义的钩子函数，例如下面这个函数：
usePrintHook.js：
import {
onMounted } from 'vue';
const usePrintHook = () => {
// 在挂载完成后，输出一句话
// 初始化时，进行网络请求
// 挂载完成后，进行dom操作
onMounted(() => {
console.log('我是一个mounted生命周期')
})
// 可以书写返回值
return 'abc'
}
export default usePrintHook
App组件（App.vue）：
<template>
<div>
<h3>App组件</h3>
</div>
</template>
<script>
import usePrintHook from './hooks/usePrintHook'
export default {
setup() {
let ret = usePrintHook()
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
7. data函数方式
data 只能定义成一个函数，例如下面这样：
<template>
<div>
<h3>{
{ count }}</h3>
<button @click="handleAddClick">add</button>
</div>
</template>
<script>
import _ from 'lodash'
export default {
// vue3中的data属性，要求全都为函数且返回一个对象
data() {
return {
count: 100
}
},
// 它是一个方法，每次来获取都是新，复用时，不会受到相互的影响，对于性能是一种提升
created() {
// this.handleAddClick = () => this.count++
this.handleAddClick = _.debounce(() => this.count++, 100)
},
methods: {
// 这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。
// 为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数
// handleAddClick() {
// this.count++
// }
}
}
</script>
<style lang="scss" scoped></style>
