尝鲜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代码地址