这里选择性执行，获取数据更新完成执行updated，数据更新时执行beforeUpdate
beforeUpdate：数据更新时执行,data数据此时已经是最新的数据,UI界面还是旧的
updated：数据更新完成后,界面和data里的数据此时都是最新的,完成的界面的更新渲染render

4.销毁阶段

销毁前: beforeDestroy：组件准备销毁,此时data和methods方法都能用，没有完全销毁
销毁后:destroyed：组件已经被销毁，此组件在浏览器中对应的DOM接口已被完全移除！

从创建到销毁图示：

总结：?

当我们创建一个Vue实例，也就是 new Vue()的时候，首先函数会执行init函数，在init函数中，会第一个执行beforeCreated钩子函数。beforeCreated，这个阶段只要是生成生面周期及其一些数据初始化的阶段，在此之前会先执行mergeOptions函数，得到$options选项，并且把这个设置成VUE实例的一个属性。所以在这个阶段，init已经执行，所以千万不要去修改data的数据，否则可能会出现数据无法监听的状况。在这个阶段，数据没有监听，也没有绑定到VUE实例上面，也没有挂载对象

当beforecreated执行完之后，当injections（注射）和reactivity（反射）的时候会执行created。在这个阶段，数据已经绑定到实例上面，但是还没有挂载对象。

当created之后，它会去判断instance（实例）里面是否含有 ‘el’ 这个option选项，如果没有，它会调用vm.$mount(el) 这个方法，然后执行下一步,意味着它会停止编译，生命周期结束，如果有的话，直接执行下一步。之后会判断是否含有template这个属性，如果有的话，它会把template解析成一个render function，这是一个template 编译的过程，结果是解析成了一个render函数，如果没有template选项它会把外部的HTML作为模板编译（template模板优先级高于outer HTML）。ender函数选项 > template选项 > outer HTML.。beforeMounted只会在有了render function之后才会执行，当执行完render function之后才会调用Mounted。可以看到此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。可以看出来，在mounted之前，渲染的DOM还没有挂载到页面内。当在Mounted挂载完之后，这个流程才会执行完。

其他的生命周期需要其他触发条件，比如当页面内data发生改变会调用beforeUpdate，然后经过virtual DOM，最后到Updated更新完毕。当组件被销毁的时候，会调用beforeDestory,以及destory。

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。