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

背景

延续前面的四篇文章：

• 尝鲜vue3.0-从ToDoList开始（1）
• 尝鲜vue3.0-了解变化(2)
• 尝鲜vue3.0-tyepscript开发组件(3)
• 尝鲜vue3.0- 看完就开干（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.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代码地址