Vue3基础知识

1、vue3介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece
• 特点：
  1. 无需构建步骤，渐进式增强静态的 HTML
  2. 在任何页面中作为 Web Components 嵌入
  3. 单页应用 (SPA)
  4. 全栈 / 服务端渲染 (SSR)
  5. Jamstack / 静态站点生成 (SSG)
  6. 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2、vue3 安装

npm i @vue/cli -g
// 全局安装脚手架
vue create 项目名称

3、vue3与vue2的不同

main.js里

1.启动方式

• vue3

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

• vue2

import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

2.全局挂载方式

• vue3

const app = createApp(App);
app.config.globalProperties.$say = function (msg) { alert(msg) }

• vue2

import Vue from "vue";
Vue.prototype.$say = function(msg){alert(msg)}

3.根节点

• vue3 可以有多个根节点
• vue2 只能有一个根节点

4.生命周期，卸载

• vue3

beforeUnmount()
组件将要卸载
unmounted
组件已经卸载

• vue2

beforeDestroy()
destroyed()

4、vue3带来了什么

• 打包大小减少40%
• 初次渲染快55%，更新渲染快133%
• 内存减少54%

5、常用Composition API

1.setup函数

• Vue3.0中一个新的额配置项，值为一个函数

• setup是所有Composition API(组合api) “表演的舞台”

• 组件中所用到的：数据、方法等等，均要配置在setup中

• setup函数的两种返回值:

  • 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
  • 若返回一个渲染函数：则可以自定义渲染内容。

• 注意点：

  • 尽量不要与Vue2.x配置混用

  Vue2.x配置（data ,methos, computed…）中访问到setup中的属性，方法
  但在setup中不能访问到Vue2.x配置（data.methos,compued…）
  如果有重名，setup优先

  • setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性

2.ref

• 创建值类型响应式数据方法
• 在seup内部需要 .value 来访问设置值

3.reactive

• 创建引用类型响应式数据方法

4.defineProps

• 定义 组传的传参props

5.defineEmits

• 定义组件发送的事件

6.watch

• 监听一个数据的变化

7.watchEffect

• 监听多个数据

6、生命周期

• setup中的生命周期，没有beforeCreate与created
• setup的生命周期需要加on前缀