vue生命周期和钩子函数
|
new Vue
|
创建vue实例
|
|
init events & liftcycle
|
开始初始化
|
|
beforeCreate
|
组件刚被创建,组件属性计算之前,如data属性等
|
|
init injections & reactivity
|
通过依赖注入导入依赖选项
|
|
created
|
组件实例创建完成,属性已绑定,此时DOM还未生成 |
|
el属性
|
检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定vm.$mount();
|
|
template
|
检查配置的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个app DOM对象,包括<div id="app">和</div>标签)都作为被填充对象替换掉填充区域
|
|
beforeMount
|
模板编译、挂载之前
|
|
create vm.$el and replace 'el' with it
|
编译,并替换了被绑定元素
|
|
mounted
|
编译、挂载
|
|
Before update
|
组件更新之前
|
|
updated
|
组件更新之后
|
|
destroy
|
当vm.$destroy()被调用,开始拆分组件和监听器,生命周期终结
|
vue生命周期和钩子函数的更多相关文章
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...
- 引入jquery利用Vue生命周期的钩子函数mounted操作DOM
html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- c#泛型约束 (where T:class)
.NET支持的类型参数约束有以下五种:where T : struct | T必须是一个结构类型where T : class ...
- 第 9 章 数据管理 - 076 - 使用 Rex-Ray volume
使用 Rex-Ray volume 在 docker1 或 docker2 上执行如下命令创建 volume: rexray volume create --size 2 'C:\share\myda ...
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- 关于被删以及限制评价后,免费更换新listing的方法
Prime Day 刚过,review被撸空,还限制留评,之后单量一泻千里,广告都花不出去,没办法,按照网上贴出来的教程自己摸索,居然成功了解除了留评限制,优点是不用移仓,省了一比费用,缺点是list ...
- 支付-stripe
国外三大支付paypal,braintree,stripe,有兴趣可以去了解一下他们的区别. 支付宝和paypal基本只需要发送charge信息请求交给后端做就ok了,那么stripe前端也只需要收集 ...
- WCF:一个棘手的问题
前言 在做即时通信项目时,手上另一个项目的颠簸,即时通信项目一直是改改停停的,一些改动比较小,没有即时的签入,然后一段时间本地的项目代码与源代码存在不少区别,在这种情况下,因为新的需求添加,需要给WC ...
- VS2013 密钥– 所有版本
Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9Visual Studio Premium 2013 KEY(密钥): ...
- 常见的HTTP状态码(HTTP Status Code)说明
作为一个互联网开发人员对于一些服务器返回的HTTP状态的意思都必须是了如指掌的,只有将这些状态码一一弄清楚,工作中遇到的各种问题才能够处理的得心应手.好了,下面就让我们来了解一下比较常见的HTTP状态 ...
- C#生成.tlb文件初认识
刚接手同事的代码,生成文件时,发现生成了一个对应的dll文件(应用程序中输出类型为类库),和一个对应的.tlb文件,但是报如下的错误: 那么.tlb文件是如何生成的呢? 选择项目->右键属性-& ...
- JSP之mysql中文乱码问题
查看数据库编码方式 show variables like 'character%'; 关于jsp页面插入数据库乱码问题. 我遇到的问题是插入数据库后后台select * from tablename ...