vue 生命周期以及执行顺序
Vue.js 2.x 组件的生命周期钩子函数以及它们的详细执行顺序如下：

1. beforeCreate：

   • 在实例创建之后，数据观测（data observation）和事件/生命周期事件配置（event/watcher event setup）之前被调用。
   • 此时，组件的数据和方法还未初始化。

2. created：

   • 实例已经创建完成。
   • 数据观测（data properties）已经初始化，但DOM元素还未创建，也无法访问。
   • 可以在这个阶段进行数据初始化、Ajax请求、订阅事件等操作。

3. beforeMount：

   • 在挂载开始之前被调用。
   • DOM还未被渲染，只是虚拟DOM已经准备好。
   • 可以在这个阶段进行一些操作，如计算属性。

4. mounted：

   • 实例已经挂载到页面上，DOM元素可见，可以访问DOM元素。
   • 通常在这里进行DOM操作、启动定时器、发送网络请求等。

5. beforeUpdate：

   • 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
   • 可以在这里进行一些准备工作，比如更新计算属性。

6. updated：

   • 组件的数据更新完成，虚拟DOM已经重新渲染，但可能还会触发子组件的更新。
   • 可以在这里执行一些操作，但需要注意避免无限循环更新。

7. beforeDestroy：

   • 在实例销毁之前调用。
   • 可以在这里进行一些清理工作，比如清除定时器、取消订阅、解绑全局事件等。

8. destroyed：

   • 实例销毁之后调用。
   • 所有的事件监听器和子组件都已被移除。
   • 可以在这里进行最终的清理工作。

Vue 生命周期

1.created 第二个生命周期函数，此时data和methods已经初始化完成，created()完成之后，vue开始编译模板，最终在内存中生成一个编译好的最终模板字符串，然后把模板字符串渲染为内存中的dom
总结: 在此时期开始加载dom元素

2.beforeMount 第三个生命周期函数，表示模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串 总结: 在此时期dom元素已经在内存中加载完成，但是没渲染到页面上（页面还是没有dom元素）

3.Mounted 第四个生命周期函数，此时内存中的模板已经真实的挂载到了页面中，用户可以看到渲染好的页面了

总结:
在此时期dom元素已经加载完成并渲染到页面上

运行中的两个事件

beforeUpdated()
执行它时，data中的数据已经被更新了，但是页面中的data还未被替换过来

updated()
执行它时，页面和data中的数据已经同步了

vue中created、mounted、computed、methods区别与执行顺序

init->beforeCreate->create->init->destory

computed是在DOM执行完成后立马执行（如：赋值）

created执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。

mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
methods方法有一定的触发条件，如click等。

watch用于检测vue实例上数据的变动

默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

所有方法都应该在methods里定义，在mounted或created里面使用this调用，用这种方法实现初始化。