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

共8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
1.创建前/后： 在beforeCreate阶段，实例的挂载元素el和数据对象data都为undefined，未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，未初始化。
2.载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data渲染成功。
3.更新前/后：当data变化时，会触发beforeUpdate和updated方法
4.销毁前/后：在执行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: {
    greet() {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
    }
  }

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

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

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

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }