04: vue生命周期和实例属性和方法

1.1 组件的生命周期 

　　1、说明

　　　　　　1. Vue将组件看成是一个有生命的个体，跟人一样，定义了各个阶段，

　　　　　　2. 组件的生命周期：组件的创建过程

　　　　　　3. 组件生命周期钩子函数：当组件处在某个阶段，要执行某个方法，来通知我们，组件进入某个阶段，这个方法就是组件生命周期的钩子函数

　　　　　　4. 组件的创建过程：这些方法在组件中直接定义，会按照顺序执行，没有参数，作用域都是组件实例化对象

　　2、组件生命周期中依次执行的八个钩子函数

<!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">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <Home></Home>
    </div>

    <script src="vue.js"></script>
    <script>
        var Home = Vue.extend({
           template:"<h1>I am h1!! 显示变量： {{msg}}</h1>",
            data:function () {
                return {
                    'msg':'I am msg'
                }
            },

            // 方法1：组件实例被创建，组件属性计算之前，如data属性等
             beforeCreate: function () {
                 console.log(111, this, arguments)
             },

            // 方法2：组件实例创建完成，属性已经绑定，但DOM还未生成，$el 属性还不存在
             created: function () {
                 console.log(222, this, arguments)
             },

            // 方法3：模板编译/挂载之前
             beforeMount: function () {
                 console.log(333, this, arguments)
             },

            // 方法4：模板编译/挂载之后（不保证组件已在document中）
             mounted: function () {
                 console.log(444, this, arguments)
             },


            // 方法5：组件更新之前
             beforeUpdate: function () {
                 console.log(555, this, arguments)
             },

            // 方法6：组件更新之后
             updated: function () {
                 console.log(666, this, arguments)
             },

             // 方法9：组件销毁前调用
             beforeDestory: function () {
                 console.log(777, this, arguments)
             },

            // 方法10：主键销毁后调用
             destoryed: function () {
                 console.log(888, this, arguments)
             },


            // 方法7：组件被激活时调用（用的少）
            // activated: function() {
            //     console.log(777, this, arguments)
            // },

            // 方法8：组件被移除时调用（用的少）
            // deactivated: function () {
            //     console.log(888, this, arguments)
            // },




        });

        Vue.component('home',Home);

        var app = new Vue({
            el:'#app',
            data:{
                'isShow':true,
            }
        })
    </script>
</body>
</html>
组件中八个钩子函数执行顺序

　　3、图片展示

 　　　　

　　4、组件生命周期 常用的两个过程

　　　　　　1）created： 实例已经创建完成，并且已经进行数据观测和事件配置

　　　　　　2）mounted：模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    msg:'welcome to itany'
                },
                methods:{
                    update(){
                        this.msg='欢迎来到南京网博！';
                    },
                    destroy(){
                        // this.$destroy();
                        vm.$destroy();
                    }
                },
                beforeCreate(){
                    alert('组件实例刚刚创建，还未进行数据观测和事件配置');
                },
                created(){  //常用！！！
                    alert('实例已经创建完成，并且已经进行数据观测和事件配置');
                },
                beforeMount(){
                    alert('模板编译之前，还没挂载');
                },
                mounted(){ //常用！！！
                    alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
                },
                beforeUpdate(){
                    alert('组件更新之前');
                },
                updated(){
                    alert('组件更新之后');
                },
                beforeDestroy(){
                    alert('组件销毁之前');
                },
                destroyed(){
                    alert('组件销毁之后');
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}}
        <br>

        <button @click="update">更新数据</button>
        <button @click="destroy">销毁组件</button>
    </div>
</body>
</html>
生命周期执行顺序

 

posted @ 2018-06-27 11:22  不做大哥好多年  阅读(252)  评论(0)  编辑  收藏  举报