vue3.0生命周期和钩子函数

项目搭建

既然是学习Vue3，那么首先应该需要的是如何初始化项目，在这里提供了两种方式供大家参考

方式一：vue-cli脚手架初始化Vue3项目

官方文档：https://cli.vuejs.org/zh/guid...

<code>// 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

// 安装或者升级你的@vue/cli

npm install -g @vue/cli

// 创建

vue create vue_test

// 启动

cd vue_test

npm run serve

方式二：vite初始化Vue3项目

vite官网：https://vitejs.cn/

// 创建工程

npm init vite-app <project-name>

// 进入工程目录

cd <project-name>

// 安装依赖

npm install

// 运行

npm run dev

项目目录结构分析

这里的项目目录结构分析主要是main.js文件

Vue2里面的main.js

new Vue({

el: '#app',

components: {},

template: ''

});

Vue3里面的main.js

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

在Vue2里面，通过new Vue({})构造函数创建应用实例对象，而Vue3引入的不再是Vue的构造函数，引入的是一个名为createApp的工厂函数创建应用实例对象。

Composition API

setup

理解：Vue3.0中一个新的配置项，值为一个函数setup是所有Composition API(组合式API)的入口组件中所用到的数据、方法等等，均要配置在setup里面

setup函数的两种返回值

若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用若返回一个渲染函数，则可以自定义渲染内容

setup的执行时机

在beforeCreate之前执行一次，此时this为undefined

setup的参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

context：上下文对象

attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrsslots：收到的插槽内容，相当于this.$slotsemit：分发自定义事件的函数，相当于this.$emit

注意事项：

尽量不要与Vue2x的配置使用

Vue2x的配置(data、methods、computed)均可以访问到setup中的属性、方法setup中不能访问Vue2x的配置(data、methods、computed)如果data里面的属性和setup里面的属性有重名，则setup优先setup不能是一个async函数，因为返回值不再是return的对象，而是Promise,模板看不到return对象中的属性，但是后期也可以返回一个Promise实例，需要Suspense和异步组件的配合。setup里面定义的属性和方法均可以在配置项里面使用(methods、computed、watch等)，而配置项里面定义的属性和方法无法在setup里面调用如果setup里面的属性和data里面的属性有重名，则setup里面的属性优先

Vue3xUI组件库

Element-plus

仓库地址：https://github.com/element-pl...文档地址：https://element-plus.gitee.io...

开源项目

Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统：https://github.com/newbee-ltd...Vue3.0+TypeScript+NodeJS+MySql编写的一套后台管理系统：https://github.com/xiaoxian52...

Ant Design of Vue

仓库地址：https://github.com/vueCompone...文档地址：https://antdv.com/docs/vue/in...

开源项目

AntdV后台管理系统：https://github.com/iczer/vue-...vue3.x + ant-design-vue（beta 版本，免费商用，支持 PC、平板、手机）：https://github.com/chuzhixin/...基于 Vue3.0 + Vite + Ant Design Vue：https://github.com/lirongtong...

Vant

仓库地址：https://github.com/youzan/vant文档地址：https://vant-contrib.gitee.io...

开源项目

newbee-mall Vue3 版本：https://github.com/newbee-ltd...高仿微信笔记本：https://github.com/Nick930826...仿京东淘宝电商：https://github.com/geekskai/v...

NutUI 3

仓库地址：https://github.com/jdf2e/nutui

文档地址：https://nutui.jd.com/#/index