vue 3.x 核心知识点

Vue3.0的正式版应该很快就要发布了,可以更加大胆在实际项目中投入使用了,笔者从年初就开始尝试在一些真实的小项目中使用,本文对此进行简单总结。

如何初始化项目

官方提供初始化vue 3的项目有两种方式:

  • 基于@vue/cli 4.5.x 以后的版本,在提示选择Vue版本时选择3.x
  • 基于 vite 这个vue作者近期打造的工具,近期正式版也将发布

目前来看,基于webpack 构建的方式比较稳定,而基于vite 的方式,虽然可能会遇到问题,但是开发效率更高,性能更好。

这里就不演示如何一步步构建了,大家去看工具的官网即可:

Composition API

每个.vue 或 tsx文件中在script标签中的 setup 就是Composition API的入口,一般会return一个对象,对象中声明的响应式数据和方法,就可以直接在template中使用了。

setup函数有两个参数:

  • props是setup函数的第一个参数,是组件外部传入进来的属性,与vue2.0的props基本是一致的;虽然template中使用的是setup返回的对象,但是对于props,不需要在setup中返回,就直接可以在template使用;
  • context是一个对象,里面包含了三个属性,分别是attrs(attrs与Vue2.0的this.attrs是一样的,即外部传入的未在props中定义的属性)、slots(slots对应的是组件的插槽,与Vue2.0的this.slots是对应的)、emit(对应的是Vue2.0的this.$emit, 即对外暴露事件)。

setup也可以返回一个函数,这个函数对应的就是Vue2.0的render函数,可以在这个函数里面使用JSX。

不要在setup中使用this,在setup中的this和你真正要用到的this是不同的,通过props和context基本是可以满足我们的开发需求的。

vue3 的Composition API 让我们不仅可以像Vue2.x 现有的 API 通过选项组织代码,也可以通过逻辑关系组织代码。

reactive 和 ref

在Vue2.6中, 出现了一个新的api,Vue.observer,通过这个api可以创建一个响应式的对象,而reactive就和Vue.ovserver的功能基本是一致的

Vue3.0中通过Proxy让我们可以直接在reactive声明的对象上面添加新的属性,而vue2.0则需要使用Vue.set来解决, 因为Vue2.0使用的Object.defineProperty无法监听到某些场景比如新增属性。

reactive对原始的对象并没有进行修改,而是返回了一个全新的对象,返回的对象是Proxy的实例。需要注意的是在项目中尽量去使用reactive返回的响应式对象,而不是原始对象。

  • reactive传入的是一个对象,返回的是一个响应式对象,而ref传入的是一个基本数据类型(其实引用类型也可以),返回的是传入值的响应式值
  • reactive获取或修改属性可以直接通过state.prop来操作,而ref返回值需要通过name.value的方式来修改或者读取数据,但在template中并不需要通过.value来获取值,这是因为template中已经做了解套。

watch

我们经常会使用watch来监听Vue实例上面的一个表达式或者一个函数计算结果的变化。

在Vue3.0中,除了Vue2.0的写法之外,有两个api可以对数据变化进行监听:

  • watch:与Vue2.0中的$watch用法基本一致;
  • watchEffect:Vue3.0新提供的api,它需要传入一个函数,然后立即执行这个函数,对于函数里面的响应式依赖会进行监听,然后当依赖发生变化时,会重新调用传入的函数;

在Vue3.0中,watch与watchEffect同样也会返回一个unwatch函数,用于取消执行。

vue-router

Vue3.0中的计算属性的作用和Vue2.0的作用基本是一样的,Vue3.0的计算属性也可以设置getter和setter。

Vue3.0 中vue-router也像生命vue实例一样,改为了函数的声明方式。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

# 上面是vue 2.x 的方式,下面是vue3.x 的方式
import { createRouter, createWebHashHistory } from 'vue-router'

在Vue2.0中,我们通过this.route可以获取到当前的路由,然后通过this.router来获取到路由实例来进行路由跳转,但是在setup中,我们是无法拿到this的。

除了可以使用watch来监听路由变化,我们还可以使用vue-router提供的生命周期函数onBeforeRouteUpdate和onBeforeRouteLeave。

生命周期函数

Vue3.0是兼容一部分Vue2.0的,所以对于Vue2.0的组件写法,生命周期钩子函数并未发生变化,假如使用的是componsition api:

  • 取消beforeCreate与created,使用componsition api时,setup就代替了beforeCreate与created,因为setup就是组件的实际入口函数。
  • beforeDestroy更名为onBeforeUnmount,destroyed更名为onUnmounted。
  • 将生命周期函数名称变为on+XXX,比如mounted变成了onMounted,updated变成了onUpdated。

实际用法与Vue2.0基本是一致的,只是写法发生了变化。

推荐阅读更多精彩内容