Vue的生命周期钩子函数

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue的生命周期钩子" title="生命周期钩子">生命周期钩子

生命周期函数就是vue实例在某一时间点会自动执行的函数

Vue生命周期图示

我们首先来看前面4个

  • beforeCreate

  • created

  • beforeMount

  • mounted

这是我们的效果图，后面我会再贴出全部函数的代码

<!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>Vue的生命周期钩子函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // 生命周期函数就是vue实例在某一特定时间里自动执行的函数
        // 我们可以打开vue官网找到vue生命周期图示
        var vm = new Vue({
            el:'#app',
            template: '<div>{{test}}</div>',
            data: {
                test: 'Hello World'
            },
            //1.首先我们来讲第一个函数BeforeCreate,当我们创建一个实例以后，vue实例进行一个基础的初始化以后就会被执行
            beforeCreate: function(){
                console.log('this is beforcreate');
            },
            // 2.完成基础的初始化之后,vue会进行处理一些外部数据的注入以及数据的双向绑定，当这部分也完成以后则会调用create函数
            created: function(){
                console.log('this is created');
            },
            //我们根据vue生命周期图示可以看到会先询问我们是否有挂载点el,然后再询问Vue实例里面是否有模板template,如果我们没有在vue实例里面写template，它将自动把挂载点外部的html元素作为我们的模板进行渲染
            //3.第三个将要讲到的就是我们的beforeMount函数，即模板与数据相结合，即将挂载到页面上
            beforeMount: function(){
                //内容还没被渲染到页面上
                console.log(this.$el);
                console.log('this is beforeMount');
            },
            // 4.当页面挂载以后,beforMount时内容还没被渲染到页面上，mounted函数将被执行，渲染到页面上
            mounted: function(){
                //内容已经被渲染到页面上了
                console.log(this.$el);
                console.log('this is mounted')
            },
        })
    </script>
</body>
</html>

然后我们再来看销毁函数

  • beforeDestory

  • destoryed

<!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>Vue的生命周期钩子函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // 生命周期函数就是vue实例在某一特定时间里自动执行的函数
        // 我们可以打开vue官网找到vue生命周期图示
        var vm = new Vue({
            el:'#app',
            template: '<div>{{test}}</div>',
            data: {
                test: 'Hello World'
            },
            // 5.当vm.$destory()方法被调用的时候,即组件即将被销毁的时候调用
            beforDestory: function(){
                console.log('this is beforeDestory')
            },
            // 6.组件完全被销毁的时候
            destoryed: function(){
                console.log('this is destoryed')
            }
        })
    </script>
</body>
</html>

我们可以看到当我们调用vm.$destroy()方法时，实例就会被销毁，我们这时候去更改里面的对象属性的值，页面不会实时变化了，所以可以确定对象已经被销毁了。

接下来我们再看另外两个函数

  • beforeUpdate

  • updated

<!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>Vue的生命周期钩子函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // 生命周期函数就是vue实例在某一特定时间里自动执行的函数
        // 我们可以打开vue官网找到vue生命周期图示
        var vm = new Vue({
            el:'#app',
            template: '<div>{{test}}</div>',
            data: {
                test: 'Hello World'
            },
            // 6.组件完全被销毁的时候
            destroyed: function(){
                console.log('this is destroyed')
            },
            // 7.当数据发生改变，还没有页面进行数据渲染之前被调用
            beforeUpdate: function(){
                console.log('this is beforeUpdate')
            },
            //8.数据发生改变以后，页面重新渲染后调用
            updated: function(){
                console.log('this is updated')
            }
        })
    </script>
</body>
</html>

后面还有三个属性我们这里就不在进行说明了，大家可以打开vue的官方文档进行查看

以上是 Vue的生命周期钩子函数 的全部内容， 来源链接： utcz.com/z/376033.html

回到顶部