2021-06-02

为什么要学习 vue 3

1. Vue 是目前国内开发最火的前端框架之一
2. vue3.0 正式版已发布七个月左右，社区生态已经逐步完善
3. 部分技术选型激进的公司已经在生产环境使用了vue3

已支持 vue3 的UI组件库

1. ant-design-vue
   链接：https://antdv.com/docs/vue/introduce-cn/
   ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，现支持 Vue 3.0 的 2.0.0 测试版 已发布

2. element-plus
   链接：https://element-plus.gitee.io/#/zh-CN
   Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

3. vant
   链接：https://vant-contrib.gitee.io/vant/v3/#/zh-CN
   轻量、可靠的移动端 Vue 组件库 是**有赞前端团队**开源的移动端组件库，2016 年开源，已持续维护 4 年时间，目前已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本

4. VueUse
   链接：https://vueuse.org/
   基于composition组合api的常用集合，小兔仙项目会部分使用

Vue3带来的新变化

1、性能提升

• 首次渲染更快
• diff算法更快
• 内存占用更少
• 打包体积变小

2、更好的Typescript支持

3、Composition API （重点）

• 在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题

相关阅读(链接)：

1. Vue3 中文文档：https://vue3js.cn/docs/zh/

2. Vue3 设计理念：https://vue3js.cn/vue-composition/

破坏性语法更新

vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意

1. 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）
2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
3. .sync语法移除 （和v-model语法合并）

Vue3开发环境搭建

 vue create (项目名称) // 创建项目命令

vue2.x

new Vue({
   
  el: '#app',
  render: h => h(App)
})

vue3.x

import {
    createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

最后我们打开一个单文件组件发现，vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

组合式API

composition vs options

composition API开发的vue应用如下右图所示，特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理

特别注意：

1. 选项式api和组合式api俩种风格是并存的关系 并不是非此即彼
2. 需要大量的逻辑组合的场景，可以使用compition API进行增强

setup入口函数

使用步骤：

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
2. setup 中不能使用 this， this 指向 undefined
3. setup函数只会在组件初始化的时候执行一次
4. setup函数在beforeCreate生命周期钩子执行之前执行

export default {
   
  setup () {
   
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
   
    console.log('beforeCreate执行了')
    console.log(this)
  }
}

响应式系统API

reactive函数

作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

1. 从vue框架中导入reactive函数
2. 在setup函数中调用reactive函数并将对象数据传入
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

代码落地：

<template>
  <div>{
   {
    state.name }}</div>
  <div>{
   {
    state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>

<script>
import {
    reactive } from 'vue'
export default {
   
  setup () {
   
    const state = reactive({
   
      name: 'cp',
      age: 18
    })
    return {
   
      state
    }
  }
}
</script>

ref 函数

作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

1. 从vue框架中导出ref函数
2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意：**在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

<template>
  <div>