1. Lifecycle trong Vue
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Lifecycle Vue</title> </head> <body> <div id="app"> <h2>Hello Vue !!!</h2> <p>Updated: {{current_time}}</p> <button @click="current_time = new Date()"> Update Data </button> <button @click="destroyVue">Destroy Vue</button> </div> <script> let app = new Vue({ el: "#app", data() { return { current_time: "Not yet" }; }, methods: { destroyVue: function() { this.$destroy(); } }, beforeCreate: function() { console.log("beforeCreate !"); }, created: function() { console.log("created !"); }, beforeMount: function() { console.log("beforeMount !"); }, mounted: function() { console.log("mounted !"); }, beforeUpdate: function() { console.log("beforeUpdate !"); }, updated: function() { console.log("updated !"); }, beforeDestroy: function() { console.log("beforeDestroy !"); }, destroyed: function() { console.log("destroyed !"); } }); </script> </body> </html> |
2. Lifecycle trong Component
-- Biến trong data chưa được khởi tạo khi ở hàm "beforeCreate"
-- Khi không có thẻ "keep-alive" -> mỗi lần switch component -> component cũ sẽ bị "destroyed"
-- Khi có thẻ "keep-alive" -> mỗi lần switch component -> component cũ sẽ bị "deactivated"
|
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 |
<!DOCTYPE html> <html lang="en"> <body> <div id="app"> <button @click="select_component = 'component_a'"> Show Component A </button> <button @click="select_component = 'component_b'"> Show Component B </button> <!-- <component :is="select_component"></component> --> <keep-alive> <component :is="select_component"></component> </keep-alive> </div> <script> //object chứa những key dùng chung ở các component khác nhau let component_mixins = { template: "<div><p>This is {{text}}</p></div>", beforeCreate: function() { console.log(this.text + " - beforeCreate !"); }, created() { console.log(this.text + " - created !"); }, beforeMount() { console.log(this.text + " - beforeMount !"); }, mounted() { console.log(this.text + " - mounted !"); }, beforeUpdate() { console.log(this.text + " - beforeUpdate !"); }, updated() { console.log(this.text + " - updated !"); }, beforeDestroy() { console.log(this.text + " - beforeDestroy !"); }, destroyed() { console.log(this.text + " - destroyed !"); }, activated() { console.log(this.text + " - activated !"); }, deactivated() { console.log(this.text + " - deactivated !"); } }; let component_a = { //sử dụng mixins để merge với component_mixins, tránh phải viết lại code mixins: [component_mixins], data: function() { return { text: "Component-A" }; }, }; let component_b = { //sử dụng mixins để merge với component_mixins, tránh phải viết lại code mixins: [component_mixins], data: function() { return { text: "Component-B" }; }, }; let app = new Vue({ el: "#app", data: function() { return { select_component: "component_a" }; }, components: { component_a, component_b } }); </script> </body> </html> |
3. Sơ đồ Lifecycle
