一个例子搞懂Vue实例的生命周期

最新推荐文章于 2024-07-03 00:06:00 发布

__畫戟__

最新推荐文章于 2024-07-03 00:06:00 发布

阅读量814

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_41887214/article/details/90606255

版权

VUE 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

复制以下代码试验下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>一个例子搞懂Vue实例的生命周期</title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input type="text" v-model="message" >
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // Vue 实例可以通过 $el 属性访问挂载的节点对象
    // 在 Vue 一般情况下我们都是通过指令来操作 DOM
    // 有时候我们也需要在实例的生命周期中操作 DOM
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {},
      // create mount update destroy
      // cmud
      // crud 增删改查 Create、Read、Update、Delete
      // 所有钩子都没有参数
      // 所有钩子中的 this 都是实例本身
      // 所有情况下我们在生命周期钩子函数中需要使用 Vue 实例 this，所以千万不要把钩子函数写成箭头函数！！！
      // 一上来就调用（只调用一次）：
      //    beforeCreate
      //       在这个阶段无法获取 data、methods、computed 等数据成员
      //    created
      //       最早能放到到 data、methods 等数据成员的钩子函数
      //       所以我们建议把http请求都写到这个钩子函数中
      //       做一些和数据相关的操作
      //    beforeMount
      //      在这里是第一次可以获取到DOM模板的生命周期
      //      这里拿到的模板还没有被 Vue 解析替换
      //    mounted
      //      实例已完成挂载（第一次的解析替换），模板中的数据已完成渲染
      //    beforeUpdate
      //      然后当数据每次改变的时候（循环往复调用）：
      //      数据改变之后，模板解析替换之前，这里的模板还没有完成视图更新
      //    updated
      //      然后当数据每次改变的时候（循环往复调用）：
      //      数据改变之后，模板解析替换已完成，已经是数据更新之后的最新模板视图了
      // 然后当实例销毁的时候：
      //    beforeDestroy
      //    destroyed
      //    实例销毁之后做一些收尾工作，例如清除在实例运行期间开启的定时器
      beforeCreate () {
        console.log('============ beforeCreate =============')
        console.log('message --- ', this.message) // message ---  undefined
        console.log('el --- ', this.$el) // el ---  undefined
        console.log('')
      },

      created () {
        console.log('============ created =============')
        console.log('message --- ', this.message) // message ---  Hello Vue.js!
        console.log('el --- ', this.$el) // el ---  undefined
        console.log('')
      },

      beforeMount () {
        console.log('============ beforeMount =============')
        console.log('message --- ', this.message) // message ---  Hello Vue.js!
        console.log('el --- ', this.$el.innerHTML) // el ---  <h1>{{ message }}</h1> <input type="text" v-model="message">
        console.log('')
      },

      mounted () {
        console.log('============ mounted =============')
        console.log('message --- ', this.message) // message ---  Hello Vue.js!
        console.log('el --- ', this.$el.innerHTML) // el ---  <h1>Hello Vue.js!</h1> <input type="text">
        console.log('')
      },

      beforeUpdate () {
        console.log('============ beforeUpdate =============')
        console.log('message --- ', this.message)
        console.log('el --- ', this.$el.innerHTML)
        console.log('')
      },

      updated () {
        console.log('============ updated =============')
        console.log('message --- ', this.message)
        console.log('el --- ', this.$el.innerHTML)
        console.log('')
      },

      // activated () {
      //   console.log('============ activated =============')
      // },

      // deactivated () {
      //   console.log('============ deactivated =============')
      // },

      beforeDestroy () {
        console.log('============ beforeDestroy =============')
        console.log('message --- ', this.message)
        console.log('')
      },

      destroyed () {
        console.log('============ destroyed =============')
        console.log('message --- ', this.message)
        console.log('')
      },

      errorCaptured () {
        console.log('============ errorCaptured =============')
      }
    })
  </script>
</body>

</html>

注意，在此刻还应当知晓vue 父子组件的生命周期顺序

__畫戟__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个例子搞懂Vue实例的生命周期

复制以下代码试验下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一个例子搞懂Vue实例的生命周期</title></head><body> <div id="app"> ...
复制链接

扫一扫