【千字长文，熬夜更新，原创不易，多多支持，感谢大家】
前言
小伙伴们大家好。为期近半个月的TypeScript分享到这里就结束了，当然了前面关于TypeScript的分享都是一些表面的基础知识，想要更深入的了解还需要多学多练多看源码，本猴就不再做过多分享了。
从今天开始将为小伙伴们奉上关于Vue3.0相关知识的一些分享。vue3.0相较于vue2.0还是有很大的改变的，个人感觉vue3.0的用法更接近于react的了。至于一些语法指令啥的相较于2.0没有什么变化，这里就不再分享了。那么我们要学习的是3.0中的一些变化和新的技术点，下面我们先从vue3.0的使用开始。
vue3.0的使用
vue3.0中从vue的初始化开始就已经发生了改变。我们都知道在2.0中是通过 new Vue() 的形式来创建一个vue实例的，而在3.0中则是借助一个方法createApp() 来实现的。3.0中最直观的变化就是采用了函数式编程，几乎所有的操作都是基于函数的。因此我们在使用时要先从Vue中导入它们，然后再去使用。接下来我们就从利用createApp函数创建vue的实例开始。
- createApp函数接收一个对象参数，对象中可以包含数据模型等信息
- createApp函数的返回值就是一个vue的实例，然后就可以通过vue的实例进行一些相关操作，比如注册全局组件，注册全局指令等
// main.js
import {
createApp} from 'vue';
const app = createApp({
data(){
return {
message:'hello vue3.0'
}
}
});
app.component('xxx',xxx);//注册全局组件
app.directive('xxx',xxx);//注册全局指令
app.use(xxx);//引用其他组件
app.mount('#app');
//上面是分开写的，也可以直接写成连点的形式
createApp().component().directive().use().mount('#app')
vue3.0 组合式API
在vue3.0中提出了组合式API的概念，那么什么是组合式API呢？
组合式API：一种低侵入式的，函数式的API，使得我们能够更灵活方便的组合组件逻辑，同时能够将同一个逻辑关注点相关代码收集在一起，这样当我们再去查找某个逻辑时就不用再滚动条拉来拉去了。
下面我们来看下在vue2.0中的一个场景：在2.0里面的**export default{}**通常是由components、props、data()、computed、watch、methods、mounted、created()等这些成员组成。我们都知道一些数据属性一般都会写在data()中，而一些方法通常定义在methods中，然后再在这些方法中通过this来使用data()中的数据属性。如果一个组件代码量比较少还没什么问题，但是一旦遇到一个大型组件，光js代码就成千上万行，想想如果我们想看看data中的属性都在哪些方法中用到了，这时麻烦就来了，我们不得不上上下下来来回回拖动滚动条来查看，尤其是对于那些没有编写过这些组件的人来说，会更加导致对组件的难以阅读和理解。以下是vue官方给出的一个大型组件的示例图，其中不同色块代表的就是不同的逻辑关注点：
这种碎片化使得理解和维护复杂组件变得困难，因此在3.0中提出了组合式API的概念。知道了组合式API的作用和优点，下面我们就一起来看下如何使用组合式API
setup
为了能够让我们更方便的使用组合式API，vue3.0为我们提供了一个新的组件选项：setup。setup选项是一个接收两个参数props和context的函数。该函数将作为组合式API的入口。在setup选项中我们可以定义响应式数据属性，注册组件的生命周期函数，定义计算属性，监听属性等等，也就是说大部分代码我们都可以写在setup选项中，最后再将这些响应式的数据通过return的形式暴露给外部或者模板使用。下面来我们梳理一下setup选项的一些特点及注意事项：
- setup是一个接收2个参数的函数props和context
- props：props是setup的第一个参数，该参数是响应式的，因此不能用ES6进行解构，因为会消除它的响应式
- context：context是setup的第二个参数，context是JavaScript中的一个普通对象，它不是响应式的可以放心的使用ES6结构。context对外暴露了一些可能会用到的值，比如：attrs、slots、emit、expose等
- setup函数中不能使用this，因为这里this并不会找到vue的实例
- 所有的数据属性，计算属性，方法，生命周期钩子函数等都可以直接定义在setup函数中
- 如果想要在组件的其余部分（如计算属性，方法，生命周期钩子函数等）或者组件模板中使用setup中的数据，则需要通过return的形式把被使用的数据暴露出去
- setup中无法获取data()，methods和computed中的成员，因为setup的调用是发生在这些属性被解析之前的
- setup是围绕beforeCreate和created生命周期钩子运行的，因此在3.0中移除了这两个钩子函数，而原本应该写在这两个函数中的代码也都可以直接写在setup函数中
- 在setup函数中定义的数据属性默认都不是响应式的，如果想要声明响应式的数据属性则需借助ref或者reactive两个函数来实现
下面看下使用了setup后的vue代码：
import {
ref } from 'vue'
export default{
components:{
},
props:{
title},
setup(props,context){
let message = ref('hello world')//定义一个响应式的变量
const getTitle = ()=>{
console.log('title')}//定义一个普通函数
onMounted(getTitle);//调用生命周期函数
//所有需要给模板或其它钩子函数使用的都需要在这里暴露出去
return {
message,
getTitle
}
}
}
ref
上面说到在setup中声明的变量默认都不是响应式的，而我们知道vue最大特点就是响应式的数据驱动，如果升级了vue3就没了响应式这显然是不合理的。于是在vue3中就为我们提供了两个方法ref和reactive可以让数据变为响应式，我们先来看ref。
- ref是一个函数使用前需要在vue中导入
- ref可接收一个参数作为变量的默认值
- ref的返回值是一个响应式的带有value属性的对象，然后可以通过该value属性访问或者修改响应式变量的值
- 用ref定义的变量，如果在模板中使用则可以直接使用变量名，如果是在JavaScript中使用则需要通过 【变量名.value】 的形式进行访问或修改
import {
ref } from 'vue'
export default{
setup(){
let count = ref(0) //定义一个默认值为0的响应式变量count
onMounted(()=>{
count.value = 100//在onMounted钩子函数中修改count变量的值（需要通过value属性修改）
});
// 将响应式变量count暴露出去
return{
count
}
}
}
<!--在模板中可以直接使用count变量，不需要通过.value的形式-->
<div>{
{count}}</div>
reactive
上面我们学到通过ref函数可以创建一个响应式的变量。不知有没有小伙伴发现，通过ref创建的变量除了访问和修改都需要通过点value的形式外，还有一点就是ref一次只能创建一个响应式变量，那么问题来了一个组件不可能只有一个或者几个变量。如果都用ref来创建那也太麻烦了。诶，别急，vue大佬们早就想到这一点了，于是又给我们提供了一个非常哇塞的方法-reactive，有了这个哇塞的方法后，我们就可以想定义多少就定义多少了，而且访问和修改也不需要通过点value的形式了。下面我们就看看这个哇塞的方法是怎么使用的吧。
import {
reactive } from 'vue'
export default {
setup(){
const state = reactive({
name:'',
title:'',
message:''
})
return {
...toRefs(state)
}
}
}
上面代码我们定义了一个响应式对象state，然后再将该对象的所有属性暴露出去。注意这里用到了另外一个方法toRefs，目的是为了在解构state时不会失去响应式。
总结
本文我们简单介绍了2.0中选项式API的一些缺点，分享了vue3.0带来的一些新变化，以及3.0中组合式API的使用以及组合式API给我们开发和维护带来的好处。最后还分享了几个组合式API常用的方法setup，ref和reactive。
关于vue3.0组合式API的相关知识就分享到这里了。喜欢的小伙伴换衣点赞留言加关注哦