vue生命周期

一、组件的生命周期

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>

组件中八个钩子函数执行顺序

vue钩子函数

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>

生命周期执行顺序

<template>
    <div>
        <button @click="get_all_info">点击获取数据</button>
        <router-link :to="{name:'HellowPP'}">跳转</router-link>
        <table border="1" >
            <tr>
                <td>id</td>
                <td>英雄</td>
                <td>武功</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for = "hero in heros" > 
                <td>{{ hero.name}}</td>
                <td>{{ hero.kongfu}}</td>
                <td>{{ hero.gender}}</td>
                <td>{{ hero.habby}}</td> 
                 <!-- <td>操作</td>  -->
            </tr>
        </table>
    </div>
</template>


<script>
import axios from 'axios'
axios.defaults.baseURL='http://127.0.0.1:8090'
// import { apiAddress } from '@/request/api';

export default {
    name:"showbook",
    data (){
        return{
            heros : Array()
        }
        
    },
    methods: {
        get_all_info (){
            let self = this
            axios({
                method: 'get',
                url: '/a02/heros/' 

            }).then(function(res){
                console.log(res.data.data.data)
                self.heros = res.data.data.data
            })
        }
       


    },
        
    created(){this.get_all_info()},

}
</script>

使用实例