Vue:生命周期函数的作用
Vue:生命周期函数的作用
前言
Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。
各函数的作用
beforeCreated()
:- 表示在实例被完全初始化之前调用该函数;
created()
:- 此时Vue的数据和方法(data,methods)都已经初始化好了;
- 如果要操作data和methods,最早需要在这个函数中操作;
- created完成后就开始编译html模板,把模板字符串渲染为dom,最终在内存中生成一个已经编译完成的最终模板;
- 最终模板仅仅存在于内存中,并没有被渲染到页面中;
beforeMount()
:- 此时模板已经编译完成,但也还未渲染到页面;
mounted()
:- 此时页面已经渲染完成,文档中已存在dom节点;
- 若要操作dom节点,最早需要在这个函数中进行;
- 执行完mounted后,表示实例已经创建完毕,若无其他操作,内存不会再有活动;
beforeUpdate()
:- 此时页面已经完全挂载,此函数表示在页面数据发生改变时执行;
- 数据改变时,页面的数据并没有更新,但data中的数据已经更新完毕;
updated()
:- 页面完成数据更新;
beforeDestory()
:- 当执行此函数时,Vue实例进入销毁的阶段;
- 此时的filter、data、methods还能够继续使用;
destoryed()
:- 组件已经全部销毁,所有的data、methods都无法使用
详细流程图
参考文献: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90.
Vue:生命周期函数的作用相关推荐
- Vue生命周期函数(钩子函数)
生命周期函数相关 什么是周期函数 从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类: 创 ...
- [vue] vue生命周期的作用是什么?
[vue] vue生命周期的作用是什么? 准确地控制数据流和其对DOM的影响 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前 ...
- Vue 生命周期函数
Vue 生命周期函数 代码解释 <!DOCTYPE html> <html> <head><title>钩子函数</title><me ...
- vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数,简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
- 【Vue笔记】Vue生命周期函数详细图解
Vue生命周期函数详细图解如下:
- vue生命周期函数(应用场景要讲到):
文章目录 一,vue生命周期函数: 一,vue生命周期函数: vue的生命周期函数又叫钩子函数: 生命周期方法详解: beforeCreate //详情 //实例创建前,这个时候的 el,data,m ...
- Vue生命周期函数解析及各个组件间调用顺序
Vue生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed befo ...
- 面试题:vue生命周期函数都有哪些,请列出并说出其功能?
今天给大家总结了 java开发师常见面试题[校招] 第一部分:介绍vue生命周期函数有哪些? 第二部分:以一个案例进行展示 一.vue生命周期函数 beforeCreate:在实例部分(事件/生命周期 ...
- Vue生命周期及作用
1.什么是Vue生命周期? vue生命周期是指vue中实例或组件从创建到销毁的过程. 2.Vue生命周期的作用是什么? 在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重 ...
最新文章
- 现在转行学习UI设计好不好就业
- web自适应尺寸方法
- 所有可能出栈序列总数
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- sqlserver 2008阻止保存要求重新创建表的更改
- 数学建模(7)---建模开始
- framework7日期插件使用
- 模糊搜索框(H5),兼容安卓和ios(令人头大的ios输入法)
- MySQL安装(详细,适合小白)
- 第13课:JSP动作 Indude动作和指令的区别(JSP教程 JSP入门实战教程 黄菊华Java网站开发系列教程)
- SharePoint开发环境配置
- WRF模式运行及相关问题的解决
- spring中<tx:annotation-driven>标签转为注解@EnableTransactionManagement
- Roblox剑九之剑二
- Linux下进程状态转换,Linux进程状态转换图
- 【原创】【I2C】I2C介绍
- 任正非揭秘华为鸿蒙,任正非揭秘!华为鸿蒙系统,比安卓、苹果系统快,为物联网而生...
- 计算机窗口演示,认识电脑窗口
- 概率论的学习和整理--番外11:10球里8红球2白球,抽俩次抽中白球的概率是多少呢? 一个例题的不同方法
- Python3 03 网络爬虫 <下载漫画>
热门文章
- FLEX(Flipboard Explorer)简介
- BackSwap银行***利用三种全新技术清空银行帐户
- python取整的几种方法,Python中取整的几种方法小结
- 有哪些适合女生戴的蓝牙耳机?适合女生用的蓝牙耳机推荐
- SpringBoot出错:Consider defining a bean of type ‘com.mapper.UserMapper‘
- 设计模式——工厂模式(简单工厂/工厂/抽象)
- u盘文件突然不见了怎么恢复?这样可以恢复!
- python当前时间加一分钟,在python中向时间戳添加分钟
- python3.x中使用HTMLTestRunner.py
- Windows 下使用 nmap ncat 命令测试 UDP 端口连接