vue 生命週期函式
阿新 • • 發佈：2020-08-02
3-2
生命週期函式就是vue例項在某一個時間點會自動執行的函式
以下程式碼需要到vue官網下載vue.js引入方可執行 https://cn.vuejs.org/js/vue.js
beforeDestroy、destroyed,在控制檯輸入，vm.$destroy()才會執行,
beforeUpdate、updated 需要在控制檯輸入vm.test="hh"，才會執行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue例項生命週期鉤子</title> <script src="vue.js"></script> </head> <body> <div id="app"></div> <script> //生命週期函式就是vue例項在某一個時間點會自動執行的函式 var vm = new Vue({ el:"#app", template:"<div>{{test}}</div>", data:{ test:"hello world" }, beforeCreate: function (){ console.log("beforeCreate") }, created:function() { console.log("created") }, beforeMount:function(){ console.log("beforeMount") console.log(this.$el) }, mounted:function(){ console.log("mount") console.log(this.$el) }, beforeDestroy: function() { console.log("beforeDestroy") }, destroyed:function(){ console.log("destroyed") }, beforeUpdate:function(){ console.log("beforeUpdate") }, updated:function(){ console.log("updated") } }) </script> </body> </html>