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等.同时在这个过程中也会运行 ...
随机推荐
- python 处理protobuf 接口常见错误
python 处理protobuf 接口常见错误 1.问题 : Assignment not allowed to repeated field '> http://www.coin163.co ...
- mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)
参考:vuex 中关于 mapGetters 的作用 mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的 ...
- phpunit 远程代码执行漏洞(CVE-2017-9841)
影响版本 4.8.19 ~ 4.8.27 5.0.10 ~ 5.6.2 访问进行抓包 http://192.168.49.2:8080/vendor/phpunit/phpunit/src/Util/ ...
- Pdb— Python的调试器
参考:Pdb- Python的调试器 pdb 模块定义了一个交互式源代码调试器,用于 Python 程序.它支持在源码行间设置(有条件的)断点和单步执行,检视堆栈帧,列出源码列表,以及在任何堆栈帧的上 ...
- SprintBoot简单入门
1.什么是SpringBoot SpringBoot是基于Spring的基础上提供了一套全新的框架,其目的是为了在开发时简化Spring的相关配置及开发过程.在SpringBoot未出来之前,准备搭建 ...
- sort,uniq,tr,cut,eval命令
目录 一.排序命令sort 1.格式 2.常用选项 3.例子 二.去除重复行操作命令uniq 1.格式 2.常用选项 3.示例 三.字符转换命令tr 1.格式 2.常用选项 3.参数 4.示例 四.数 ...
- 洛谷P2210题解
题面 模拟退火练手好题. 对于这个题,一般有两种解法: 每次随机两个数交换. 每次直接打乱数组. 两个方法都可以过,我写了第一种,因为不想用stl. 代码
- 53. 最大子序和(剑指 Offer 42)
53. 最大子序和(剑指 Offer 42) 知识点:数组:前缀和:哨兵:动态规划:贪心:分治: 题目描述 输入一个整型数组,数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值. 要求 ...
- 得到、微信、美团、爱奇艺APP组件化架构实践
一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...
- 收到字节月薪35k Offer,揭秘面试流程及考点
前段时间,有个朋友又出去面试了,这次他面试目标比较清晰,面的都是业务量大.业务比较核心的部门.前前后后去了不少公司,几家大厂里,他说给他印象最深的是字节. ![](https://upload-ima ...