Vue3.0新特性以及使用的示例分析

这篇文章给大家分享的是有关Vue3.0新特性以及使用的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专业为企业提供潮安网站建设、潮安做网站、潮安网站设计、潮安网站制作等企业网站建设、网页设计与制作、潮安企业网站模板建站服务，十年潮安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

为什么要升级 Vue3

使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有数据都是定义在data中，方法定义在methods中的，并且使用this来调用对应的数据和方法。那 Vue3.x 中就可以不这么玩了， 具体怎么玩我们后续再说， 先说一下 Vue2.x 版本这么写有什么缺陷，所有才会进行升级变更的。

回顾 Vue2.x 实现加减 

上面代码只是实现了对count的加减以及显示倍数， 就需要分别在 data、methods、computed 中进行操作，当我们增加一个需求，就会出现下图的情况：

当我们业务复杂了就会大量出现上面的情况， 随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：

甚至一个功能还有会依赖其他功能，全搅合在一起。

当这个组件的代码超过几百行时，这时增加或者修改某个需求， 就要在 data、methods、computed 以及 mounted 中反复的跳转，这其中的的痛苦写过的都知道。

那我们就想啊， 如果可以按照逻辑进行分割，将上面这张图变成下边这张图，是不是就清晰很多了呢, 这样的代码可读性和可维护性都更高：

那么 vue2.x 版本给出的解决方案就是 Mixin, 但是使用 Mixin 也会遇到让人苦恼的问题：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  命名冲突问题

3.  不清楚暴露出来的变量的作用

4.  逻辑重用到其他 component 经常遇到问题

关于上面经常出现的问题我就不一一举例了，使用过的小伙伴多多少少都会遇到。文章的重点不是 Mixin, 如果确实想知道的就留言啦~

所以，我们 Vue3.x 就推出了Composition API主要就是为了解决上面的问题，将零散分布的逻辑组合在一起来维护，并且还可以将单独的功能逻辑拆分成单独的文件。接下来我们就重点认识Composition API。

Composition API

setup

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口。

setup 执行时机

我在学习过程中看到很多文章都说 setup 是在 beforeCreate和created之间， 这个结论是错误的。实践是检验真理的唯一标准， 于是自己去检验了一下：

export default defineComponent({    beforeCreate() {      console.log("----beforeCreate----");    },    created() {      console.log("----created----");    },    setup() {      console.log("----setup----");    },  });

setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。

setup 参数

使用setup时，它接受两个参数：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  props: 组件传入的属性

3.  context

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示例， 这段代码会让 props 不再支持响应式：

// demo.vue  export default defineComponent ({      setup(props, context) {          const { name } = props          console.log(name)      },  })

那在开发中我们想要使用解构，还能保持props的响应式，有没有办法解决呢？大家可以思考一下，在后面toRefs学习的地方为大家解答。接下来我们来说一下setup接受的第二个参数context，我们前面说了setup中不能访问 Vue2 中最常用的this对象，所以context中就提供了this中最常用的三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、slot插槽 和$emit发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

reactive、ref 与 toRefs

在 vue2.x 中， 定义数据都是在data中， 但是 Vue3.x 可以使用reactive和ref来进行数据定义。那么ref和reactive他们有什么区别呢？分别什么时候使用呢？说到这里，我又不得不提一下，看到很多网上不少文章说 (reactive用于处理对象的双向绑定，ref则处理 js 基础类型的双向绑定)。我其实不太赞同这样的说法，这样很容易初学者认为ref就能处理 js 基本类型， 比如ref也是可以定义对象的双向绑定的啊， 上段代码：

setup() {     const obj = ref({count:1, name:"张三"})     setTimeout(() =>{         objobj.value.count = obj.value.count + 1         obj.value.name = "李四"     }, 1000)     return{         obj     }   }

我们将obj.count和obj.name绑定到页面上也是可以的；但是reactive函数确实可以代理一个对象， 但是不能代理基本类型，例如字符串、数字、boolean 等。接下来使用代码展示一下ref、reactive的使用：

运行效果:

上面的代码中，我们绑定到页面是通过user.name,user.age；这样写感觉很繁琐，我们能不能直接将user中的属性解构出来使用呢? 答案是不能直接对user进行结构， 这样会消除它的响应式， 这里就和上面我们说props不能使用 ES6 直接解构就呼应上了。那我们就想使用解构后的数据怎么办，解决办法就是使用toRefs。toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象。具体使用方式如下：

生命周期钩子

我们可以直接看生命周期图来认识都有哪些生命周期钩子 (图片是根据官网翻译后绘制的)：

从图中我们可以看到 Vue3.0 新增了setup，这个在前面我们也详细说了， 然后是将 Vue2.x 中的beforeDestroy名称变更成beforeUnmount; destroyed 表更为 unmounted，作者说这么变更纯粹是为了更加语义化，因为一个组件是一个mount和unmount的过程。其他 Vue2 中的生命周期仍然保留。上边生命周期图中并没包含全部的生命周期钩子， 还有其他的几个， 全部生命周期钩子如图所示：

我们可以看到beforeCreate和created被setup替换了（但是 Vue3 中你仍然可以使用， 因为 Vue3 是向下兼容的， 也就是你实际使用的是 vue2 的）。其次，钩子命名都增加了on; Vue3.x 还新增用于调试的钩子函数onRenderTriggered和onRenderTricked 下面我们简单使用几个钩子， 方便大家学习如何使用，Vue3.x 中的钩子是需要从 vue 中导入的：

import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,  onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked,  onRenderTriggered } from "vue"; export default defineComponent({ //  beforeCreate和created是vue2的 beforeCreate() {  console.log("------beforeCreate-----"); }, created() {  console.log("------created-----"); }, setup() { console.log("------setup-----");  // vue3.x生命周期写在setup中 onBeforeMount(() => {  console.log("------onBeforeMount-----"); }); onMounted(() => {  console.log("------onMounted-----"); }); // 调试哪些数据发生了变化  onRenderTriggered((event) =>{ console.log("------onRenderTriggered-----",event);  }) }, });

关于生命周期相关的内容就介绍到这里，下面我们介绍一下 Vue3.x 中watch有什么不同。

watch 与 watchEffect 的用法

watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。

watch(source, callback, [options])

参数说明：

•  source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量

•  callback: 执行的回调函数

•  options：支持 deep、immediate 和 flush 选项。

接下来我会分别介绍这个三个参数都是如何使用的， 如果你对 watch 的使用不明白的请往下看：

侦听 reactive 定义的数据

import { defineComponent, ref, reactive, toRefs, watch } from "vue";  export default defineComponent({    setup() {      const state = reactive({ nickname: "xiaofan", age: 20 });      setTimeout(() => {        state.age++;     }, 1000);      // 修改age值时会触发 watch的回调      watch(        () => state.age,        (curAge, preAge) => {          console.log("新值:", curAge, "老值:", preAge);        }      );      return {       ...toRefs(state),      };    },  });

侦听 ref 定义的数据

const year = ref(0);  setTimeout(() => {    year.value++;  }, 1000);  watch(year, (newVal, oldVal) => {    console.log("新值:", newVal, "老值:", oldVal);  });

侦听多个数据

上面两个例子中，我们分别使用了两个 watch, 当我们需要侦听多个数据源时， 可以进行合并， 同时侦听多个数据：

watch([() => state.age, year], ([curAge, newVal], [preAge, oldVal]) => { console.log("新值:", curAge, "老值:", preAge); console.log("新值:", newVal, "老值:", oldVal); });

侦听复杂的嵌套对象

我们实际开发中，复杂数据随处可见， 比如：

const state = reactive({    room: {      id: 100,      attrs: {        size: "140平方米",        type: "三室两厅",      },    },  });  watch(   () => state.room,    (newType, oldType) => {      console.log("新值:", newType, "老值:", oldType);    },    { deep: true }  );

如果不使用第三个参数deep:true， 是无法监听到数据变化的。前面我们提到，默认情况下，watch 是惰性的, 那什么情况下不是惰性的， 可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置immediate: true即可。关于flush配置，还在学习，后期会补充

stop 停止监听

我们在组件中创建的watch监听，会在组件被销毁时自动停止。如果在组件销毁之前我们想要停止掉某个监听， 可以调用watch()函数的返回值，操作如下：

const stopWatchRoom = watch(() => state.room, (newType, oldType) => {      console.log("新值:", newType, "老值:", oldType);  }, {deep:true}); setTimeout(()=>{      // 停止监听      stopWatchRoom()  }, 3000)

还有一个监听函数watchEffect, 在我看来watch已经能满足监听的需求，为什么还要有watchEffect呢？虽然我没有 get 到它的必要性，但是还是要介绍一下watchEffect，首先看看它的使用和watch究竟有何不同。

import { defineComponent, ref, reactive, toRefs, watchEffect } from "vue";  export default defineComponent({    setup() {      const state = reactive({ nickname: "xiaofan", age: 20 });      let year = ref(0)      setInterval(() =>{          state.age++          year.value++      },1000)      watchEffect(() => {          console.log(state);          console.log(year);        }      );      return {          ...toRefs(state)      }    },  });

执行结果首先打印一次state和year值；然后每隔一秒，打印state和year值。从上面的代码可以看出， 并没有像watch一样需要先传入依赖，watchEffect会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。所以总结对比如下：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  watchEffect 不需要手动传入依赖

3.  watchEffect 会先执行一次用来自动收集依赖

4.  watchEffect 无法获取到变化前的值， 只能获取变化后的值

上面介绍了 Vue3 Composition API的部分内容, 还有很多非常好用的 API, 建议直接查看官网 composition-api。其实我们也能进行自定义封装。

自定义 Hooks

开篇的时候我们使用 Vue2.x 写了一个实现加减的例子， 这里可以将其封装成一个 hook, 我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。useCount.ts 实现：

import { ref, Ref, computed } from "vue";  type CountResultProps = {    count: Ref;    multiple: Ref;    increase: (delta?: number) => void;    decrease: (delta?: number) => void;  }; export default function useCount(initValue = 1): CountResultProps {    const count = ref(initValue);    const increase = (delta?: number): void => {      if (typeof delta !== "undefined") {        count.value += delta;      } else {        count.value += 1;      }    };    const multiple = computed(() => count.value * 2);    const decrease = (delta?: number): void => {      if (typeof delta !== "undefined") {        count.value -= delta;      } else {        count.value -= 1;      }    };    return {      count,      multiple,      increase,      decrease,    };  }

接下来看一下在组件中使用useCount这个 hook:

    import useCount from "../hooks/useCount";   setup() {      const { count, multiple, increase, decrease } = useCount(10);          return {              count,              multiple,              increase,              decrease,          };      },  

开篇 Vue2.x 实现，分散在data,method,computed等， 如果刚接手项目，实在无法快速将data字段和method关联起来，而 Vue3 的方式可以很明确的看出，将 count 相关的逻辑聚合在一起， 看起来舒服多了， 而且useCount还可以扩展更多的功能。项目开发完之后，后续还会写一篇总结项目中使用到的「自定义 Hooks 的文章」，帮助大家更高效的开发， 关于Composition API和自定义 Hooks 就介绍到这里， 接下来简单介绍一下 vue2.x 与 vue3 响应式对比。

简单对比 vue2.x 与 vue3.x 响应式

其实在 Vue3.x 还没有发布 bate 的时候， 很火的一个话题就是Vue3.x 将使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。没有无缘无故的爱，也没有无缘无故的恨。为何要将Object.defineProperty换掉呢，咋们可以简单聊一下。我刚上手 Vue2.x 的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用$set更新，什么时候用$forceUpdate强制更新，你是否也一度陷入困境。后来的学习过程中开始接触源码，才知道一切的根源都是 Object.defineProperty。对这块想要深入了解的小伙伴可以看这篇文章 为什么 Vue3.0 不再使用 defineProperty 实现数据监听？要详细解释又是一篇文章，这里就简单对比一下Object.defineProperty 与 Proxy

  1.  Object.defineProperty只能劫持对象的属性， 而 Proxy 是直接代理对象

由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是 Proxy 直接代理对象， 不需要遍历操作

  2.  Object.defineProperty对新增属性需要手动进行Observe

因为Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用Object.defineProperty进行劫持。也就是 Vue2.x 中给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式的, $set内部也是通过调用Object.defineProperty去处理的。

Teleport

Teleport 是 Vue3.x 新推出的功能， 没听过这个词的小伙伴可能会感到陌生；翻译过来是传送的意思，可能还是觉得不知所以，没事下边我就给大家形象的描述一下。

Teleport 是什么呢？

Teleport 就像是哆啦 A 梦中的「任意门」，任意门的作用就是可以将人瞬间传送到另一个地方。有了这个认识，我们再来看一下为什么需要用到 Teleport 的特性呢，看一个小例子：在子组件Header中使用到Dialog组件，我们实际开发中经常会在类似的情形下使用到 Dialog ，此时Dialog就被渲染到一层层子组件内部，处理嵌套组件的定位、z-index和样式都变得困难。Dialog从用户感知的层面，应该是一个独立的组件，从 dom 结构应该完全剥离 Vue 顶层组件挂载的 DOM；同时还可以使用到 Vue 组件内的状态（data或者props）的值。简单来说就是,即希望继续在组件内部使用Dialog, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中。此时就需要 Teleport 上场，我们可以用包裹Dialog, 此时就建立了一个传送门，可以将Dialog渲染的内容传送到任何指定的地方。接下来就举个小例子，看看 Teleport 的使用方式

Teleport 的使用

我们希望 Dialog 渲染的 dom 和顶层组件是兄弟节点关系, 在index.html文件中定义一个供挂载的元素: