Vue组件的生命周期及属性

一、 生命周期

生命周期的三个阶段：初始化显示、更新显示、死亡
每一个阶段都会对应一些生命周期的回调函数（钩子函数）

八个钩子函数对应组件的生命周期：

beforeCreate(){} 该组件初始化之前 执行的钩子函数
created(){} 该组件初始化完成之后
beforeMount(){} 该组件挂载之前
mounted(){} 该组件挂载完成
beforeUpdate(){} 该组件修改之前
updated(){} 该组件修改之后
beforeDestroy(){} 该组件卸载之前
destroyed(){} 该组件卸载之后

挂载之后正常执行的钩子函数：beforeCreate(){} 、created(){} 、beforeMount(){}、mounted(){}

通过 v-if 实现组件的卸载（不能使用v-show）

二、其他属性

export default{
name:"nameinfo",
methods:{},
data(){
   return{};
     }
};
watch:{
//watch 监听属性或者是watch监听组件上的数据变化
//watch 监听里面写的监听方法和变量同名 同名才能监听到变量的变化
   msg(afterValue,beforeValue){
      console.log(afterValue,beforeValue);
   }
},
computed:{
//计算属性
//computed 里面可以写复杂的逻辑
getData(){
    console.log("计算属性里面的方法");
},
//里面也可以写 getter setter
getData:{
  get(){//getter
     return.this.num1*this.num2;
  },
  set(newValue){//setter
     this.num1=newValue;
     this.num2=newValue/10;
  }
},
changeStatus(){
    console.log("在事件执行的方法里面调用");
}