背景
延续前面的四篇文章：
看完上面其实可以自己开发vue3.0了，但是这里介绍一下vue组合式API，东西不多
setup
- 作为在组件内使用 Composition API 的入口点
- 传入参数：props,{slot,emit,attr}
- 时机：创建组件实例=>初始化props=>调用setup（在beforeCreate钩子之前调用）
- setup 返回的 ref 在模板中会自动解开，不需要写 .value
- this在setup函数中不可用
// html
//点击count+1
<template>
<div class="demo">
<span @click="addCount">{{count}}</span>
</div>
</template>
//ts
<script lang="ts">
import {ref} from 'vue'
export default {
name: 'demo',
setup(props,{slot,emit,attr}){
const count = ref(0)
const addCount = ()=>{
count.value++
}
return {count,addCount}
}
}
</script>
- 相同逻辑jsx写法（demo.vue组件）
- 相同逻辑使用render API（demo.vue组件）
- defineComponent（demo.ts组件）
响应式系统API
-
reactive与ref
- reactive接收一个普通对象然后返回该普通对象的响应式代理,类似2.0的Vue.observable()
- ref接受一个参数值并返回一个响应式且可改变的 ref 对象
- 打印ref对象和reactive对象
-
computed
const count = ref(1)
//也可只传入一个 const plusOne = computed(() => count.value + 1)
//传入get或者set属性，
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
},
})
- readonly(传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理)
- watchEffect
- 立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
//初始化运行是在组件 mounted 之前执行的 初始化时就会执行一次 建议写在onMounted钩子内 watchEffect(() => console.log(count.value))- 可传入option
interface WatchEffectOptions { //设置function需要同步或在组件更新之前重新运行，默认post flush?: 'pre' | 'post' | 'sync' //onTrack 和 onTrigger 选项可用于调试一个debugger的行为。 //当一个 reactive 对象属性或一个 ref 作为依赖被追踪时，将调用 onTrack //依赖项变更导致副作用被触发时，将调用 onTrigger onTrack?: (event: DebuggerEvent) => void onTrigger?: (event: DebuggerEvent) => void } - 停止监听行为和停止回调
const stop = watchEffect((onInvalidate) => { console.log(count.value) onInvalidate(()=>{ console.log('watchEffect结束') }) }) stop() //停止 - watch
//与watchEffect相比
1. 懒执行回调函数
2. 更明确哪些状态的改变会触发侦听器重新运行副作用
3. 访问侦听状态变化前后的值
4. 初始化时就不会执行
生命周期钩子
| 2.0 | 3.0 |
|---|---|
| beforeCreate | 使用 setup() |
| created | 使用 setup() |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
依赖注入
功能类似 2.x 的 provide/inject，只能在setup中调用
// 两者之间可以相互响应
// 提供者：
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)
// 使用者：
const theme = inject(ThemeSymbol, ref('light'))
watchEffect(() => {
console.log(`theme set to: ${theme.value}`)
})
模版refs
类似在vue2.0里面的this.$refs，但是用法已经变了
//html
<div class="demo" ref="demo">
<span @click="addCount">{{count}}--{{countObject.count}}</span>
</div>
//setup
const demo = ref(null)
onMounted(()=>{
//只在渲染初始化后才能访问。
console.log(demo.value)
})
// 获取list的refs
<div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
{{ item }}
</div>
响应式系统utils
- isRef与unref
//isRef 检查一个值是否为一个 ref 对象。
//unref是val = isRef(val) ? val.value : val 的语法糖
-
toRef与toRefs
在介绍setup中，props作为参数传入，这里的props不可用解构的方式获取，不然会失去响应性
// toRef 可以用来为一个 reactive 对象的属性创建一个 ref
const countObject = reactive({count:0})
const countinObject = toRef(countObject,'count')
//props获取单独的数据，并保持响应性
const propsCount = toRef(props, 'count')
//toRefs 把响应式对象转化为一个个的ref
const state = reactive({
foo: 1,
bar: 2,
})
const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型如下:
{
foo: Ref<number>,
bar: Ref<number>
}
*/
- isProxy，isReactive，isReadonly
1. isProxy判断一个对象是否是由 reactive 或者 readonly 方法创建的代理
2. isReactive判断一个对象是否是由 reactive 创建的响应式代理
3. isReadonly判断一个对象是否是由 readonly 创建的只读代理
高级响应式系统API
- customRef：自定义ref，显式地控制依赖追踪和触发响应
- markRaw与shallowXX
//markRow与下面的 shallowXXX 这些特性仅停留在根级别（即对象的第一层，深层次的不影响）
//1. markRaw:标记一个对象为“永远不会转为响应式代理”，函数返回这个对象本身
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 如果被 markRaw 标记了，即使在响应式对象中作属性，也依然不是响应式的
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false
// 2.shallowReactive：只为某个对象的私有（第一层）属性创建浅层的响应式代理
// 3.shallowReadonly：只为某个对象的自有（第一层）属性创建浅层的只读响应式代理
// 4.shallowRef：创建一个 ref
//注意：shallowRef并不会对变更后的 .value 做响应式代理转换
const foo = shallowRef({})
// 更改对操作会触发响应
foo.value = {}
// 但上面新赋的这个对象并不会变为响应式对象
isReactive(foo.value) // false
//5. toRow 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象
最后
vue3.0到这里算是尝鲜差不错了，喜欢就点赞哟，溜啦溜啦！
github代码地址
