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.
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.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基本是一致的，只是写法发生了变化。
