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等.同时在这个过程中也会运行 ...
随机推荐
- Beautiful Soup4.4.0中文官方文档!最权威的参考---中文官方文档
最好用的解析库Beautiful Soup 解析库-----中文官方文档 https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/
- LS-DYNA SMP R11.1.0 for Win64安装破解教程
LS-DYNA SMP R11.1.0是一款极其强大的有限元仿真分析工具,可以模拟现实世界的问题.主要用于分析结构的非线性响应等操作,其全自动接触分析和广泛的材料模型使全球用户能够解决复杂的现实问题. ...
- 高德开放平台实现批量自定义marker和信息窗体显示
上篇博客提到云图无法实现文本标签标记marker,这篇博客着重实现在marker点文本标记以及自定义按钮窗体显示. 1.效果: 2.代码实现 <!doctype html> <htm ...
- Spring Messaging 远程命令执行漏洞(CVE-2018-1270)
影响版本 Spring Framework 5.0 to 5.0.4 Spring Framework 4.3 to 4.3.14 参考 https://www.it610.com/article/1 ...
- 🔥 LeetCode 热题 HOT 100(1-10)
1. 两数之和 思路一:暴力遍历所有组合 class Solution { public int[] twoSum(int[] nums, int target) { for (int i = 0; ...
- 用Python预测双色球福利彩票中奖号码(请不要当真)
前言 双色球是中国福利彩票的一种玩法. 红球一共6组,每组从1-33中抽取一个,六个互相不重复.然后蓝球是从1-16中抽取一个数字,这整个组成的双色球 python从零基础入门到实战 今天,我们就用P ...
- 一张图带你搞懂Javascript原型链关系
在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...
- promise详解 : 实现promise(附实现代码)
promise then 的特点 : then 函数的返回值是一个 promise, 可以继续调用 then 函数 回调函数 resolve 和 reject 的参数 value /reason, 可 ...
- pwnable.kr之brainf*ck
pwnable.kr之brainf*ck 今天又是被难倒的一天Orz,个人感觉pwnable.kr上的题都比较剑走偏锋,仔细做过去,一定会有很大的收获. 不多说了,今天看的是第二关的第一道题:brai ...
- SpringBoot报错:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
Spring Boot报错:Error starting ApplicationContext. To display the conditions report re-run your applic ...