生命周期图示
代码实例
<!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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<button @click="seen=!seen">Toggle</button>
<p>{{seen}}</p>
</div>
<script >
// 1.new Vue({}) 解释:实例初始化,创建新的vue实例
// 2.Init Events & Lifecycle 初始化所有事件和生命周期钩子,初始化数据观测和加载相应事件。
// 3.beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
// 表示实例数据创建之前的方法
// 4.Init injections & reactivity 初始化依赖注入+相关响应,数据观测 (data observer) 和 event/watcher 事件配置
// 5.created 在实例创建完成后被立即调用。
// 在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
// 然而,挂载阶段还没开始,$el 属性目前不可见。
// 6.Has 'el' option ? & Has 'template' option ? 判断是否有可以挂载的根标签,
// 注:如果是根实例,就找el元素是否存在;如果是组件,就找template模板是否存在
// 如果根实例被找到==>挂载组件项;
// 如果根实例没有被找到==>确保根实例已经被挂载之后,去找组件项。
// 7.YES ==> Compile template into render function . 如果存在template模板,编译模板然后实现依赖注入。
// No ==> Compile el's outerHTML as template . 如果不存在template模板,编译元素的outerHTML然后作为模板注入。
// 8.beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
// 9.create app.$el and replace 'el' with it. 创建app.$el,并且把相关数据和相关元素绑定到实例上。
// 10.mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。(如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。)
// 11.When data changes ... 当数据开始发生更新改变时
// 12.beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。
// 这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
// 13.Virtual DOM re-render and patch 虚拟dom实现重渲染 和相关打补丁。
// 14.updated 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
// 然而在大多数情况下,你应该避免在此期间更改状态。
// 如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
// 注意 updated 不会承诺所有的子组件也都一起被重绘。
// 15.when app.$destory() is called. 当实例被要求销毁时调用
// 16.beforeDestroy() 实例销毁之前调用。在这一步,实例仍然完全可用。
// 17.Teardown watchers and child components and event listeners
// Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
// 18.destroyed()Vue 实例销毁后调用。
// 调用后,Vue 实例指示的所有东西都会解绑定,
// 所有的事件监听器会被移除,所有的子实例也会被销毁。
var app = new Vue({
el:'#app',
data:{
seen:true
},
beforeCreate(){
console.group('--beforeCreate--')
console.log('el:'+this.$el)
console.log('data:'+this.$data)
console.log('seen:'+this.seen)
},
created(){
console.group('--created--')
console.log('el:'+this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
beforeMount(){
console.group('--beforeMount--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
mounted(){
console.group('--mounted--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
beforeUpdate(){
console.group('--beforeUpdate--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
updated(){
console.group('--updated--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
beforeDestroy(){
console.group('--beforeDestroy--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
},
destroyed(){
console.group('--destroyed--')
console.log('el:')
console.log(this.$el)
console.log('data:')
console.log(this.$data)
console.log('seen:'+this.seen)
}
})
</script>
</body>
</html>
代码打印效果图示