const app = new Vue({       data () {         return {           num: 1         }       },       watch: {         num () {           console.log('--- num changed')         }       },       // 声明methods方法       // 声明生命周期钩子       beforeCreate () {         console.log('---beforeCreate')       },       // 注入provide数据       // 响应式劫持、把data上数据遍历后放在this上       created () {         console.log('---created')         // 调接口       },       // 通过el/$mount/template找视图模板       // 把template视图模板编译成render() (render方法是用于创建虚拟DOM的)       beforeMount () {         console.log('---beforeMount')       },       // 创建$el挂载节点       // 调用render()方法第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述）       // Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集、通知Watcher第一次完成DOM渲染       mounted () {         console.log('---mounted')         // 调接口、开定时器、建立websocket长连接、echarts图表实例化、DOM/BOM操作。。。       },       // 网页呈现你的面前上，当各种事件交互触发data变化时       beforeUpdate () {         console.log('---beforeUpdate')       },       // 再次调用render()方法生成新的虚拟DOM（现在就有了两个虚拟DOM）       // 执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合），通过一个队列进行异步更新。       updated () {         console.log('---updated')         // updated在某些场景下，可以模拟出watch/$nextTick()的功能。       },       // 当调用$destroy()或路由切换时，即将进入销毁阶段       beforeDestroy () {         console.log('---beforeDestroy')         // 清除定时器、清除缓存       },       // 移除当前组件的Watcher（DOM将无法再更新了）       // 拆卸掉所有的子组件       // 移除事件监听器（wacth等等）       destroyed () {         console.log('---destroyed')       },       methods: {         add () {           console.log('---add')           this.num++         }       }     })     app.$mount('#app')