Vue组件与生命周期详细讲解

 更新时间:2022年10月17日 17:13:27   作者:爱思考的猪  
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期

写在前面

Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统。vue实例在渲染成html的时候往往要经过以下的步骤:

  • 读取数据和方法,设置数据绑定和监听
  • 解析template
  • 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改。

生命周期

  • beforeCreate

vue实例初始化,数据监听和方法属性挂载之前调用

  • created

数据监听和方法属性挂载之后调用,是最早可以获取和操作数据及方法的数据

  • beforeMounted

template解析之后调用,这个时候实例还没挂载到dom上

  • mounted

replace el之后调用,实例已经挂载到dom上,是最早可以操作dom的时候

  • beforeUpdate

组件中的数据发生变化的时候执行,此时数据已经和页面保持同步,只是页面还没更新

  • updated

数据更新后,页面也是最新的

  • beforeDestroy

实例销毁之前调用,实例上的方法和属性还可以调用

  • destroyed

实例已经销毁,实例上的东西已经不可以使用

图解

问: 什么时候可以操作dom?

outer html(直接渲染在根节点下面的)在beforcreate阶段就可以操作,使用template渲染的要在mounted阶段才可以操作

  <div id='app'>
    <span id='span1'> 直接渲染的文字 </span>
    <span id='span2'> {{message}} <span>
    <com id='span3'></com>
  </div>
  <script>
    function deepClone(obj){
      return obj && JSON.parse(JSON.stringify(obj));
    };
    </script>
<script>
  function test(stage) {
    var span1 = document.getElementById('span1');
    var span2 = document.getElementById('span2');
    var span3 = document.getElementById('span3');
    debugger;
  };
  Vue.component('com', {
    template: '<span>使用template渲染的文字</span>'
  });
  var vm = new Vue({
    el:'#app',
    data: {
      message: 'hello vue!'
    },
    beforeCreate() {
      test('beforeCreate');
    },
    created() {
      test('created');
    },
    beforeMount() {
      test('beforeMount');
    },
    mounted() {
      test('mounted');
    }
  });
</script>

beforeCreate阶段、created阶段、beforeMount阶段

可以操作outer html但获取不到data中的数据,template这个时候还没渲染,无法被获取到

mounted阶段

mounted阶段页面已经渲染完毕,可以操作所有的dom

总结

  1. created阶段将数据和事件注入,并完成了数据观测,是最早可以获取和使用data、method的时候
  2. beforeMount阶段进行template的解析和渲染
  3. mounted阶段将实例注入dom,是最早可以操作dom的时候
  4. beforeMount在数据发生变化后执行,数据已经更新
  5. mounted阶段在视图更新后执行,数据和页面已经同步
  6. beforDestroy在实例/组件销毁之前执行,还可以使用组件的方法和属性
  7. destroyed 实例销毁后执行,不能再使用实例

组件的生命周期还有actived和deactived是keep-alive的专属。

到此这篇关于Vue组件与生命周期详细讲解的文章就介绍到这了,更多相关Vue组件与生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue瀑布流插件的使用示例

    Vue瀑布流插件的使用示例

    这篇文章主要介绍了Vue瀑布流插件的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue做网页开场视频的实例代码

    vue做网页开场视频的实例代码

    这篇文章主要介绍了vue做网页开场视频的实例代码,需要的朋友可以参考下
    2017-10-10
  • 解决Vue开发中对话框被遮罩层挡住的问题

    解决Vue开发中对话框被遮罩层挡住的问题

    在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢?下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法,一起看看吧
    2018-11-11
  • vue实现echarts饼图/柱状图点击事件实例

    vue实现echarts饼图/柱状图点击事件实例

    echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue.js指令和组件详细介绍及实例

    vue.js指令和组件详细介绍及实例

    这篇文章主要介绍了vue.js功能介绍 - 指令,组件详细介绍及实例,详细的介绍了指令和组件的用法,有兴趣的可以了解一下。
    2017-04-04
  • 如何将百度地图包装成Vue的组件的方法步骤

    如何将百度地图包装成Vue的组件的方法步骤

    这篇文章主要介绍了如何将百度地图包装成Vue的组件的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue element ui用户展示页面的实例

    Vue element ui用户展示页面的实例

    这篇文章主要介绍了Vue element ui用户展示页面的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue项目中使用Svg的方法

    vue项目中使用Svg的方法

    本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • 使用vue-cli创建项目并webpack打包的操作方法

    使用vue-cli创建项目并webpack打包的操作方法

    本文给大家分享使用vue-cli创建项目基于webpack模板打包的配置方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-07-07
  • Vue 实现前进刷新后退不刷新的效果

    Vue 实现前进刷新后退不刷新的效果

    这篇文章主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06

最新评论