1.,6，代码演示
1.6-1，beforeCreate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, beforeCreate(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML // beforeCreate中，data的数据是没有被定义的 console.log("beforeCreate",this.myName,bobyDom); }, }) </script> </html>
1.6-2，created
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, created(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML // 做一下页面的数据初始化工作。比如说发起ajax请求 console.log("created",this.myName,bobyDom); }, }) </script> </html>
1.6-3，beforeMount
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, beforeMount(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML console.log("beforeMount",this.myName,bobyDom); }, }) </script> </html>
1.6-4，mounted
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, mounted(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML // 数据已经渲染到View中 console.log("mounted",this.myName,bobyDom); }, }) </script> </html>
1.6-5，beforeUpdate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, beforeUpdate(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML // 数据更新前，数据未改变 console.log("beforeUpdate",this.myName,bobyDom); }, }) </script> </html>
1.6-6，updated
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{myName}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ myName:"abc" } }, updated(){ var bobyDom = document.getElementsByTagName("body")[0].innerHTML // 数据更新后，数据已改变 console.log("updated",this.myName,bobyDom); } }) </script> </html>
1.7,生命周期函数的使用场景
- 在beforeCreate生命周期函数运行时，可以添加loading动画
- 在created生命周期函数运行时，可以结束loading动画，还可以做一些初始化，实现函数自执行等操作
- 最经常使用的是mounted生命周期函数
- 可以发起后端数据请求，取回数据
- 可以接收页面之间传递的参数
- 可以子组件向父组件传递参数等
