关于vue.js:Vue生命周期

30次阅读

共计 995 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完