provide/inject实现响应式数据(学习记录)

响应性基础

 1使用reactive

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象  。  

2 使用refs

ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。该对象只包含一个名为 value 的 property：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

 ref中传递的参数就是要包裹的响应值，可以是对象等，通过返回的响应式对象的value进行访问。

3 Ref解包

想要通过ref添加的数据在模板中渲染出来，需要在setup函数中进行返回，此时在模板中不需要使用value进行访问，会自动进行解包内部值。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
    <button @click="nested.count.value ++">Nested Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count,

        nested: {
          count
        }
      }
    }
  }
</script>

 4 实现数据的响应

import {reactive,ref,provide} from 'vue'

export default {

  setup() {

    // 通过ref和reactive定义传给子组件的响应式数据

    const msg = ref("默认文本内容")

    const state =  reactive({

      success:1,

      fail:0

    })

    provide("msg",msg)

    return {

      msg,

      state

    }

  },

子组件通过inject接收即可实现响应性