Vue生命周期
示例
1 <!DOCTYPE html>
2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="app">
9 <h1>大家好，我是
10 {{name}}
11 </h1>
12 </div>
13 </body>
14 <script src="node_modules/vue/dist/vue.js"></script>
15 <script>
16 const app=new Vue({
17 el: "#app",
18 data: {
19 name: "张三",
20 },
21 methods: {
22 incr: function(){
23 //this可以获取该vue model里的所有数据
24 console.log(this);
25 this.num++;
26 }
27 },
28 created:function () {
29 //钩子函数使用
30 }
31 })
32 </script>
33 </html>
Vue的8个钩子函数
初始化Vue对象的时候
- beforeCreate钩子函数发生在代码16行，new Vue（）的过程当中
- new Vue（）结束后，created钩子函数执行
- Vue判断el属性是否有值
- Vue判断el属性的值所标记的Html标签是否存在
- 加载模板完成，此时页面内容并非“大家好，我是张三”而是“大家好，我是{{name}}”
页面渲染的时候
- 将Vue对象中的数据绑定到Html的标签上，绑定之前beforeMount钩子函数被执行，绑定完成后mounted钩子函数被执行
数据更新的时候
- 当数据发生变化需要更新view的时候，更新之前beforeUpdate钩子函数被执行，更新之后updated钩子函数被执行
Vue对象销毁的时候
- 当vue对象需要进行销毁的时候，销毁之前beforeDestroy钩子函数被执行，销毁过程中destroyed钩子函数被执行
