<!--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>