vue2.0生命周期以及钩子函数使用规则及例子

最新推荐文章于 2024-08-15 22:00:44 发布

VT柯里昂

最新推荐文章于 2024-08-15 22:00:44 发布

阅读量681

点赞数

本文链接：https://blog.csdn.net/weixin_42283462/article/details/80557823

版权

vue是现在的热门前端框架之一，采用了虚拟dom，稍微介绍一下虚拟dom的概念。在使用原生js的时候，我们总数需要去获取dom元素，这样的话，每次要获取元素都要操作一次dom,我们就要执行一次，那么我们就要考虑如何减少操作的次数，虚拟dom就是为这个考虑而设计的。先简单介绍几个钩子函数，因为现在已经跟新到了vue2.0,因此，将主要介绍vue2.0的。

beforeCreated:我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化是调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created:在创建实例之后进行调用。

mounted:我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),相信讲解了这两个例子，也就理解了这个函数的功能了，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。

beforeDestroy:该函数将在销毁实例前进行调用

如下代码为6个Vue2.0钩子函数案例，直接可以打开使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome to vue'
                },
                beforeCreate(){
                    console.log('组建实例刚刚被创建，属性都没有');
                },
                created(){
                    console.log('实例已经创建成功，属性已经绑定成功');
                },
                beforeMount(){
                    console.log('模版编译之前')
                },
                mounted(){
                    console.log('模版已经编译完成')
                },
                beforeUpdate(){
                    console.log('组建更新之前')
                },
                updated(){
                    console.log('组建更新之后')
                },
                beforeDestroy(){
                    console.log('组建销毁之前')
                },
                destroyed(){
                    console.log('组建销毁之后')
                },
                methods:{
                    update(){
                        this.msg = '大家好'
                    },
                    destroy(){
                        this.$destroy();
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="更新数据" @click="update">
        <input type="button" value="销毁组建" @click="destroy">
        {{msg}}
    </div>
</body>
</html>