Vue生命周期 created，mounted, methods , computed , watched

Vue生命周期 共8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

一、创建前/后：
① beforeCreate阶段，实例的挂载元素el和数据对象data都为undefined，未初始化。
② created阶段，vue实例的数据对象data有了，el为undefined，未初始化。
二、载入前/后：
③ beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
④ mounted阶段，vue实例挂载完成，data渲染成功。
三、更新前/后：当data变化时，会触发
⑤ beforeUpdate和⑥ updated方法
四、销毁前/后：
⑦ beforeDestroy 销毁前
⑧ destroy 销毁执行后，对data的改变不会再触发周期函数，此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

常用

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

  created() {
    const msg = this.$Message.loading({
                    content: '加载中...',
                    duration: 0
                });
     setTimeout(msg, 1000);
	}

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

mounted() {
	$(".test").css("color","blue")
}

methods 是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，只执行逻辑，返回值可有可无。

// 在 `methods` 对象中定义方法
methods: {
  test(ite) {
    console.log('Hello ' + ite);
  },
  toTest(){
  	// `this` 在方法里指向当前 Vue 实例
  	this.test("test!");
  }
}

computed 是计算属性，也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发，且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

//计算过后，如返回值不变则直接返回缓存
computed: {
    reversedMessage() {
      // `this` 指向 vm 实例
      return this.xxx
    }
  }

watch 属性是手动定义的所需监听的值，不同的数据可以在其中多次定义监听值，这会消耗一定性能，并不能像computed那样返回缓存。

return {
	fullName:'',
}

watch: {
	//监听fullName
    fullName(val) {
      	console.log(val);//fullName变化时会执行 val变化后的值
    },
  }