vue生命周期

简介

各种叫法：事件，生命周期函数，钩子函数……
生命周期里面的事件是不能阻止的，它只能监听。

1. 创建vue对象有两种情况：（两种情况差不多）

（1）new Vue({}) 主动new一个对象
（2）Vue.component({}) 被动new的，他是一个组件

2. 在正式开始创建前，执行beforeCreate

3. 初始化等之后，即实例创建完成后立即被调用，执行created（此时还没有挂载），这时候就可以进行数据操作了，通常发起Ajax请求

4. 判断是否有el：

   如果有，则为主动new的对象，自动挂载
   如果没有，就认为时一个组件，就执行$mount方法帮你挂载

5. 判断是否有template：

   如果有，就编译template
   如果没有，就使用HTML标签作为template

6. 接下来要挂载啦~

   挂载前，执行beforeMount
   挂载后，执行mounted，这时候就可以开始操作元素，子组件之类的了，只执行一次

7. 当数据发生改变的时候，就会更新

   改变前，执行beforeUpdate
   改变后，执行updated

8. 当你的元素被干掉了，就会销毁（例如页面没了，浏览器关了，或者被v-if删除了等等）

   干掉前，执行beforeDestroy
   干掉后，执行destroyed

• activated 激活 被<keep-alive><keep-alive/>内置组件 包裹
• deactivated 停用

测试代码

//子组件
    var test={
        template:`<div>
                      我是test组件
                      <button @click="test=test+'Hello'">点击改变</button>
                  </div>`,
        data:function () {
            return{
                'test':'hello'
            }
        },
        //生命周期开始
        beforeCreate:function () {
            //组件创建之前
            //console.log("组件创建之前");
            console.log(this.text);
        },
        created:function () {
            //组件创建之后自动调用
            //console.log("组件创建之后");
            console.log(this.text);
        },
        //在使用组件的时候，会自动触发上面两个函数，created里面就可以操作数据
        //所以，可以在created里面发送Ajax请求

        beforeMount:function () {
            //vue已经有了，但是没找到目标元素，不起作用
            //console.log("挂载之前");
            console.log( document.getElementById("app").innerHTML );
        },
        mounted:function () {
            //vue起作用了
            //console.log("挂载之后");
            console.log( document.getElementById("app").innerHTML );
        },
        //vue找到目标元素 并起作用的时候，自动触发以上两个事件

        beforeUpdate:function () {
            console.log( document.getElementById("app").innerHTML );
        },
        updated:function () {
            console.log( document.getElementById("app").innerHTML );
        },
        //以上两个不会自动触发，只有数据改变 才会触发
        //beforeUpdate是原DOM的内容，update是改变后的内容

        beforeDestroy:function () {
            console.log( "beforeDestroy" );
        },
        destroyed:function () {
            console.log( "destroyed" );
        },
        //销毁，一般结合v-if使用。一般是做一些功能的释放
        //缺点：不停地销毁 创建，太浪费资源
        //解决：调用vue内置组件 keep-alive

        activated:function () {
            console.log( "组件被激活" );
        },
        deactivated:function () {
            console.log( "组件被停用" );
        }
        //以上两个必须结合keep-alive组件使用
    };
    var mc={
        components:{
            'test':test
        },
        data:function () {
            return{
                flag:true
            }
        },
        template:`
            <div>
               <keep-alive><test v-if="flag"></test></keep-alive>
               <button @click="flag=!flag">事关子组件生死</button>
            </div>
        `
    };
    var app=new Vue({
        el:"#app",
        components:{
            'mc':mc
        }
    });

总而言之，我们常用的就是created和mounted。
附上一张图~

生命周期

获取DOM元素

• 在任意标签中写 ref="xxx"
• 通过组件对象 this.$refs.xxx 获取元素

var tempComponent={
    template:`<div>子组件</div>`
}
//全局组件
Vue.component('temp',tempComponent);
//入口
var App={
    template:`
        <div>
            <temp/>
            <button ref="btn">我是按钮</button>
        </div>
    `,
    beforCreat:function(){
        //不能操作数据，只是初始化了事件
        console.log( this.$refs.btn);   //undefined
    },
    created:function(){
        //可以操作数据了
        console.log( this.$refs.btn);   //undefined
    },
    beforMount:function(){
        //new Vue发生装载
        console.log( this.$refs.btn);   //undefined
    },
    Mount:function(){
        //数据装载之后
        console.log( this.$refs.btn);   //获取到
        console.log( this.$refs.tmp.$el);   //获取xxx
    }
}

new Vue=({
    el:'#app',
    components:{ app:App },
    template:`<app/>`
}),

$属性

• $refs 获取组件内元素
• $parent：获取当前组件对象的父组件
• $childern：获取子组件
• $root：获取new Vue 的实例
• $el：组件对象的DOM元素

标签input中有指令v-if="xx"，会发生变化，则我们希望在vue真正渲染DOM后，才获取

$nextTick

this.$nextTick(function(){
    this.$refs.input.focus();
});