松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › 生命周期

生命周期

迦娜王
2年前Vue2.x从零开始
784 0 0

生命周期

在开始动手编写代码之前,我们必须要对vue的生命周期进行了解,这有助于减少和解决实践中产生的问题。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

在官网上我们可以看到这么一张图,这张图直观的表述了每个生命钩子的顺序。

file

在我们还没很熟练的使用vue之前,我们没必要一下子全搞懂这张图,暂时我们只要知道mounted和beforeDestroy这2个钩子就可以了。下面就来详解下这2个钩子。

mounted

mounted是一个比较常用的钩子,mounted处在当前dom挂载完毕的位置,这意味着当前该时刻, 元素已经被挂载。但是要注意一点,mounted只保证当前组件dom挂载完毕,不能保证当前组件内的其他组件也一同挂载完毕。不过好在vue提供了一个nextTick方法,通过该方法我们可以等到当前组件全部渲染完毕再执行我们的代码。

我们把mounted添加到代码里面:

<template>
    <div>{{val}}<div>
</template>
<script>
export default {
    data(){
        return {
            val:'text'
        }
    },
    mounted(){
        //这里可以写当前组件挂载完毕后的代码:请求数据等

        this.$nextTick(()=>{
            //这里写的代码,需要等到当前组件UI渲染完毕才会执行
        })

    }
}
</script>

beforeDestroy

beforeDestroy钩子也比较常用,Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。比如我们页面上有定时器,那么我最好在destroyed钩子里面进行销毁。

<template>
    <div>{{val}}<div>
</template>
<script>
export default {
    data(){
        return {
            timer:null
        }
    },
    mounted(){
        //初始化一个 每秒输出out的定时器
        this.timer = setInterval(()=>{
            console.log('out')
        },1000)
    },
    beforeDestroy(){
        //这里进行销毁timer
        if(this.timer){
            clearInterval(this.timer)
        }

    }
}
</script>

防坑指南:如果使用了keeplived,那么我们的组件加载完毕后会常驻内存,切换页面的时候不会调用beforeDestroy钩子,因此我们需要在deactivated钩子内调用我们的代码。同理,mounted也不会被调用第二次,需要使用activated钩子。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
数据驱动和dom驱动的区别
上一篇
安装vue
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 生命周期
  • mounted
  • beforeDestroy
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 0
  • 0
  • Top