一、什么是组件

组成网页独立功能基本单元(片段), 复用、维护、性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed。

一个Vue.js的应用程序,实际是由一个根组件(实例)+多个子组件(实例)组成。说白了组件其实就是自定义标签。

二、组件化意义

1. 页面元素及逻辑的复用

2. 易于页面的重构与维护

3. 提升页面渲染性能

三、组件基本用法

1.全局注册

第1步:创建组件

第2步:使用组件

2.局部组件基本用法

四、组件生命周期

一个组件从创建到销毁的过程,需要在组件的生命周期中执行自定义业务操作,这些操作就写在生命周期钩子(hook)中。钩子:组件生命周期中自动调用的函数, 组件生命周期过程自动触发的事件,常用生命周期钩子如下:

第1阶段:初始化阶段

beforeCreate: 组件实例化之后,在没有完成创建之前, 可以访问this,但不能访问data和props

created: 组件完全创建完成,可以访问this以及data和props,本地数据初始化

【注】初始化阶段,DOM已经创建完成,但没有挂载到DOM树,也就是说以上两个钩子内无法通过document访问组件内部的DOM元素

第2阶段:挂载阶段

beforeMount: 挂载前,可以访问this以及data和props,但当前组件并没有挂载到DOM树上,所以当前组件内无法通过document访问级件内容的元素

mounted: 组件挂载到DOM树上, 可以访问DOM元素,以及this/data/props,通过用来完成比较复杂的业务操作以及Ajax请求. append

第3阶段:更新跟踪阶段

beforeUpdate: 组件数据更新前

updated: 组件数据更新后,尽量不要操作引钩子

第4阶段:销毁阶段

beforeDestroy: 销毁前

destroyed: 销毁后, 当组件从DOM树上移除时触 发, remove

【注】手工释放不会自动销毁的资源,如定时器

【注】

初始加载组件,会触发beforeCreate->created->beforeMount->mounted

更新数据, 会触发 beforeUpdate -> updated

销毁组件,会触发 beforeDestroy -> destroyed

Vue.JS快速上手(组件生命周期)的更多相关文章

  1. Vue.JS快速上手(组件间的通信)

    前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...

  2. Vue.js的指令、生命周期钩子与数据选项

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...

  3. Vue.JS快速上手(指令和实例方法)

    1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...

  4. Vue.js(4)- 生命周期

    当new的时候,就创建了一个vue实例,这个实例就是vue框架的入口,也是VM层 <!DOCTYPE html> <html lang="en"> < ...

  5. Vue.JS快速上手(Vue-router 实现SPA 开发)

    一.什么是路由 URL -> 映射 -> 组件 Hash+onhashchange History.pushstate+replaceState+onpopstate 二.准备工作 组件 ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  7. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  8. vue父子组件生命周期执行顺序

    之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...

  9. Vue父子组件生命周期执行顺序及钩子函数的个人理解

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

随机推荐

  1. 9Java基础总结

    1.psvm定义的意义 public:保证了方法的访问权限 static:保证在类未被实例化的时候就能调用(加载的时机) void:不需要返回值 main:约定俗成的名字 String[] args: ...

  2. 啥是 MySQL 事务隔离级别?

    之前发过一篇文章,简单了解 MySQL 中相关的锁,里面提到了,如果我们使用的 MySQL 存储引擎为 InnoDB ,并且其事务隔离级别是 RR 可重复读的话,是可以避免幻读的. 但是没想到,都 1 ...

  3. 微信小程序云开发-数据查询的两种写法

    从数据中查询数据有两种方法: 一.js文件的写法 1.使用传统的get方法 2.使用ES6简洁写法,推荐使用此方法  二.wxml文件的代码 把请求的数据显示在页面上.

  4. PAT乙级:1015 德才论 (25分)

    1015 德才论 (25分) 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人 ...

  5. 第二篇 -- SpringBoot入门Helloworld

    之前讲Jmeter接口的时候讲过社区版怎么创建web接口,那么现在用企业版创建一个Springboot项目.企业版自带Springboot,新建起来更加简单. 第一步:新建一个项目 第二步:选择Spr ...

  6. 第五篇 -- git基础教程

    git(权威指南)基础教程第一章 git -- gitbash -- cygwin git service:gitolite 两个的目录不同 gitbash ~ windows/home/admini ...

  7. JBoss 4.x JBossMQ JMS 反序列化漏洞(CVE-2017-7504)

    检测漏洞 工具 下载地址:https://github.com/joaomatosf/JavaDeserH2HC javac -cp .:commons-collections-3.2.1.jar E ...

  8. 🔥 LeetCode 热题 HOT 100(21-30)

    46. 全排列 思路:典型回溯法 class Solution { public List<List<Integer>> permute(int[] nums) { Linke ...

  9. C++ //构造函数的分类及调用 //分类 // 按照参数分类 无参构造函数(默认构造) 有参构造函数 //按照类型分类 普通构造 拷贝构造

    1 //构造函数的分类及调用 2 //分类 3 // 按照参数分类 无参构造函数(默认构造) 有参构造函数 4 //按照类型分类 普通构造 拷贝构造 5 6 #include <iostream ...

  10. fiddler各种颜色锁说明