2 vue的生存周期

vue的生存周期和计算属性

钩子函数:
    created ->   实例已经创建 √
    beforeCompile   ->   编译之前
    compiled    ->   编译之后
    ready       ->   插入到文档中 √

    beforeDestroy   ->   销毁之前
    destroyed   ->   销毁之后
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'well'
            },
            created:function(){
                alert('实例已经创建');
            },
            beforeCompile:function(){
                alert('编译之前');
            },
            compiled:function(){
                alert('编译之后');
            },
            ready:function(){
                alert('插入到文档中');
            },
            beforeDestroy:function(){
                alert('销毁之前');
            },
            destroyed:function(){
                alert('销毁之后');
            }
        });
        /*点击页面销毁vue对象*/
        document.onclick=function(){
            vm.$destroy();
        };

计算属性的使用(data中不适于写一些逻辑性代码所以放在computed中，注意最后要return)

computed:{     //相当与data:{a:1,b:2}
     b:function(){
           //业务逻辑代码
          return this.a+1;
     }
}
document.onclick=function(){
      vm.a=101;//当我点击一下的时候 data:{a:101,b:102}
};
原理是computed中有get，set方法   默认调用了get
computed:{
      b:{          
          get:function(){ //相当于data：{a:1,b:3}        
                return this.a+2;   
          },
          set:function(val){
               this.a=val;
          }
      }
}
document.onclick=function(){
            vm.b=10;//当我点击一下的时候 data:{a:10,b:12}  自动执行了   反向思维
};

vue实例的简单方法

    vm.$el  ->  就是元素    //vm是实例化的名字
    vm.$data  ->  就是data
    vm.$mount ->  手动挂在vue程序
    vm.$options ->   获取自定义属性
    vm.$destroy ->   销毁对象
    vm.$log();  ->  查看现在数据的状态
app.$children[0] -> 它的子组建
var vm=new Vue({
      aa:1,//自定义属性
      show:function(){//自定义方法
                alert(1);
      },
      data:{
           a:1
      }
}).$mount('#box');//手动挂载
vm.$options.show();//1  自定义方法
vm.$options.aa//获取自定义属性
vm.$log()//data{a:1}