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的时候学过 ...
随机推荐
- springboot junit
1 添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...
- 7.12 其他面向对象设计原则3: 依赖倒置原则DIP
其他面向对象设计原则3: 依赖倒置原则DIP The Dependency Inversion Principle7.1 依赖倒置原则DIP The Dependency Inversion Pr ...
- UML图概述
UML图概述 UML是一种分析设计语言,即一种建模语言.UML是由图形符号表达的建模语言,其结构主要包括视图.图.模型元素和通用机制四部分. UML包括5种视图,分别是用户视图.结构视图.行为视图.实 ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- maven配置及使用
配置maven工程.从官网下载maven工具,然后解压到磁盘某个目录下即可. 计算机->属性->高级系统设置->环境变量. 新建如下变量: 变量名:MAVEN_HOME 变量值:C: ...
- ThinkPHP部署在lnmp环境中碰到的问题
先说一下问题: 因为tp5的入口文件在public目录下,而Application和public同级, 我用的lnmp1.5默认做了防跨站目录设置,所以导致入口文件无法进入application目录, ...
- java接口特性
java接口特性 (1)接口可以被实例化 ,常作为类型使用 (2)实现类必须实现接口的所有方法 ,抽象类除外 (3)实现类可以实现多个几口 java中的多继承 (4)接口中的变量都是静态变量
- LVS初始使用步骤
LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是www.linuxvirtualserver.org. 现在L ...
- Mybatis面试题
面试题示例 1.JDBC编程有哪些不足之处,MyBatis是如何解决这些问题的? 1)数据库链接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库链接池可解决此问题. 解决:在SqlMap ...
- 【js高程学习笔记】关于变量值和函数参数
变量包含了两种不同类型的值: 基本类型 (Undefined.null.Boolean.Number.string都属于基本类型) 引用类型 (对象) 两种值在赋值上不同的是: 将一个引用类型的值(对 ...