vue组件生命周期

最新推荐文章于 2024-08-17 16:59:01 发布

森林的尽头是阳光

最新推荐文章于 2024-08-17 16:59:01 发布

阅读量308

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/sinat_41904410/article/details/99654441

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

钩子函数

beforecreate 创建前
created 创建后
beforemount vue装载dom之前
mounted vue装载dom之后
beforeUpdate 数据改变出发，改变前
updated 数据改变出发改变后
beforeDestory 组件销毁前
destoryed 组件销毁后
beforeActive 组件停用
actived 组件激活

带v-if的的组件，添加移除的过程，就是创建销毁组件
用内置组件keep-alive包裹v-if，添加移除过程，触发的是组件的停用和激活

demo示例及备注

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='../node_modules/vue/dist/vue.js'></script>
</head>
<body>
    <div id='root'></div>
    
    <script src='main.js'></script>
</body>
</html>

let Test = {
    template:`
        <div>
            我是test组件{{text}}
            <button @click='text=text+1'>点我</button>
        </div>
    `,
    data:function(){
        return{
            text:'hello'
        } 
    },

    // 对应父组件 v-if false  就销毁当前组件
    beforeDestroy(){ //销毁之前
        console.log('beforeDestroy')
    },
    destroyed(){ // 销毁之后
        console.log('destroyed')
    },
    // 销毁，最终都是做一些其他功能的释放，比如：数据保存到localStorage

    // 有keep-alive的时候，v-if控制的是组件的激活与停用
    activated(){
        console.log('组件被激活了')
    },
    deactivated(){
        console.log('组件被停用了')
    },
    // created和actived  都是v-if='true'子组件的状态
    // actived被keep-alive包裹，created没有
    // 销毁和停用同上



    beforeCreate() {
        //组件创建之前
        // console.log(this.text)
        console.log('beforeCreate')
    },
    created() {
        //组件创建之后
        // console.log(this.text)
        console.log('created')
    },
    // 使用该组件，就会触发以上的事件函数（钩子函数）
    // created中可以操作数据  并且可以实现vue-页面的影响， 应用：发起ajax请求
    
    beforeMount() {
        //vue起作用，装在数据到DOM之前
        // console.log(document.body.innerHTML);
        console.log('beforeMount')
    },
    mounted() {
        //vue起作用，装在数据到DOM之后
        // console.log(document.body.innerHTML);
        console.log('Mounted')
    },

    //基于数据改变，影响页面
    beforeUpdate() {
        // 改变前
        console.log(document.body.innerHTML);
    },
    updated() {
        // 改变后
        console.log(document.body.innerHTML);
    },
    // 以上两个当有更改数据才会触发
    // 应用：beforeUpdate 可以获取原DOM
    // update可以获取新DOM

    // beforeMount  vue启动前的DOM
    // mounted  Vue启动后的DOM，只加载一次

    
}
let App={
    components:{
        test:Test
    },
    data(){
        return{isExist:true,isExist1:true}
    },
    template:`
        <div>
            <test v-if='isExist'></test>   
            <button @click='isExist=!isExist'>子组件销毁与创建</button> 

            <keep-alive>
                <test v-if='isExist1'></test> 
            </keep-alive>
            <button @click='isExist1=!isExist1'>子组件停用与激活，keep-alive是vue内置组件</button> 
        </div>
    `
}
new Vue({
    el:"#root",
    components:{
        "app":App
    },
    template:`<app/>`
})