vue的八个生命周期
1、beforeCreate: 创建Vue实例之前(只有默认的一些生命周期和默认的一些事件,data和methods还没有被初始化)
2、Create: 数据已经在data方法中初始化了,计算属性,事件回调都已经完成,只不过dom并未挂载
挂载之前回进行得操作会找是否有需要挂载得el对象,有的话判断是否有template模板,有得话那么将模板转化为render函数,通过render函数去渲染DOM树
如果都没有得话,直接把最外层得el对象作为html得模板(data和methods已经被初始化了,最早可以调用到方法和数据的地方就是created)
3、beforeMount:render方法首次被调用生成虚拟DOM(在内存中已经渲染好了模板但并未挂载到页面中此时的页面还是旧页面)
4、mounted:挂载已经完成了,dom树已经完成渲染到页面中得,所以在这时我们可以对真实dom进行操作了(把内存中的模板替换到网页上,此时已经生成真实的dom了)
5、beforeUpdate:数据有更新,更新之前调用(data数据已经更新为最新的数据,页面的数据还是旧的)
6、updated:数据更新之后(页面数据和data数据均被更新)
7、beforeDestroy:实例销毁前(进入销毁阶段,此时所有的data和methods还未被销毁,处于可用状态)
8、destroyed:组件销毁之后(销毁完成,所有的数据,方法,指令、过滤器都被销毁,不可使用了)
vue的八个生命周期的更多相关文章
- Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Vue(十)生命周期
Vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段 <script> window.onload=function(){ let vm = new Vue({ el: ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- 【Vue.js学习】生命周期及数据绑定
一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...
随机推荐
- 爬取网页内容后写入文件报错UnicodeEncodeError: 'gbk' codec can't encode的问题解决方案
老猿使用如下代码读取网页内容: req = urllib.request.Request(url=url,headers=header) text = urllib.request.urlopen(r ...
- 第15.10节 PyQt(Python+Qt)入门学习:Qt Designer可视化设计界面组件与QWidget类相关的组件属性详解
PyQt学习有阵子了,对章节的骨架基本考虑好了,准备本节就写组件的属性的,结果一是日常工作繁忙,经常晚上还要加班,二是Qt的组件属性很多,只能逐一学习.研究和整理,花的时间有点长,不过终于将可视化设计 ...
- 从零开始的pickle反序列化学习
前言 在XCTF高校战疫之中,我看到了一道pickle反序列化的题目,但因为太菜了花了好久才做出来,最近正好在学flask,直接配合pickle学一下. 找了半天终于找到一个大佬,这里就结合大佬的文章 ...
- IDM 汉化版v1.1.10 (NDM汉化版)
提升你的下载速度最多达 5 倍,安排下载时程,或续传一半的软件.Internet Download Manager 的续传功能可以恢复因为断线.网络问题.计算机当机甚至无预警的停电导致下传到一半的软件 ...
- LeetCode初级算法之数组:189 旋转数组
旋转数组 题目地址:https://leetcode-cn.com/problems/rotate-array/ 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输 ...
- 使用HBase Shell命令
使用HBase Shell命令 或 使用HBase Java API完成: 列出HBase所有的表的相关信息,例如表名: 在终端打印出指定的表的所有记录数据: 向已经创建好的表添加和删除指定的列族或列 ...
- uniapp-父组件数组变化同步子组件视图渲染
项目中子组件封装的是一个picker,父组件需要传数组到子组件中. 如果父组件的数组出现变更,视图中的子组件或许不能直接刷新渲染,需要反复弹起几下才能看到. 试过深度监听,但都没有用,ref也不知道为 ...
- C++ 虚函数表与多态 —— 虚函数表的内存布局
C++面试经常会被问的问题就是多态原理.如果对C++面向对象本质理解不是特别好,问到这里就会崩. 下面从基本到原理,详细说说多态的实现:虚函数 & 虚函数表. 1. 多态的本质: 形 ...
- .NET Core +Angular 项目 部署到CentOS
前言: 最近公司需要开发项目能在Linux系统上运行,示例开发项目采用.Net Core + Angular开发:理论上完全支持跨平台. 但是实践才是检验真理的唯一标准:那么还是动手来验证实现下:过程 ...
- Intellij idea 创建java web
https://blog.csdn.net/qq_41592771/article/details/80577791 将tomcat服务器lib目录下面的servlet-api.jar复制到lib文件 ...