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

最新推荐文章于 2024-06-15 14:41:39 发布

远近高低各不同

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量966

点赞数 37

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74577714/article/details/135092304

版权

Vue生命周期过程中，会自动运行一些函数，被称为[生命周期钩子]让开发者可以在特定阶段运行自己的代码。
借用一下黑马的图片
在这里插入图片描述
上代码为大家演示一下

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

在这里插入图片描述
我们更新数据看看

那我们销毁怎么做呢，我就是想看看打印结果
好，我们可以使用 vm.$destroy()
在这里插入图片描述
当我们销毁之后，页面照常渲染，不过已经不能做其它的操作了！

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

远近高低各不同

关注

37
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue2之生命周期函数(钩子函数)

好，我们可以使用 vm.$destroy()// 更新阶段（修改数据 => 更新视图）// 1.创建阶段（准备阶段）// 2.挂载阶段（渲染模版）"数据修改了视图已经更新""数据修改了视图没更新""响应式数据准备好之前""响应式数据准备好之后"
复制链接

扫一扫