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