VUE基础知识17

VUE组件的生命周期
1.new Vue()------>Init Events&Lifecycle------>Init Injection&reactivity（注入和反应性）------>Has 'el' option?------>Has "template" option?（非工程），如果是工程化的，需要手动挂载when vm.$mount(el) is called（mounted：安装）------>Compile template into render function（有template的情况，子组件，render：提交），根组件就是：Compile el's outerHTML as template------>Create vm.$el and replace "el" with it------>Mounter此处有个循环（when data changes<------>Virtual DOM re-render and patchpatch:补丁）------>我很vm.$destroy() is calleddestroy：破坏------>Teardown watchers, child components and event listeners：拆卸观察程序、子组件和事件侦听器------>destroy
2.钩子函数：
1）初始化显示：beforeCreate();create();beforeMount();mounted()
2）更新状态：beforeUpdate();update();
3）销毁实例：beforeDestory();destoryed();
3.常用的生命周期方法：create();mounted();发送ajax请求，启动定时器等异步任务;beforeDestory();收尾操作，清除定时器等。

<template>
    <div>
        <p v-if="isShow">{{str1}}</p>
        <p v-else>{{str2}}</p>
        <button @click="destroy">销毁</button>
    </div>
</template>

<script>
    export default {
        name: "LifeCircle",
        beforeCreate() {
            console.log('1:beforeCreate()');
        },
        data(){
            return{
                isShow:false,
                str1:'LIKE TI',
                str2:'like it!com!'
            }
        },
        methods:{
            destroy(){
                this.$destroy();
            }
        },
        created() {
            console.log('2:Create()');
        },
        beforeMount() {
            console.log('3:beforeMount()');
        },
        mounted() {
            console.log('4:mounted()');
            //定时器
            this.intervalId = setInterval(()=>{
                console.log('111111112222222222');
                this.isShow = !this.isShow;
            })
        },
        beforeUpdate() {
            console.log('5:beforeUpdate()');
        },
        updated() {
            console.log('6:mounted()');
        },
        beforeDestroy() {
            console.log('7:beforeDestroy()');
            //清除定时器
            clearInterval(this.intervalId);
        },
        destroyed() {
            console.log('8:destroyed()');
        }
    }
</script>

<style scoped>

</style>