vue3生命周期 provide/inject 2.0 3.0

<!--App.vue-->
<template>
  <div>
    <h1>生命周期{{ state.count }}</h1>
    <div v-if="state.show">
      <Test />
    </div>
  </div>

</template>

<script>
import Test from './components/Test.vue'
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, reactive } from 'vue'

export default {
  components: {
    Test
  },
  setup() {
    const state = reactive({
      count: 0,
      show: true
    })
    setTimeout(() => {
      state.count = 2
      state.show = false
    }, 2000)

    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
//onMounted(async () => {
 // const data = await serviceApi(params)
})
    
    onMounted(() => {
      console.log('onMounted')
    })

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('onUpdated')
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('onUnmounted')
    })

    onErrorCaptured(() => {
      console.log('onErrorCaptured')
    })

    return {
      state
    }
  }
}
</script>

<!--src/components/Test.vue-->
<template>
  <div>我是子组件</div>
</template>

<script>
import { onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'Test',
  setup() {
    onBeforeUnmount(() => {
      console.log('子组件-onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('子组件-onUnmounted')
    })
  }
}
</script>

提供/注入（provide/inject）

vue 2 写法

App.vue

<template>
  <div>
    <h1>提供/注入</h1>
    <Father />
  </div>

</template>

<script>
import Father from './components/Father.vue'

export default {
  components: {
    Father
  },
  provide: {
    name: '陈尼克'
  }
}
</script>

<!--Father.vue-->
<template>
  <div>我是父亲</div>
  <Son />
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Father',
  components: {
    Son
  }
}
</script>

<template>
  <div>我是儿子，{{ name }}</div>
</template>

<script>
export default {
  name: 'Son',
  inject: ['name']
}
</script>

vue3.0写法

<!--App.vue-->
<template>
  <div>
    <h1>提供/注入</h1>
    <Father />
  </div>

</template>

<script>
import { provide, ref } from 'vue'
import Father from './components/Father.vue'

export default {
  components: {
    Father
  },
  setup() {
    const name = ref('陈尼克')
    provide('name', name) // 单个声明形式
    provide('info', {
      work: '前端开发',
      age: '18'
    }) // 多个声明形式

    const changeName = () => {
      name.value = '李尼克'
    }

    provide('changeName', changeName)
  }
}
</script>

<!--Son.vue-->
<template>
  <div>我是儿子，{{ name }}</div>
  <div>职业：{{ info.work }}</div>
  <div>年龄：{{ info.age }}</div>
  <button @click="changeName">修改名字</button>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'Son',
  setup() {
    const name = inject('name', '嘻嘻') // 第二个参数为默认值，可选
    const info = inject('info')
    const changeName = inject('changeName')

    return {
      name,
      info,
      changeName
    }
  }
}
</script>