Vue钩子函数

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钩子函数被执行
posted @ 2020-12-06 19:04  别无所求---  阅读(207)  评论(0)    收藏  举报