Vue2之生命周期函数(钩子函数)

Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子]让开发者可以在特定阶段 运行自己的代码。
借用一下黑马的图片
Vue2之生命周期函数(钩子函数)_第1张图片
上代码为大家演示一下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <span>{{num}}span>
    div>
body>
<script src="../JS/vue.js">script>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:"#app",
        data:{
            num:100
        },
        // 1.创建阶段(准备阶段)
        beforeCreate() {
            console.log("响应式数据准备好之前",this.num);
        },
        created() {
            console.log("响应式数据准备好之后",this.num);
        },
        // 2.挂载阶段(渲染模版)
        beforeMount() {
            console.log("渲染模版之前",document.querySelector("span").innerHTML);
        },
        mounted() {
            console.log("渲染模版之后",document.querySelector("span").innerHTML);
        },
        // 更新阶段(修改数据 => 更新视图)
        beforeUpdate() {
            console.log("数据修改了 视图没更新",document.querySelector("span").innerHTML);
        },
        updated() {
            console.log("数据修改了 视图已经更新",document.querySelector("span").innerHTML);
        },
        // 卸载阶段
        beforeDestroy() {
            console.log("销毁前");
        },
        destroyed() {
            console.log("销毁后");
        }
    })
script>
html>

Vue2之生命周期函数(钩子函数)_第2张图片
我们更新数据看看
Vue2之生命周期函数(钩子函数)_第3张图片

那我们销毁怎么做呢,我就是想看看打印结果
好,我们可以使用 vm.$destroy()
Vue2之生命周期函数(钩子函数)_第4张图片
当我们销毁之后,页面照常渲染,不过已经不能做其它的操作了!

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(vue.js,javascript,前端)