尝鲜vue3.0- 扶我起来学一下组合式API(5)

3,122 阅读4分钟

背景

延续前面的四篇文章:

看完上面其实可以自己开发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.03.0
beforeCreate使用 setup()
created使用 setup()
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured

依赖注入

功能类似 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代码地址