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组件与生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue组件生命周期详解

    本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码: <!do

  • vue的生命周期钩子与父子组件的生命周期详解

    vue的生命周期钩子与父子组件的生命周期详解

    目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom

  • Vue生命周期中的组件化你知道吗

    Vue生命周期中的组件化你知道吗

    目录 引出生命周期 销毁流程 生命周期 生命周期总结 组件化 非单文件组件 组件的几个注意点 组件的嵌套 VueComponent Vue实例与组件实例 总结 引出生命周期 此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程 解绑(自定义)事件监听器 生命周期 生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n

  • Vue组件生命周期三个阶段全面总结讲解

    目录 组件生命周期 创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 运行阶段 beforeUpdate阶段 updated阶段 销毁阶段 beforeDestroy阶段 destroyed阶段 总结 组件生命周期 生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before

  • Vue组件生命周期运行原理解析

    Vue实例有一个完整的生命周期,从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据. created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以

  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的

  • Vue 全部生命周期组件梳理整理

    目录 前言 生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用 前言 今天继续加油学习

  • Vue父组件监听子组件生命周期

    比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示: //

  • Vue组件和Route的生命周期实例详解

    先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat

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

    目录 写在前面 生命周期 图解 总结 写在前面 Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统.vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑定和监听 解析template 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改. 生命周期 beforeCreate vue实例初始化,数据监听和方法属性挂载之前调用 created 数据监听和方法属性挂载之后调用,是最

  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    目录 前言 一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件 二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递 前言 在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系 本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,

  • VUE组件传参超详细讲解

    VUE组件传参超详细讲解

    目录 Vue.cli 中怎样使用自定义的组件 Vue 组件如何进行传值的 父组件向子组件传递数据 子组件向父组件传递数据 非父子组件之间传递数据 父传子例子 子传父例子 Vue组件data为什么必须是函数 组件的命名规范 Vue 组件里的定时器要怎么销毁 Vue.cli 中怎样使用自定义的组件 第一步:在 components 目录新建你的组件文件(CounterCom.vue),script一定要export default {} 第二步:在需要用的页面(组件)中导入: import Coun

  • React组件的生命周期详细描述

    React组件的生命周期详细描述

    目录 一.什么是生命周期 二.装载过程 1.constructor 2.render 3.componentWillMount和componentDidMount 三.更新过程 1.componentWillReceiveProps(nextProps) 2.shouldComponentUpdate(nextProps, nextState) 3.componentWillUpdate和componentDidUpdate 4.触发render 四.卸载过程 五.生命周期流程 1.第一次初始化

  • Vue组件的渲染流程详细讲解

    目录 引言与例子 举一个工作中能用到的例子: 实现 extend 执行流程 1. 注册流程(以Vue.component()祖册为例子): 2. 执行流程 3. 渲染流程 总结 注: 本文目的是通过源码方向来讲component组件的渲染流程 引言与例子 在我们创建Vue实例时,是通过new Vue.this._init(options)方法来进行初始化,然后再执行$mount等,那么在组件渲染时,可不可以让组件使用同一套逻辑去处理呢? 答:当然是可以的,需要使用到Vue.extend方法来实现

  • 梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    什么是生命周期? 生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程! 以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期! vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下v

  • Vue中的生命周期介绍

    Vue中的生命周期介绍

    什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreate Created beforeMount mounted beforeUpdate updated beforeDestroy destroyed Vue组件的生命周期共分为三个阶段,如下图所示: 创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次. 先看一下创建阶段完成的事情:

  • React生命周期与父子组件间通信知识点详细讲解

    React生命周期与父子组件间通信知识点详细讲解

    目录 声明周期 声明周期解析 生命周期函数 Constructor componentDidMount componentDidUpdate componentWillUnmount 不常用的生命周期函数 认识组件间的通信 参数propTypes 限制单个元素 默认 Prop 值 对于函数式组件 子组件传递父组件 声明周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能: 生命周期和

  • vue同步父子组件和异步父子组件的生命周期顺序问题

    关于vue组件的引入方式有两种 一. 同步引入 例子: import Page from '@/components/page' 二.异步引入 例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun

随机推荐