vue3.0提前了解系列----一些普通用法和api的使用

今天給大家說說vue3.0 composition api里面一些剩余的普通api的使用

provide & inject

provide和inject用於在一些高階組件中常用，在2.x中也有一樣的api那么在compositionapi中怎么用呢？

僅需要

import { provide } from 'vue'
setup () {
     provide("msg", '透傳一段數據')
}



import { inject } from 'vue'
setup() {
 const testMsg = inject("msg")   
}

如果需要傳遞一些響應式的我們可以這么做

<template>
  <div>
    <children></children>
    <button @click="changeTest">
      修改透傳數據
    </button>
  </div>
</template>
<script>
import { 
  provide,
  ref,
  reactive, 
  toRef,
  toRefs,
} from 'vue'
import Children from './ordinaryChild'
export default {
  components: {
    Children
  },
  setup() {
    const msg = ref(0)
    const state = reactive({
      testMsg: '測試往下透傳一個數據',
      testMsg2: '透傳一個靜態'
    })
  
    const changeTest = () => {
      state.testMsg = '修改了數據'
      msg.value++
    }
    
    provide("testMsg", toRef(state, 'testMsg'))
    provide("testMsg2", state.testMsg2)
    provide("msg", msg)
    return {
      ...toRefs(state),
      changeTest,
      msg,
    }
  }

}
</script>

孫子/子組件接收

<template>
  <div>
    {{ testMsg }}
  </div>
  <div>
    {{ testMsg2 }}
  </div>
  <div>
    {{ msg }}
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    const testMsg = inject("testMsg")
    const testMsg2 = inject("testMsg2")
    const msg = inject("msg")

    return {
      testMsg,
      testMsg2,
      msg
    }
  }
}
</script>
<style scoped>
  
</style>

readonly

顧名思義是一個只讀屬性，他接受一個對象（響應的或普通的）或一個ref，並將只讀代理返回給原始代理。只讀代理很深：訪問的任何嵌套屬性都將是只讀的。使用如下：

import { readonly } from 'vue'

const msg = ref(0)
const readonlyMsg = readonly(msg)

不過不知道是為什么，也許是我使用有問題，也許是vue就這么設計的，當我修改這個readonly對象的時候，並沒有禁止我使用，只是拋出一個警告

 

 如果是我使用有問題，還望大佬們指點下

getCurrentInstance

這是一個很重要的方法！getCurrentInstance 方法獲取當前組件的實例，然后通過 ctx 屬性獲得當前上下文，這樣我們就能在setup中使用router和vuex了 使用如下：

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance)
const { ctx } = getCurrentInstance()
console.log(ctx)

讓我們來看下分別輸出什么吧

intance

 

 ctx

 通過這個屬性我們就可以操作變量、全局屬性、組件屬性等等，總之很重要，收藏吧！

一些判斷數據的方法

包含四個：

isRef可以檢測ref、readonly的ref數據、toRef的reactive

isProxy可以檢測readonly的數據、reactive聲明的對象

isReactive可以檢測reactive聲明的對象

isReadonly可以檢測readonly的數據

使用方法都一樣，從vue中引入，傳入你要判斷的數據即可

因為本次分享api比較多，下面放一下本文中全部代碼：

ordinary.vue

<template>
  <div>
    <children></children>
    只讀數據 ： {{ readonlyMsg }}
    <button @click="changeTest">
      修改透傳數據
    </button>
    <button @click="getDounce">
      獲取數據類型判斷
    </button>
  </div>
</template>
<script>
import { 
  provide,
  ref,
  reactive, 
  toRef,
  toRefs,
  getCurrentInstance,
  readonly,
  isProxy,
  isRef,
  isReactive,
  isReadonly,
} from 'vue'
import Children from './ordinaryChild'
export default {
  components: {
    Children
  },
  setup() {
    const instance = getCurrentInstance()
    console.log(instance)
    const { ctx } = getCurrentInstance()
    console.log(ctx)
    const msg = ref(0)
    const state = reactive({
      testMsg: '測試往下透傳一個數據',
      testMsg2: '透傳一個靜態'
    })
    const readonlyMsg = readonly(msg)
    
    const changeTest = () => {
      state.testMsg = '修改了數據'
      msg.value++
      // 會發出警告 failed: target is readonly.
      readonlyMsg.value++
    }
    const getDounce = () => {
      console.log('isRef可以檢測ref、readonly的ref數據、toRef的reactive\r\n', isRef(msg), isRef(readonlyMsg), isRef(state), isRef(state.testMsg), isRef(toRef(state, 'testMsg')))
      console.log('isProxy可以檢測readonly的數據、reactive聲明的對象\r\n', isProxy(msg), isProxy(readonlyMsg), isProxy(state), isProxy(state.testMsg), isProxy(toRef(state, 'testMsg')))
      console.log('isReactive可以檢測reactive聲明的對象\r\n', isReactive(msg), isReactive(readonlyMsg), isReactive(state), isReactive(state.testMsg), isReactive(toRef(state, 'testMsg')))
      console.log('isReadonly可以檢測readonly的數據\r\n', isReadonly(msg), isReadonly(readonlyMsg), isReadonly(state), isReadonly(state.testMsg), isReadonly(toRef(state, 'testMsg')))
    }
    provide("testMsg", toRef(state, 'testMsg'))
    provide("testMsg2", state.testMsg2)
    provide("msg", msg)
    return {
      ...toRefs(state),
      changeTest,
      msg,
      readonlyMsg,
      getDounce
    }
  }

}
</script>
<style scoped>
  
</style>

ordinary.vue

<template>
  <div>
    {{ testMsg }}
  </div>
  <div>
    {{ testMsg2 }}
  </div>
  <div>
    {{ msg }}
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    const testMsg = inject("testMsg")
    const testMsg2 = inject("testMsg2")
    const msg = inject("msg")

    return {
      testMsg,
      testMsg2,
      msg
    }
  }
}
</script>
<style scoped>
  
</style>

好了  本期 分享差不多了，到現在為止。應該基礎api和屬性應該都全了，后期發現在補充吧，compositionapi還剩下最后一章了，今天晚上吧 我一起更新了，主要是jsx、markRaw之類的，我也是新接手vue3，如果有哪里不對或者遺漏的，還望大家指出，祝大家前端路越走越寬