其实大多数同学在学习一门新的语言的时候，都会有一个误区，就是上来就撸代码，其实这不是一个好的习惯哦。
我们首先应该了解它的工作原理，这样才能更好的避免踩坑少走冤枉路。那么下面咱们就来了解一下Vue到底是怎么工作的。
vue实例从创建到销毁的过程被称为vue的生命周期。
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
在组件中具体的方法有:
beforeCreate 实例之前调用，这个阶段实例的data、methods是读不到的
created 实例创建完成后调用，这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染
beforeMount 挂载前调用，相关的 render 函数首次被调用
mounted 挂载完成后调用，el选项的DOM节点 被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
(
beforeUpdate 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
)
beforeDestroy 实例销毁前调用
destroyed 组件销毁后调用，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
这里有Vue生命周期图，可做详细参考：
1.beforeCeate(){ console.log(this.rendered); // undefined } 2.created() { console.log(this.$el);//undefined console.log(this.rendered); // false } 3.beforeMount() { console.log(this.$el)；//undefined } 4.mounted() { console.log(this.$el); } 5.beforeDestroty(){ console.log(this.$el); console.log(this.rendered); } 6.destroyed() { console.log(this.$el); console.log(this.rendered); }
从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；那问题来了，
data props computed watch methods他们之间的生成顺序是什么呢？
根据翻看vue源码可知：
props => methods =>data => computed => watch; 是按照这个步骤来的。
原文：https://www.cnblogs.com/peter1/p/12115099.html