乐趣区

关于vue.js:Vue生命周期

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

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

退出移动版