嚐鮮vue3.0- 扶我起來學一下組合式API（5）

時間 2020-12-01

標籤 html vue react git github segmentfault dom ide 函數 post 欄目 HTML 简体版

原文原文鏈接

背景

延續前面的四篇文章：html

看完上面其實能夠本身開發vue3.0了，可是這裏介紹一下vue組合式API，東西很少vue

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與refreact
- reactive接收一個普通對象而後返回該普通對象的響應式代理,相似2.0的Vue.observable()

ref接受一個參數值並返回一個響應式且可改變的 ref 對象
打印ref對象和reactive對象

computedgit

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，返回一個原始對象的只讀代理)

watchEffectgithub

當即執行傳入的一個函數，並響應式追蹤其依賴，並在其依賴變動時從新運行該函數。segmentfault

//初始化運行是在組件 mounted 以前執行的 初始化時就會執行一次 建議寫在onMounted鉤子內
 watchEffect(() => console.log(count.value))

可傳入optiondom

interface WatchEffectOptions {
   //設置function須要同步或在組件更新以前從新運行，默認post
   flush?: 'pre' | 'post' | 'sync' 
   //onTrack 和 onTrigger 選項可用於調試一個debugger的行爲。
   //當一個 reactive 對象屬性或一個 ref 做爲依賴被追蹤時，將調用 onTrack
   //依賴項變動致使反作用被觸發時，將調用 onTrigger
   onTrack?: (event: DebuggerEvent) => void
   onTrigger?: (event: DebuggerEvent) => void
 }

中止監聽行爲和中止回調ide

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中調用post

// 二者之間能夠相互響應
// 提供者：
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

isProxy判斷一個對象是不是由 reactive 或者 readonly 方法建立的代理
isReactive判斷一個對象是不是由 reactive 建立的響應式代理
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 方法轉換成響應式代理的普通對象