搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）

作为一个刚刚入行工作不久的前端菜鸟&＃xff0c;Vue2.x都没整熟练。但看着身边人都在学习Vue3&＃xff0c;我也不敢怠慢&＃xff0c;毕竟Vue3正式版已经发布两个月了&＃xff0c;我还是耐着性子好好的阅读了一下Vue3.0的文档。没有其他大佬们上来就看源码的气势&＃xff0c;但我还是想做个学习笔记&＃xff0c;至少先做个API调用师吧。

为啥又得掉头发&＃xff0c;搞学习了&＃xff1f;

为什么要学习Vue3.0&＃xff0c;它和Vue2.x有哪些异同之处&＃xff1f;我带着这个问题&＃xff0c;开始了自己的学习。这几天学完后的感受&＃xff0c;我总结了一下&＃xff0c;大概有如下几点吧。

1. 首先&＃xff0c;Vue3.0使用TypeScript写的&＃xff0c;对TypeScript兼容更好&＃xff0c;但是对于Vue之前的语法并没有进行颠覆性的改变&＃xff0c;你如果使用Vue2.x的语法&＃xff0c;各种还能写&＃xff0c;但是建议还是不要套着Vue3.0壳&＃xff0c;去写Vue2。

2. Vue3.0最大的升级就是不再限制于Options API&＃xff0c;可以使用了Composition API&＃xff0c;啥意思呢&＃xff1f;以前写一个组件&＃xff0c;需要写data、methods、watch、computed&＃xff0c;写一个功能需要反复横跳&＃xff0c;一会儿去data里找数据&＃xff0c;一会儿去methods里找方法。而现在有了组合式API&＃xff0c;你可以将data、methods等等搞在一块&＃xff0c;单独封装调用&＃xff0c;功能的抽离更加方便。

3. 搞明白了this。以前写的时候不论找谁&＃xff0c;都先搞个this.放这里&＃xff0c;至于后面的内容何时何地挂在到了this上&＃xff0c;摸鱼工程师是不管的。如果是一份祖传代码&＃xff0c;还写了一大堆的Mixin混入的话&＃xff0c;this就彻底成为了一个黑盒&＃xff0c;不去深究谁也不知道里面发生了&＃xff0c;但摸鱼工程师还不怕&＃xff0c;调就完事了。Vue3.0最重要的API&＃xff0c;setup()就可以很好的解决this的问题。

哪些内容最重要&＃xff1f;

一、 setup

1. setup作为Vue3.0组合API的统一入口函数&＃xff0c;它的调用是在beforeUpdate生命周期之前&＃xff0c;所以在调用setup函数时还没有生成实例&＃xff0c;setup里是就没有this可以调用。
2. setup里有两个参数&＃xff0c;一个是props&＃xff0c;一个是ctx,props用来获取属性&＃xff0c;比如父组件给子组件传值&＃xff0c;在子组件中就用props获取&＃xff0c;ctx获取方法和其他内容。
3. 在setup里定义的状态、方法都要用return返回&＃xff0c;只有return过才能在组件里进行动态响应。

// 父组件
import { ref, defineComponent } from &＃39;vue&＃39;
import Son from &＃39;&＃64;/components/provide/Son.vue&＃39;
export default defineComponent({components: { Son },setup() {const username &＃61; ref(&＃39;小明&＃39;)return { username }}
})// 子组件
import { defineComponent } from &＃39;vue&＃39;
export default defineComponent({props: [&＃39;username&＃39;],setup(props) {console.log(props.username)}
})

二、 ref、reactive和toRefs

这两个API都是用来设置初始值的&＃xff0c;两个用法有点小差异&＃xff0c;都需要先解构才能使用。首先说ref&＃xff0c;ref直接包含初始值就可以&＃xff0c;但是在调用的时候一定记得是.value的形式&＃xff0c;如果要在组件中动态响应&＃xff0c;那么还要return。比如&＃xff1a;

// 可以定义一个name
imoprt {defineComponent, ref} from &＃39;vue&＃39;
export default defineComponent({setup() {const name &＃61; ref(&＃39;青山&＃39;)console.log(name.value) // 青山return {name}}
})

而reactive包裹的是一个对象&＃xff0c;使用它之前也需要先从vue中解构&＃xff0c;用xx.yy来调用&＃xff0c;也要return出去才能使用&＃xff0c;但是注意&＃xff0c;reactive不能够直接导出&＃xff0c;当有多个属性值时&＃xff0c;可以使用toRefs来处理&＃xff0c;将reactive对象转换成ref类型。如果直接导出&＃xff0c;数据是不能响应的。例如&＃xff1a;

imoprt {defineComponent, reactive, toRefs} from &＃39;vue&＃39;
export default defineComponent({setup() {const data &＃61; reactive({state: [&＃39;青山&＃39;,&＃39;隐隐&＃39;,&＃39;绿水&＃39;,&＃39;悠悠&＃39;],selectState: &＃39;&＃39;,selectFun: (index: number)&＃61;>{data.selectState &＃61; data.state[index];}})const refData &＃61; toRefs(data)return { ...refData }}
})


三、isRef

isRef是用来判断创建的数据是否为ref类型&＃xff0c;是的话就是true&＃xff0c;如果不是&＃xff0c;例如reactive就是false。通过使用toRefs来转换reactive类型&＃xff0c;可以把reactive对象中的属性转换为ref&＃xff0c;下面的例子可以看出。

const data &＃61; reactive({count : 0})const count &＃61; ref(0)console.log(isRef(count)) // trueconsole.log(isRef(data)) // falseconsole.log(isRef(data.count)) // falseconst refData &＃61; toRefs(data)console.log(isRef(refData.count)) // true


四、生命周期

• setup() :开始创建组件之前&＃xff0c;在beforeCreate和created之前执行。创建的是data和method
• onBeforeMount() : 组件挂载到节点上之前执行的函数。
• onMounted() : 组件挂载完成后执行的函数。&＃xff08;以上初始化阶段&＃xff09;
• onBeforeUpdate(): 组件更新之前执行的函数。
• onUpdated(): 组件更新完成之后执行的函数。&＃xff08;更新阶段&＃xff09;
• onBeforeUnmount(): 组件卸载之前执行的函数。
• onUnmounted(): 组件卸载完成后执行的函数。 &＃xff08;卸载阶段&＃xff09;清除计时器&＃xff0c;定时器&＃xff0c;清除绑定事件&＃xff0c;window、document上的事件&＃xff0c;清除第三方实例释放内存。
• onActivated(): 被包含在中的组件&＃xff0c;会多出两个生命周期钩子函数。被激活时执行。
• onDeactivated(): 比如从 A 组件&＃xff0c;切换到 B 组件&＃xff0c;A 组件消失时执行。
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。&＃xff08;错误捕获&＃xff09;

五、computed 计算属性

• 计算属性的基本使用&＃xff0c;首先创建一个只读的计算属性。Vue3.0使用计算属性也要先解构出来

import {ref, computed} from &＃39;vue&＃39;
export default {setup() {const state &＃61; ref(&＃39;hello world&＃39;)const split &＃61; computed(() &＃61;> state.value.split(&＃39;&＃39;))return { state, split }}
}


• 计算属性的get & set方法使用。通过get方法可以获取数据&＃xff0c;通过set方法设置。比如下面的例子&＃xff0c;可以通过get方法return出computed&＃xff0c;可以通过set方法对计算属性进行处理。

姓&＃xff1a;
名&＃xff1a;
全名&＃xff1a;import {ref, computed} from &＃39;vue&＃39;
export default {setup() {const firstName &＃61; ref(&＃39;&＃39;);const lastName &＃61; ref(&＃39;&＃39;);const fullName &＃61; computed({get() {return firstName.value &＃43; lastName.value},set(val) {firstName.value &＃61; val.slice(0,1)lastName.value &＃61; val.slice(1)}})return { firstName, lastName, fullName }}
}


六、Watch侦听

• watch的使用也需要解构。
• 单一数据的侦听&＃xff0c;如果是一个ref类型&＃xff0c;第一个参数直接写数据名&＃xff0c;第二个参数是回调。

import {watch} from &＃39;vue&＃39;
watch(state,()&＃61;>{})


• 单一数据的侦听&＃xff0c;如果是一个reactive类型&＃xff0c;第一个参数写成返回某个属性值。

watch(()&＃61;> state.number,(number, preNumber) &＃61;> {console.log(number, preNumber)}
)


• 侦听多个数据源&＃xff0c;第一个参数用数组&＃xff0c;两种类型都有的情况下&＃xff0c;ref类型和reactive类型的写法同上。

watch([number, ()&＃61;> state.count],(number, preNumber) &＃61;> {console.log(number, preNumber)})


• 清除侦听&＃xff0c;可以给watch定义一个变量&＃xff0c;在事件中调用即可。

const watchStop &＃61; watch([number, ()&＃61;> state.count],(number, preNumber) &＃61;> {console.log(number, preNumber)}
)
const removeWatch &＃61; ()&＃61;>{watchStop()
}


• watchEffect&＃xff0c;传入的函数会立即执行并侦听依赖值的变化&＃xff0c;如果依赖值变化便会执行。

import { toRefs, reactive, watchEffect } from &＃39;vue&＃39;
export default {setup () {const data &＃61; reactive({count: 1,total: 999})const refData &＃61; toRefs(data)/**1. 传入的函数立即执行2. 当watchEffect传入的函数依赖值有变化时&＃xff0c;会再次触发watchEffect函数*/watchEffect(() &＃61;> {console.log(data.count)})setTimeout(() &＃61;> {data.count &＃61; data.count &＃43; 2 // 【会】触发watchEffect函数data.total &＃61; data.total &＃43; 2 // 【不会】触发watchEffect函数}, 2000)return {...refData}}
}


七、Teleport

• 瞬移组件或者传送组件&＃xff0c;可以将组件独立于Vue组件之外&＃xff0c;直接挂载在body下&＃xff0c;但仍受Vue的控制。大大的提高了组件的可复用性和封装性。

• 也可以直接在index.html中留下&＃xff0c;组件里to属性绑定id

// index.html


八、Suspense

• suspense的英文是“悬念”&＃xff0c;它提供了两个template插槽分别返回异步组件成功或者失败的结果。