-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathVueLifecycleAndVuexDemo.html
173 lines (159 loc) · 8.03 KB
/
VueLifecycleAndVuexDemo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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 生命周期 详解 and Vuex demo</title>
</head>
<body>
<div id="app">
<aaa></aaa>
<p>{{ count }}-{{ returnVuexStoreMsg }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="changeMsg">change</button>
</p>
</div>
<div id="diy">
<h1><a href="https://www.cnblogs.com/happ0/p/8075562.html" target="_blank">vue 生命周期 详解 - happy0 - 博客园</a></h1>
<img src="https://cn.vuejs.org/images/lifecycle.png" width="600px" height="1000px">
console.log()日志如下：<br/>
<textarea style="width: 1200px;height: 500px">
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:71 beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:72 undefined
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:73 undefined
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:76 created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:78 在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:79 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:82 beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:84 在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:85 undefined
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:86 接下来开始render，渲染出真实dom
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:93 mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:94 <p class="myp">A组件</p>
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:95 可以在这里操作真实dom等事情...
vue.js:9049 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9058 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:112 beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...
VueLifecycleDemo.html?_ijt=3csmfoveb5epurom9ifldvt5ed:116 destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后
</textarea>
</div>
<template id="aaa">
<div>
<p class="myp">A组件</p>
<button @click="destroy">destroy</button>
<input type="text" v-model="msg">
<p>msg:{{msg}}</p>
</div>
</template>
</body>
<!-- 先引入 Vue 【https://unpkg.com/vue@2.6.10/dist/vue.js】 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>-->
<!--引入vuex 【https://unpkg.com/vuex@3.1.1/dist/vuex.js】-->
<script src="https://unpkg.com/vuex"></script>
<script>
//生命周期：初始化阶段 运行中阶段 销毁阶段
Vue.component("aaa", {
template: "#aaa",
data: function () {
return {msg: 'hello'}
},
timer: null,
methods: {
destroy: function () {
this.$destroy()//
}
},
beforeCreate: function () {
console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
console.log(this.msg)//undefined
console.log(document.getElementsByClassName("myp")[0])//undefined
},
created: function () {
console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
this.msg += '!!!'
console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
},
beforeMount: function () {
console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
this.msg += '@@@@'
console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log(document.getElementsByClassName("myp")[0])//undefined
console.log('接下来开始render，渲染出真实dom')
},
// render:function(createElement){
// console.log('render')
// return createElement('div','hahaha')
// },
mounted: function () {
console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
console.log(document.getElementsByClassName("myp")[0])
console.log('可以在这里操作真实dom等事情...')
// this.$options.timer = setInterval(function () {
// console.log('setInterval')
// this.msg+='!'
// }.bind(this),500)
},
beforeUpdate: function () {
//这里不能更改数据，否则会陷入死循环
console.log('beforeUpdate:重新渲染之前触发')
console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
},
updated: function () {
//这里不能更改数据，否则会陷入死循环
console.log('updated:数据已经更改完成，dom也重新render完成')
},
beforeDestroy: function () {
console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
// clearInterval(this.$options.timer)
},
destroyed: function () {
console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
}
})
//创建store
const store = new Vuex.Store({
state: {
count: 0 ,
vuexStoreMsg: 'LC'
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--,
changeMsg: state => state.vuexStoreMsg = 'hello,LC-' + new Date()
}
})
new Vue({
el: '#app',
computed: {
count () {
//通过computed 引用store
return store.state.count
},
returnVuexStoreMsg () {
//通过computed 引用store
return store.state.vuexStoreMsg
}
},
methods: {
increment () {
//通过commit执行变更
store.commit('increment')
},
decrement () {
store.commit('decrement')
},
changeMsg () {
store.commit('changeMsg')
}
}
}).$mount('#app')
</script>
</html>