Vue生命周期 - HelloWorld开发者社区

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

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destory

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钩子函数间的生命周期