0. 生命周期的钩子函数有：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed
这从名称也能知道在什么位置调用的

【栗子】：

div id="test-lifecycle"><span>message: {{message}}</span><br/><span>returnMsg:{{returnMsg}}</span><br/>
</div>
</body>
<script>new Vue({el: '#test-lifecycle',data: {message: 'Hello',returnMsg: ''},
//        beforeCreate: function () {
//            console.log("beforCreate-$data", this.$data);//undefined
//        },//两种写法是一样的beforeCreate() {console.log("beforCreate-$data", this.$data);//undefined},//在实例创建完成后被立即调用，可以获取实例数据，但是真实dom节点（el对应的节点数据）还没渲染出来//ajax请求不多，且不复杂，可以在此阶段发生created: function () {console.log("create-$data", this.$data);    //有数据console.log("beforeMount-$el", this.$el);   //undefined},//开始挂载编译生成的虚拟dom（就是组件或实例编译各自的模板成html，但还没渲染到页面）beforeMount() {console.log("beforeMount-$data", this.$data);//有数据},//实例被挂载后调用，这时el被新创建的vm.$el替换//此时可以进行发生ajax请求来获取数据，只执行一次mounted() {this.returnMsg = 'init-returnMsg';},//dom已经挂载完，再去修改data数据时，会触发这个钩子函数beforeUpdate() {console.log("beforUpdate-$el", this.$el);   //有数据},//当这个钩子被调用时，组件dom已经更新，所以可以执行依赖dom的操作updated() {console.log("updated-$el", this.$el);   //有数据},//实例销毁之前调用，再这一步实例完全可用beforeDestory() {console.log("beforeDestory-$el", this.$el);   //有数据},//实例销毁后调用。改钩子被调用后，对应的vue实例所有指令都被解绑，所有事件监听器被解除，所有子实例也被销毁destoryed() {console.log("destoryed-$el", this.$el);   //undefined}});
</script>

【附官网图】：