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

背景

延续前面的四篇文章:

看完上面其实可以自己开发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代码地址

阅读 131

推荐阅读
vue3尝鲜之旅
用户专栏

前端工程师

0 人关注
6 篇文章
专栏主页