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

码农天地 - 2020-09-25 16:10:31

---

背景

延续前面的四篇文章：

尝鲜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 在模板中会自动解开，不需要写 .valuethis在setup函数中不可用

// html
//点击count+1
<template>
  <div >
    <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.0beforeCreate使用 setup()created使用 setup()beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmountederrorCapturedonErrorCaptured依赖注入

功能类似 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  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

isProxy判断一个对象是否是由 reactive 或者 readonly 方法创建的代理isReactive判断一个对象是否是由 reactive 创建的响应式代理

isReadonly判断一个对象是否是由 readonly 创建的只读代理

高级响应式系统APIcustomRef：自定义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代码地址

Tags 标签