vue 生命周期函数

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>