浅析Vue中的生命周期

最新推荐文章于 2024-06-10 22:18:41 发布

于思杨

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量351

点赞数

文章标签： vue javascript 前端生命周期

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93918834

版权

浅析Vue中的生命周期

一、介绍

1. 什么是生命周期？

vue中的声明周期指的是组件从创建到销毁的一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做 “ 生命周期钩子函数/组件钩子 ”

2. 我们为什么要了解生命周期呢？

因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途

3. 这个生命周期是谁的生命周期？

组件

二、项目中生命周期的书写（功能）

Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数

**注意：**生命周期钩子函数不允许写成箭头函数（因为箭头函数会使this指向丢失）

我们通过下面这个案例来看一下项目中是如何书写生命周期的：

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>
</body>

<script>
     Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
    // ----------------------- 初始化-----------------------
    beforeCreate () { },
    created () { },
    beforeMount () { },
    // beforeMount执行完后应该是执行render()，但由于是内部进行的，所以我们看不到 
    // render函数作用是将  jsx 转换成 vdom 对象模型 
    mounted () { },
    // ----------------------- 运行中-----------------------
    beforeUpdate () { },
    updated () { }
    
  })
  new Vue({
    el: '#app'
  })
</script>

1.初始化：

（1）beforeCreate

beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))

      // fetch('./data.json')
      //   .then( res => res.json())
      //   .then( data => this.msg = data )
      //   .catch( error => console.log( error ))

 },

运行结果：

1561549582599

组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备
数据没有获得，真实dom也没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行一次

（2）created

created () {
      console.log('2-created')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
 },

运行结果：

1561549747967

组件创建结束
数据得到了，真实dom没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行了一次

（3）beforeMount

beforeMount () {
      console.log('3-beforeMount')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
 },

运行结果：

1561550192449

组件挂载前
任务：判断el ，判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
数据可以获得，但是真实dom还没有渲染
可以进行数据请求，也提供了一次数据修改的机会
执行一次

（4）mounted

mounted () {
      console.log('4-mounted')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    //   fetch('./data.json')
    //   .then( res => res.json())
    //   .then( data => this.msg = data )
    //   .catch( error => console.log( error ))
},

运行结果：

1561550981199

组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次
可以进行真实dom的操作了（可以进行第三方库的实例化了）

综上总结：

数据请求一般写在created里面
第三方库实例化我们一般会往mounted中写

2.运行中：

运行中有触发条件：数据更新/数据发生改变

（1）beforeUpdate

beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
 },

数据不变时，函数不触发，当数据改变时，运行结果：

1561552472603

更新前
重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
可以触发多次（只要数据变化，就触发）

（2）updated

 updated () {
      console.log('updated')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
 }

数据不变时，函数不触发，当数据改变时，运行结果：

1561554075904

更新结束
真实dom得到了，数据也得到了（更新后的）
动态数据获取（第三方库实例化）

3.销毁：

（1）beforeDestroy

（2）destroyed

在这里我们将这个钩子放在一起解释，因为这两个钩子功能是一致的（这两个钩子没有太大的区别）

这两个钩子的作用：

用来做善后的，比如计时器的关闭、第三方实例的删除

触发条件：当组件销毁时

我们要知道，Vue的销毁有两种形式：

通过开关的形式 —— 外部销毁
通过调用 $destroy 方法 —— 内部销毁

对比：内部销毁 vs 外部销毁

外部销毁不仅能销毁组件，也能销毁该组件的dom结构
内部销毁只能销毁组件，不能销毁组件的dom结构

下面我们分别来看下这两种销毁的方法：

（1）通过开关的形式 —— 外部销毁

<body>
  <div id="app">
    <button @click = "flag = !flag"> 切换 </button>
    <Hello v-if = "flag"></Hello>
  </div>
  <template id="hello">
    <div>
      hello
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello',
    mounted () {
      this.time = setInterval ( () => {
        console.log( '1903' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

（2）通过调用 $destroy 方法 —— 内部销毁

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div class="hello-box">
      <button @click = "clear"> 销毁 </button>
      hello
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello',
    methods: {
      clear () {
        this.$destroy()
      }
    },
    mounted () {
      this.time = setInterval ( () => {
        console.log( '1903' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
      document.querySelector('.hello-box').remove()
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

于思杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析Vue中的生命周期

浅析Vue中的生命周期一、介绍1. 什么是生命周期？ vue中的声明周期指的是组件从创建到销毁的一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做 “ 生命周期钩子函数/组件钩子 ”2. 我们为什么要了解生命周期呢？因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩...
复制链接

扫一扫