vue3.0基础使用（附代码）

1. 认识Vue3

1) 了解相关信息

• Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本

• 耗时2年多，4000+次提交，40+RFC，2500+PR，99+贡献者。

• github: https://github.com/vuejs/vue-next/tree/v3.2.26

• 修改意见稿：https://github.com/vuejs/rfcs/tree/master/active-rfcs

• Vue3支持vue2的大多数特性

• 更好的支持Typescript

2) 性能提升:

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

• 使用Proxy代替defineProperty实现数据响应式

• 重写虚拟DOM的实现和Tree-Shaking

3) 新增特性

• Composition (组合) API

• setup

  • ref 和 reactive

  • computed 和 watch

  • 新的生命周期函数

  • provide与inject

  • ...

• 新组件

  • Fragment - 文档碎片

  • Teleport - 瞬移组件的位置

  • Suspense - 异步加载组件的loading界面

• 其它API更新

  • 全局API的修改

  • 将原来的全局API转移到应用对象

  • 模板语法变化

2. 创建vue3项目

1) 使用 vue-cli 创建

文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

然后的步骤

• Please pick a preset - 选择 Manually select features

• Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步

• Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)

• Use class-style component syntax - 直接回车

• Use Babel alongside TypeScript - 直接回车

• Pick a linter / formatter config - 直接回车

• Use history mode for router? - 直接回车

• Pick a linter / formatter config - 直接回车

• Pick additional lint features - 直接回车

• Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车

• Save this as a preset for future projects? - 直接回车

2) 使用 vite 创建

• 文档: https://v3.cn.vuejs.org/guide/installation.html

• vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，

• 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

  • 快速的冷启动，不需要等待打包操作；

  • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；

  • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

3. Composition API(常用部分)

文档:

https://composition-api.vuejs.org/zh/api.html

1) setup

• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次

• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2) ref

• 作用: 定义一个数据的响应式

• 语法: const xxx = ref(initValue):

  • 创建一个包含响应式数据的引用(reference)对象

  • js中操作数据: xxx.value

  • 模板中操作数据: 不需要.value

• 一般用来定义一个基本类型的响应式数据

3) reactive

• 作用: 定义多个数据的响应式

• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

4) 比较Vue2与Vue3的响应式(重要)

vue2的响应式

• 核心:

  • 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)

  • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data, 'count', {
 get () {}, 
 set () {}
})

• 问题

  • 对象直接新添加的属性或删除已有属性, 界面不会自动更新

  • 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

Vue3的响应式

• 核心:

  • 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...

  • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

  • 文档:

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
   // 拦截读取属性值
   get (target, prop) {
     return Reflect.get(target, prop)
   },
   // 拦截设置属性值或添加新属性
   set (target, prop, value) {
     return Reflect.set(target, prop, value)
   },
   // 拦截删除属性
   deleteProperty (target, prop) {
     return Reflect.deleteProperty(target, prop)
   }
})

proxy.name = 'tom' 

5) setup细节

• setup执行的时机

  • 在beforeCreate之前执行(一次), 此时组件对象还没有创建

  • this是undefined, 不能通过this来访问data/computed/methods / props

  • 其实所有的composition API相关回调函数中也都不可以

• setup的返回值

  • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法

  • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性

  • 返回对象中的方法会与methods中的方法合并成功组件对象的方法

  • 如果有重名, setup优先

  • 注意:

    • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods

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

• setup的参数

  • setup(props, context) / setup(props, {attrs, slots, emit})

  • props: 包含props配置声明且传入了的所有属性的对象

  • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs

  • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

  • emit: 用来分发自定义事件的函数, 相当于 this.$emit

6) reactive与ref-细节

• 是Vue3的 composition API中2个最重要的响应式API

• ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)

• 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象

• ref内部: 通过给value属性添加getter/setter来实现对数据的劫持

• reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据

• ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)

7) 计算属性与监视

• computed函数:

  • 与computed配置功能一致

  • 只有getter

  • 有getter和setter

• watch函数

  • 与watch配置功能一致

  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调

  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

  • 通过配置deep为true, 来指定深度监视

• watchEffect函数

  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据

  • 默认初始时就会执行第一次, 从而可以收集需要监视的数据

  • 监视数据发生变化时回调

8) 生命周期

vue2.x的生命周期

[图片上传失败...(image-3484e0-1644895211640)]

vue3的生命周期

[图片上传失败...(image-cb9666-1644895211640)]

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()

• created -> 使用 setup()

• beforeMount -> onBeforeMount

• mounted -> onMounted

• beforeUpdate -> onBeforeUpdate

• updated -> onUpdated

• beforeDestroy -> onBeforeUnmount

• destroyed -> onUnmounted

• errorCaptured -> onErrorCaptured

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

• onRenderTracked

• onRenderTriggered

  
msg: {{msg}}
  

  更新

  
App
  切换
  

  

9) toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

  
App
  
foo: {{foo}}
  
bar: {{bar}}
  
foo2: {{foo2}}
  
bar2: {{bar2}}

10) provide和inject

利用ref函数获取组件中的标签元素

provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值 inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称

import {provide} from 'vue'
export default {
    setup() {
        const obj= {
            name: 'apple',
            color: 'red'
        }

        // 向子组件以及子孙组件传递名为info的数据
        provide('info', obj)
    }
}

// B.vue
{{ form.name }}

import {inject} from 'vue'
export default {
    setup() {   
        // 接收A.vue传递过来的数据
        const form= inject('info')  // { name: 'apple', color: 'red'}
    }
}

11) ref获取元素

利用ref函数获取组件中的标签元素

功能需求: 让输入框自动获取焦点

4. 新组件

1) Fragment(片断)

• 在Vue2中: 组件必须有一个根标签

• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

• 好处: 减少标签层级, 减小内存占用

2) Teleport(瞬移)

• Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

ModalButton.vue

App.vue

3) Suspense(不确定的)

• 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

• AsyncComp.vue

• AsyncAddress.vue