可以看出，vue框架，有些类似jQuery，对外的接口就是一个Vue对象，然后使用new的，创建一个Vue的实例对象，根据指定的id渲染元素，构建组件。而每个实例vue都被规定了生命周期。（Vue的配置属性，可以看作独立于声明周期，对Vue插件本身的设置）。
vue实例的生命周期有如下几种。
beforeCreate是创建实例之前，created是创建实例完成之后。
创建实例，就是传入对象，然后new Vue({...})。Vue会根据对象内的属性信息，初始化Vue实例，创建对应的信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="app" v-bind:src="message"> <p>{{ message }}</p> </div> <script type="text/javascript"> Vue.config.productionTip = false; new Vue({ data: function(argument) { return { message: 'Hello Vue!' } }, beforeCreate: function(){ console.log('创建之前'); }, created: function(){ console.log('创建'); }, beforeMount: function(){ console.log('挂载之前'); }, mounted: function(){ console.log('挂载'); }, }); </script> </body> </html>可以看到，传入的对象中，初始化了data、beforeCreate、created、beforeMount、mounted五个属性，new的时候，触发了beforeCreate、created两个属性设定的函数。
beforeMount、mounted属于挂载才会触发的函数。这是虽然初始化了，但是由于new的时候，并没有挂载，所以并没有触发。
挂载，就是将vue实例挂载到指定的dom元素，然后进行渲染。通过添加对应el属性实现（el可以添加id、class、标签名，不过都只会挂载到第一个元素上）。将部分代码改成如下：
<div class="app" v-bind:src="message"> <p>{{ message }}</p> </div> <script type="text/javascript"> Vue.config.productionTip = false; new Vue({ el: '.app', data: function(argument) { return { message: 'Hello Vue!' } }, beforeCreate: function(){ console.log('创建之前'); }, created: function(){ console.log('创建'); }, beforeMount: function(){ console.log('挂载之前'); }, mounted: function(){ console.log('挂载'); }, }); </script>更新，就是当挂载的dom元素中，有内容发生变化的时候，就会触发的函数。部分代码改成如下：
<div class="app" v-bind:src="message" v-on:click="click"> <p>{{ message }} {{count}}</p> </div> <script type="text/javascript"> Vue.config.productionTip = false; new Vue({ el: '.app', data: function(argument) { return { message: 'Hello Vue!', count: 0, } }, methods: { click: function(){ this.count++; } }, beforeCreate: function(){ console.log('创建之前'); }, created: function(){ console.log('创建'); }, beforeMount: function(){ console.log('挂载之前'); }, mounted: function(){ console.log('挂载'); }, beforeUpdate: function(){ console.log('更新之前'); }, updated: function(){ console.log('更新'); }, }); </script>
点击文字，更改数据，就会触发相关的更新函数。
组件的销毁，通过$destroy()函数，将组件销毁。
methods: { click: function(){ this.count++; console.log("正在销毁"); this.$destroy(); } },点击文本，就可以看到，触发了beforeDestroy、destroyed函数。可以看到数字不再变化，但是多点几下，依旧会显示文字"正在销毁"。
个人认为，销毁的只是，vue实例中，data数据和dom节点中的响应式关系，不是dom节点，也不是实例本身。
只有处于<keep-alive>标签内的实例才会拥有activated、deactivated周期，keep-alive标签可以用来缓存vue组件。这里只做简单的演示，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="app"> <keep-alive> <demo></demo> </keep-alive> </div> <script type="text/javascript"> Vue.config.productionTip = false; var demo = { template: `<p v-on:click="click">{{ message }} {{count}}</p>`, data: function(argument) { return { message: 'Hello Vue!', count: 0, } }, methods: { click: function(){ this.count++; console.log("正在销毁"); this.$destroy(); } }, beforeCreate: function(){ console.log('创建之前'); }, created: function(){ console.log('创建'); }, beforeMount: function(){ console.log('挂载之前'); }, mounted: function(){ console.log('挂载'); }, beforeUpdate: function(){ console.log('更新之前'); }, updated: function(){ console.log('更新'); }, beforeDestroy: function(){ console.log('销毁之前'); }, destroyed: function(){ console.log('销毁'); }, activated (){ console.log("激活 activated"); }, deactivated (){ console.log("停用 deactivated"); }, } new Vue({ el: '.app', components: { 'demo': demo, }, }); </script> </body> </html>当父组件被销毁之前，会触发停用deactivated。
当下级组件报出错误的时候，会出现，接收三个参数，err：错误信息, vm：抛出错误的实例, info：不确定，个人认为代表是抛出错误的源头。返回Boolean值，用来确定错误的信息会不会继续向上面的组件传递。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="app"> <keep-alive> <demo></demo> </keep-alive> </div> <script type="text/javascript"> Vue.config.productionTip = false; var demo = { template: `<p v-on:click='throwError'>{{ message }} {{count}}</p>`, methods: { throwError: function(){ throw new Error('errorCaptured测试') } }, data: function(argument) { return { message: 'Hello Vue!', count: 0, } }, } new Vue({ el: '.app', components: { 'demo': demo, }, errorCaptured: function(err, vm, info){ console.log(err); console.log(vm); console.log(info); return false; }, }); </script> </body> </html>点击文本就会打印抛出的错误信息。
