Vue.JS快速上手(组件生命周期)
一、什么是组件
组成网页独立功能基本单元(片段), 复用、维护、性能, 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快速上手(组件生命周期)的更多相关文章
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- Vue.js的指令、生命周期钩子与数据选项
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- Vue.js(4)- 生命周期
当new的时候,就创建了一个vue实例,这个实例就是vue框架的入口,也是VM层 <!DOCTYPE html> <html lang="en"> < ...
- Vue.JS快速上手(Vue-router 实现SPA 开发)
一.什么是路由 URL -> 映射 -> 组件 Hash+onhashchange History.pushstate+replaceState+onpopstate 二.准备工作 组件 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
- vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
随机推荐
- 9Java基础总结
1.psvm定义的意义 public:保证了方法的访问权限 static:保证在类未被实例化的时候就能调用(加载的时机) void:不需要返回值 main:约定俗成的名字 String[] args: ...
- 啥是 MySQL 事务隔离级别?
之前发过一篇文章,简单了解 MySQL 中相关的锁,里面提到了,如果我们使用的 MySQL 存储引擎为 InnoDB ,并且其事务隔离级别是 RR 可重复读的话,是可以避免幻读的. 但是没想到,都 1 ...
- 微信小程序云开发-数据查询的两种写法
从数据中查询数据有两种方法: 一.js文件的写法 1.使用传统的get方法 2.使用ES6简洁写法,推荐使用此方法 二.wxml文件的代码 把请求的数据显示在页面上.
- PAT乙级:1015 德才论 (25分)
1015 德才论 (25分) 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人 ...
- 第二篇 -- SpringBoot入门Helloworld
之前讲Jmeter接口的时候讲过社区版怎么创建web接口,那么现在用企业版创建一个Springboot项目.企业版自带Springboot,新建起来更加简单. 第一步:新建一个项目 第二步:选择Spr ...
- 第五篇 -- git基础教程
git(权威指南)基础教程第一章 git -- gitbash -- cygwin git service:gitolite 两个的目录不同 gitbash ~ windows/home/admini ...
- JBoss 4.x JBossMQ JMS 反序列化漏洞(CVE-2017-7504)
检测漏洞 工具 下载地址:https://github.com/joaomatosf/JavaDeserH2HC javac -cp .:commons-collections-3.2.1.jar E ...
- 🔥 LeetCode 热题 HOT 100(21-30)
46. 全排列 思路:典型回溯法 class Solution { public List<List<Integer>> permute(int[] nums) { Linke ...
- C++ //构造函数的分类及调用 //分类 // 按照参数分类 无参构造函数(默认构造) 有参构造函数 //按照类型分类 普通构造 拷贝构造
1 //构造函数的分类及调用 2 //分类 3 // 按照参数分类 无参构造函数(默认构造) 有参构造函数 4 //按照类型分类 普通构造 拷贝构造 5 6 #include <iostream ...
- fiddler各种颜色锁说明