Vue3.0 新特性以及使用变更总结
Vue3.0 在2020年9月正式发布了，也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发，这篇文章就是在使用后的一个总结， 包含Vue3新特性的使用以及一些用法上的变更。
图片.png
为什么要升级Vue3
使用Vue2.x的小伙伴都熟悉，Vue2.x中所有数据都是定义在data中，方法定义在methods中的，并且使用this来调用对应的数据和方法。那Vue3.x中就可以不这么玩了， 具体怎么玩我们后续再说， 先说一下Vue2.x版本这么写有什么缺陷，所以才会进行升级变更的。
回顾Vue2.x实现加减
count: {{ count }}
倍数： {{ multiple }}
加1
减一
上面代码只是实现了对count的加减以及显示倍数， 就需要分别在data、methods、computed中进行操作，当我们增加一个需求，就会出现下图的情况：
当我们业务复杂了就会大量出现上面的情况， 随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：
甚至一个功能还有会依赖其他功能，全搅合在一起。
当这个组件的代码超过几百行时，这时增加或者修改某个需求， 就要在data、methods、computed以及mounted中反复的跳转，这其中的的痛苦写过的都知道。
那我们就想啊， 如果可以按照逻辑进行分割，将上面这张图变成下边这张图，是不是就清晰很多了呢, 这样的代码可读性和可维护性都更高：
那么vue2.x版本给出的解决方案就是Mixin, 但是使用Mixin也会遇到让人苦恼的问题：
-
命名冲突问题
-
不清楚暴露出来的变量的作用
-
逻辑重用到其他 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之前执行，详细的可以看后面生命周期讲解。
::: warning 由于在执行setup 时尚未创建组件实例，因此在 setup 选项中没有 this。:::
setup 参数
使用setup时，它接受两个参数：
-
props: 组件传入的属性
-
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(() =>{
obj.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对象的普通对象。具体使用方式如下：
第 {{ year }} 年
姓名： {{ nickname }}
年龄： {{ age }}
生命周期钩子
我们可以直接看生命周期图来认识都有哪些生命周期钩子(图片是根据官网翻译后绘制的)：
从图中我们可以看到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, preAge], [newVal, 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会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。所以总结对比如下：
-
watchEffect 不需要手动传入依赖
-
watchEffect 会先执行一次用来自动收集依赖
-
watchEffect 无法获取到变化前的值， 只能获取变化后的值
::: danger 留一个思考题：如果定义一个非响应式的值， watch和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:
count: {{ count }}
倍数： {{ multiple }}
加1
减一
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 还没有发布beta的时候， 很火的一个话题就是Vue3.x 将使用Proxy 取代Vue2.x 版本的 Object.defineProperty。
没有无缘无故的爱，也没有无缘无故的恨。为何要将Object.defineProperty换掉呢，咋们可以简单聊一下。
我刚上手Vue2.x的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用$set更新，什么时候用$forceUpdate强制更新，你是否也一度陷入困境。后来的学习过程中开始接触源码，才知道一切的根源都是 Object.defineProperty。
对这块想要深入了解的小伙伴可以看这篇文章 为什么Vue3.0不再使用defineProperty实现数据监听？要详细解释又是一篇文章，这里就简单对比一下Object.defineProperty 与Proxy
-
Object.defineProperty只能劫持对象的属性， 而Proxy是直接代理对象
由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是Proxy直接代理对象， 不需要遍历操作
-
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文件中定义一个供挂载的元素:
定义一个Dialog组件Dialog.vue, 留意 to 属性， 与上面的id选择器一致：
{{title}}
