vue的生命周期（钩子函数）

最新推荐文章于 2024-04-10 18:01:45 发布

Xyt1737

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量154

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Xyt1737/article/details/120661207

版权

1. 定义

从vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程

2. vue的生命周期

生命周期的第一步首先是创建vue实例，并且进行初始化。

(1)vue实例初始化阶段

beforeCreate

在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。

created

在初始化完毕之后，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行data数据模型和和methods方法的访问

(2) vue实例挂载阶段

beforeMount

在created之后，vue会判断实例中是否含有el属性，如果没有vm.$mount(el)，接着会判断是否含有template属性，如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。

mounted

创建vm.$el替换el,实际上完成的是数据绑定操作，在其间执行乐render函数，将模板进行了解析，将数据进行了动态绑定

(3) vue实例更新阶段

beforeUpdate

更新虚拟dom节点

updated

完成了页面的重新渲染

(4) vue实例销毁阶段

beforeDestroy

销毁之前调用，此时可以访问vue实例

destroyed

完成了监听器，子组件，事件监听等移除，销毁vue实例对象。

3.代码说明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            },
            beforeCreate() {
                console.log('vue实例初始化之前')
            },
            created() {
                console.log('vue实例初始化好了,可以访问到数据模型中的数据以及methods方法')
            },
            beforeMount() {
                console.log('实例挂载之前')
            },
            mounted() {
                console.log('实例挂载完毕，可以获取dom节点，一般不操作dom')
            },
            beforeUpdate() {
                console.log('实例发生改变之前触发该生命周期')
            },
            updated() {
                console.log('实例发生改变后页面视图发生变化,触发该生命周期')
            },
            beforeDestroy() {
                // console.log('实例销毁之前，仍然可以访问到数据模型中的数据和方法')
            },
            destroyed() {
                // console.log('实例销毁完毕，销毁了监听器和事件监听以及子组件');
                console.log(vm);//观察实例中的方法布尔值的变化
            },
            methods: {
                sayHello() {
                    console.log(this.msg)
                },
            }
        });
        console.log(vm)
        setTimeout(() => {
            // vm.msg='unhello';
            vm.$destroy()
        }, 3000)
    </script>
</body>

</html>

Xyt1737

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期（钩子函数）

1.定义：从vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程2.生命周期的第一步首先是创建vue实例，并且进行初始化。(1)vue实例初始化阶段beforeCreate 在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。created 在初始化完毕之后，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完毕，可...
复制链接

扫一扫