vue3的新特性

在Vue2版本中，很多函数都挂载在全局Vue对象上，比如nextTick、nextTick、nextTick、set等函数，因此虽然我们可能用不到，但打包时只要引入了vue这些全局函数仍然会打包进bundle中。组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，export default不用写，数据，计算属性和方法，自定义指令都是在template中直接可获取。与vue2中的c

小颖子_Ly

2270人浏览 · 2022-09-02 02:04:12

小颖子_Ly · 2022-09-02 02:04:12 发布

Vue3的新特性

向下兼容，vue3支持大多数vue2的特性
Composition API
- setup、ref、reactive、watch、watchEffect、生命周期钩子等等
新的内置组件
- Fragment、Teleport、Suspense(实验)
Tree-shaking优化，性能提升
更好的支持TypeScript

一、向下兼容

vue3支持大多数vue2的特性（可以写vue2的东西）

vue2 添加Object数据需 this.$set 或 Vue.set，删除需要Vue.delete 或者可能得使用其他的一些办法来解决这个问题
Vue3 添加object数据删除都是响应式

二、Composition API

1.setup

setup函数是一个新的组件选项，作为在Composition API的入口点
接收两个参数props和context（attrs、slots、emit）
- props：值为对象，内容：组件外部传递过来，且组件内部声明接受了的属性
- context: 上下文对象
  - attrs：值为对象，包含：组件外部传递过来但没有在props配置中声明的属性，相当于vue2中的this.$attrs
  - slots: 收到的插槽内容，相当于this.$slots
  - emit: 分发自定义的事件的函数，相当于this.$emit
执行时机：setup处于 beforeCreate生命周期钩子之前的函数（this为undefined）
返回值：（两种返回值）
- 返回一个对象，对象中的属性、方法，在模板中均可以直接使用
- 返回一个渲染函数：自定义渲染内容（代替模板）

2.Ref和Reactive

ref 和 reactice 都是用来创建响应式对象的

ref
- 使用的时候需要.value
- 声明基本数据类型时使用Object.definePropety 的原型对象中的get set方法来修改数据实现响应式
- 声明Object类型时内部通过reactive来转为代理对象
- template模板中不需要.value
reactice
- 用来定义Object类型数据
- 操作数据与读取数据都不需要.value
- 通过使用Proxy来实现响应式，并通过Reflect操作元对象内部的数据

3、生命周期钩子

setup执行时机在beforeCreate之前执行；

将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted

setup() :开始创建组件之前，在beforeCreate之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated():若组件实例是<KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。
onDeactivated(): 若组件实例是<KeepAlive> 缓存树的一部分,比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 在捕获了后代组件传递的错误时调用。（以下为错误来源）
- 组件渲染
- 事件处理器
- 生命周期钩子
- setup() 函数
- 侦听器
- 自定义指令钩子
- 过渡钩子

4、计算属性

与vue2中的computed配置功能一致，vue2 计算属性是一个对象 vue3是函数

// computed
        const count = ref(1)
        const plus = computed(() => count.value ++)
        const state = reactive({
            title: computed(() => {
                return count.value + 1
            }),
        })

5、watch

watch 可以接收三个参数第一个是要监听的对象,第二个是数据处理变化,第三个是配置项(options)

options: immediate:true是刚一进去就监听一次

监听ref定义的响应式数据(监听多个可以写成数组形式)

 const num = ref(0)
        const msg = ref('watch')
        watch(
            num,
            (newV, oldV) => {
                console.log(newV)
            },
            { immediate:true }
        )

监听reactive定义的响应式的全部数据

使用reactive定义的数据，无法正确获取oldV；并且强制开启了深度检测（deep配置无效）

const state = reactive({
            age: 18,
            name: 'fc',
            tag: {
                a: 3,
            }
        })
        watch(
            state,
            (newV, oldV) => {
                console.log(newV)
            },
            { deep: true } // 此配置无效  oldV无法获取
        )

//
        watch(
            state.tag,
            (newV, oldV) => {
                console.log(newV)
            },
            { deep: true } // 此配置有效 因为监视的reactive定义的对象中的某个属性的值依然是个对象
        )

6、watchEffect

watch：既要指明监视的属性，也要指明监视的回调

watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性

watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect与computed比较相似
- computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
- watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

7、模板指令

v-model 用法更改，在一个组件上支持双向绑定多个属性，例如v-model:first-name="first" v-model:last-name="last",还有子组件defineProps(['']) defineEmits([''])来接收和响应事件来更新数据
移除keyCode v-on的修饰符，同时也不再支持config.keyCodes （废除 @keyup.13这种还有自定义按键别名的）
移除v-on.native 修饰符 vue3之中使用emit 接收自定义事件接受的vue认为是自定义的不接受的vue会认为是原生事件
移除过滤器 vue3认为这个有实现成本，官方目前建议用方法调用或计算属性
v-if 与 v-for 的优先级对比
- 2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。Vue2.x v-for 优先级高
- 3.x 版本中 v-if 总是优先于 v-for 生效。Vue3.x v-if 优先级高
v-bind 合并行为
- 在 2.x，如果一个元素同时定义了 v-bind=“object” 和一个相同的单独的 property，那么这个单独的 property 总是会覆盖 object 中的绑定。单独的属性覆盖v-bind
- 在 3.x，如果一个元素同时定义了 v-bind=“object” 和一个相同的单独的 property，那么声明绑定的顺序决定了它们如何合并

v-for 中的 Ref 数组

在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这样会效率低下
在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，而是将 ref 绑定到一个更灵活的函数上（新特性）

<div v-for="item in list" :key="item" :ref="setItemRef"></div>
//itemRefs 不必是数组：它也可以是一个对象，其 ref 会通过迭代的 key 被设置
export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }

    return {
      setItemRef
    }
  },
}

8、provide inject props emit

9、setup语法糖

<script setup>
更少的模板语法
组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，export default不用写，数据，计算属性和方法，自定义指令都是在template中直接可获取
不写setup函数，props/emit的获取方法
- defineProps: 用来接收父组件传来的值props
- defineEmits: 用来声明触发的事件表
可以直接写await 组件的setup会自动百年城 async setup

10、getCurrentInstance

getCurrentInstance(): 用于获取当前组件的实例、上下文来操作router和vuex等

11、hooks

vueuse

12、toRef toRefs

创建一个ref对象，其value值指向另一个对象中的某个属性值（引用）
toRefs与toRef功能一致，但可以批量创建多个ref对象

13、shallowReactive shallowRef

shallowReactive: 中会处理对象最外层（第一层）属性的响应式（浅响应式）
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理（针对基本类型，用法与ref一样，针对对象类型，不会对里面属性进行响应式处理，只会针对对象本身，如果替换对象可以响应式）

14、readonly shallowReadonly

readonly: 让一个响应式数据变为只读的（深只读）
shallowReadonly：让一个响应式数据变为只读的（浅层只读深层还是响应式）

15、toRaw markRaw

toRaw: 将一个由reactive生成的响应式对象转为普通对象
markRaw: 标记一个对象，使其永远不会再成为响应式对象

三、新的内置组件

1、Teleport

一种能够将模板移动到其他位置的组件

应用： modal、toast

<teleport to="#modal"></Teleport>

2、Suspense（试验）

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

3、Fragment

在 Vue2 中， template中只允许有一个根节点；在 Vue3 中，可以直接写多个根节点

四、Tree-shaking

Tree-Shaking带来的bundle体积更小。

在Vue2版本中，很多函数都挂载在全局Vue对象上，比如nextTick、nextTick、nextTick、set等函数，因此虽然我们可能用不到，但打包时只要引入了vue这些全局函数仍然会打包进bundle中。

而在Vue3中，所有的API都通过ES6模块化的方式引入，这样就能让webpack或rollup等打包工具在打包时对没有用到API进行剔除，最小化bundle体积