vue基础——生命周期

最新推荐文章于 2024-08-06 14:47:33 发布

yzbyf

最新推荐文章于 2024-08-06 14:47:33 发布

阅读量333

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yzbyf/article/details/134631717

版权

生命周期

生命周期常用函数：
Mounted() 注册一个回调函数，在组件挂载完成后执行。
Updated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
Unmounted() 注册一个回调函数，在组件实例被卸载之后调用。
beforeCreate 在组件实例初始化完成之后立即调用。
created() 在组件实例处理完所有与状态相关的选项后调用。
BeforeMount() 注册一个钩子，在组件被挂载之前被调用
BeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
BeforeUnmount()注册一个钩子，在组件实例被卸载之前调用。

<body>
    <div id="app">
        <h1 id="abc">{{num}}</h1>
        <button @click="num++">点击++</button>
        <ul id="list">
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
        <button @click="add">点击添加高端学府</button>
        <button @click="die">销毁组件实例</button>
    </div>
</body>
</html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
let app=createApp({
    data(){
        return{
            str:'中午吃啥',
            num:100,
            arr:['郑州大学','西亚斯学院','郑州科技学院']
        }
    },
    //在组件实例初始化完成之后立即调用。此刻其他的属性和方法均没有执行或者编译
    beforeCreate(){
        console.log(this.str);
    },
/*
在组件实例处理完所有与状态相关的选项后调用。当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。此时不能操作dom
*/
created(){
    console.log('created',this.str);
    let abc=document.querySelector('#abc');
    console.log(abc);
    this.num+=100;
},
/*
vue的组件模板，如果在实例中设置的有组件的模板，则会替换掉挂载的dom元素
模板的第一层需要是一个完整的dom元素(vue2版本)
*/
// template:`
//     <h3>{{num}}</h3>
//     <h2>{{str}}</h2>
// `

/*
在组件被挂载之前调用。此刻还没有挂载任何模板，因此还无法操作dom
*/
beforeMount(){
    console.log('beforeMount');
},
/*
组件被挂之后调用。此时，所有的模板内容都已经被挂载，可以操作组件中所有的dom
常用此钩子函数来进行，加载立即执行的操作
*/
mounted(){
    console.log('mounted');
    this.show()
},
methods:{
    show(){
    let abc=document.querySelector('#abc');
    console.log(abc);
    abc.style.border='1px #f00 solid ';
    },
    add(){
        this.arr.push('河南建筑职业技术学院');
    },
    die(){
        //销毁vue实例
        // this.$destroy();
        //解绑/卸载vue实例
        console.log(app);
        app.unmount();
    }
},

/*
beforeUpdate 钩子 数据更新前触发，显示的数据是更新后的数据
但是如果改变了dom结构，那么改函数中的dom结构是更新前的内容
*/
beforeUpdate(){
    let list=document.querySelector('#list');
    console.log('beforeUpdate',this.num,list.innerHTML);
},
/*
Update 钩子 数据更新后触发，显示的数据是更新后的数据
但是如果改变了dom结构，那么该函数中的dom结构是更新后的内容
*/
updated(){
    console.log('updated',this.num,list.innerHTML);
},

/*
在一个组件实例被卸载之前调用。
*/
beforeUnmount(){
    console.log('beforeUnmount');
},
/*
在一个组件实例被卸载之后调用。
*/
unmounted(){
    log('unmounted');
},
});
//挂载
app.mount('#app');
</script>