最近项目是用vue3写的，所以用了三个月vue3和vue2的结合的写法后。终于才自己花时间做了一篇关于vue3运用和学习的文档。

写法上：

首先vue2的template结构单就结构来说，数据的声明在data中，逻辑写在methods里。如果页面结构过于复杂，就会出现来回上下翻页查看定义的数据和引用的函数，很不方便。而vue3的则都在setup中定义，很是方便，也不用在考虑this的问题。

其次vue2一次性引入了所有API及生命周期等,而vue3则和react一样，需要用到哪个就引入哪个，更注重性能的提升。

vue3的API

vue3最大的亮点应该就就是Composition API (组合式API)了，用到什么就引入什么，大大提升了性能，同时也提高了页面的可读性。

关于vue3的API ：

reactive: 主要用于声明复杂的响应式对象，他通过返回一个proxy对象，使数据与原数据解绑依赖关系。

toRaw: 返回由reactive或readonly方法转换成响应式代理的普通对象，这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。

ref：主要声明简单数据类型，ref通过创建一个深度property对象实现响应式，并通过.value可以获取它的值。

unref：如果传入一个ref对象，则将其转换成普通对象，否则返回自身。

toRefs：将响应式对象转换为普通对象，在setup的return函数里调用toRefs转换响应式对象为普通对象供页面渲染。

computed：计算属性

const state = computed(() => count + 1)

或者：

const state = computed({

get: () => count + 1,

set: val => {

count = val - 1

}

})

watch：惰性侦听数据源的变化并执行副作用函数

// 侦听单个源

const count = ref(0)

watch(count, (count, prevCount) => {

/* 副作用 */

})

// 侦听多个源

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {

/* 副作用 */

})

// 关于复杂数据类型，watch还提供了第三个参数{deep: true, immediate: true},加上deep开启深度监听，immediate：开启首次监听

watch(() => state.object, () => {}, { deep: true } )

watchEffect: 与react的useEffect类似，会对其依赖进行侦听，一旦依赖项发生变化，则立即重新调用，与react不同的是不用传递依赖项到watchEffect中。

生命周期钩子：

setup：代替了原本的beforeCreate和created。

依赖注入：

provide/inject与vue2的用法类似，只是在setup函数里调用

组件传参：props需要在setup外部注册，并在setup函数的第一个参数接收，setup(props)，emit接收的方法也需要在setup外部注册并在setup(props, {emit}),在第二个参数里接收。

另一种在script标签上加setup的写法，这时setup函数和return都可以直接省略了。组件的引用命名采用大驼峰，同时不需要再去注册，引入后直接使用。

组件之间的传参也不在通过原先的props和emits来获取，而是通过vue暴露出来的defineProps,和defineEmits里面获取：