vue_生命周期钩子 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{msg}}</p>
    
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    // 生命周期函数就是在初始化及数据更新过程各个阶段执行不同的钩子函数
    el: '#app',
    data: {
      msg: 'hello vue'
    },
    //在一个实例被创建之前执行的函数
    beforeCreate () { // 先父后子
      console.log(this.$el) // undefined
      console.log(this.msg) // undefined
    },
    //在一个实例被创建之后执行函数
    created () {  // 先子后父
      console.log(this.$el) // undefined
      console.log(this.msg) // hello vue
    },
    // created运行后判断是否有el挂载的渲染模板
    // 当vue实例挂载/渲染之前会执行beforeMount函数
    beforeMount () {
      console.log(this.$el) // <div id="app"><p>{{msg}}</p></div>
      console.log(this.msg) // hello vue
    },
    //当vue实例挂载/渲染完成后会执行mounted函数
    mounted () {
      console.log(this.$el) // <div id="app"><p>hello vue</p></div>
      console.log(this.msg) // hello vue
    },
    // 当data被修改时更新到虚拟DOM
    beforeUpdate () {
      // 控制台调用vm.$data.msg = 'hello javascript'
      // vue会将数据更新到虚拟DOM。并未渲染到页面
      console.log(app.innerHTML) // <p>hello vue</p>
      console.log(this.msg)      // hello javascript
    },
    //当data被修改时，重新渲染并应用更新
    updated () {
      console.log(app.innerHTML) // <p>hello javascript</p>
      console.log(this.msg)      // hello javascript
    },
    //被keep-alive缓存的组件激活时调用,该钩子函数在服务器端渲染期间不被调用
    //如果keep-alive包裹两个组件A和B，会缓存不活动的组件实例，而不是销毁它们
    //第一次切换到组件A时，组件A的created和activated钩子函数都会被执行
    //切换B组件时，组件A的deactivated钩子函数执行，组件B执行activated钩子函数
    activated () {

    },
    //被keep-alive缓存的组件停用时调用,
    deactivated () {

    },
    //当页面销毁实例之前运行的函数
    beforeDestroy () {

    },
    //当页面销毁实例之后运行的函数
    destroyed () {

    },
  })
</script>
</html>

 

posted @ 2020-03-04 16:44  前端之旅  阅读(191)  评论(0)    收藏  举报