Vue.js函数的生命周期

最新推荐文章于 2023-08-09 10:07:46 发布

CSH_lucky

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量339

点赞数

分类专栏： vue 文章标签： vue 钩子函数的生命周期

本文链接：https://blog.csdn.net/CSH_lucky/article/details/108087114

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、vue里的生命周期是什么？

vue实例从创建到销毁的过程称之为vue的生命周期

二、vue.js里面的钩子函数

钩子函数昰什么

相当于回调函数即让开发者在特定的时候执行自定义逻辑
1、自定义指令的钩子函数

bind : 让开发者将自定义指令绑定到dom元素上面时执行自定义逻辑
inserted ：让开发者在元素插入dom树的时候执行之定义逻辑
update ：让开发者在元素状态发生变化的时候执行之定义逻辑

2、vue.js生命周期里面一共有8个钩子函数
在这里插入图片描述

beforeCreate 实例创建前：vue的实例化对象刚刚创建但是数据以及方法都还没有设置到这个vue实例上面所以访问不到
created 实例创建后：vue实例创建完毕并且传入参数数据都已经设置到vue上面，mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染
beforeMount：各种数据组件都已经创建完成但是还没有开始任何操作所以获取到的是dom元素
mounted：组件挂在到vue对象上面去，el选项的DOM节点被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory：实例销毁之前调用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<!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>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="button" @click="change" value="更新数据" />
        <input type="button" @click="destroy" value="销毁" />
    </div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
    const app = new Vue({
        el : "#app",
        data : {
            message : "时空飞船"
        },
        methods : {
            change() {
                this.message = "田园生活"
            },
            destroy() {
                app.$destroy();
            }
        },
            beforeCreate () {
                console.log("beforeCreate");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            created () {
                console.log("created");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            beforeMount () {
                console.log("beforeMount");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            mounted () {
                console.log("mounted");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            beforeUpdate () {
                console.log("beforeUpdate");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            updated () {
                console.log("updated");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            beforeDestroy () {
                console.log("beforeDestroy");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            },
            destroyed () {
                console.log("destroyed");
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.message); 
            }
    })
</script>

在这里插入图片描述

CSH_lucky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js函数的生命周期

一、vue里的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期二、vue.js里面的钩子函数钩子函数昰什么相当于回调函数即让开发者在特定的时候执行自定义逻辑1、自定义指令的钩子函数bind : 让开发者将自定义指令绑定到dom元素上面时执行自定义逻辑inserted ：让开发者在元素插入dom树的时候执行之定义逻辑update ：让开发者在元素状态发生变化的时候执行之定义逻辑2、vue.js生命周期里面一共有8个钩子函数beforeCrea
复制链接

扫一扫