Vue生命周期
常见vue生命周期钩子函数

beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestory

beforeCreate
此时没有 el对象和 data数据
created
曾经存在data数据 如果data扭转视图会发生变化
能够在此办法进行数据处理
此阶段 判断是否有 el 即 el:‘#app’ 没有就完结
如果有会调用
vm.$mount(el)
去挂载dom结点

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>vue生命周期学习</title>  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script></head><body>  <div id="app">    <!--html中批改的-->    <h1>{{message + '这是在outer HTML中的'}}</h1>  </div></body><script> var vm = new Vue({    el: '#app',    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中批改的    data: {      message: 'Vue的生命周期'    } </script></html>

先查看 template是否存在 如果存在模板编译成render函数，
没有将内部html作为模板渲染
所以综合排名优先级：
render函数选项 > template选项 > outer HTML.

beforeMount和mounted 钩子函数间的生命周期
为vue对象增加$el成员
mounted之后就渲染dom 能够在此办法调用办法和属性
beforeUpdate钩子函数和updated钩子函数间的生命周期

当组件数据变动 会调用beforeUpdate和updated钩子函数
beforeUpdate 监听数据变动
updated 进行渲染
beforeDestroy和destroyed钩子函数间的生命周期