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的时候学过 ...
随机推荐
- 简单谈谈$.merge()
var arr1 = [1,2,3]; var arr2 = [1,2,3]; console.log($.merge(arr1,arr2)) //[1,2,3,1,2,3],可见数组间只是合并,不会 ...
- oracle更改字符集为zhs16GBK
PDBalter pluggable database PDBANBOB open; alter session set container=pdbanbob; ALTER SYSTEM ENABLE ...
- Matlab - 基础知识
Matlab R2016a完全自学一本通 记在前面: (1)函数中:dim=1 按列:dim=2 按行 (2)这本书很垃圾,不建议买. (3)在数据库连接中,用两个单引号表示字符串,千万不能用双引号 ...
- vue 渲染后更新数据
this.$set(this.selGetData,level,[{},{}])this.$set(this.selGetData,1,{message:"Test add attr&quo ...
- java 32个Java面试必考点
转:https://blog.csdn.net/werqerwer 一:https://blog.csdn.net/werqerwer/article/details/88061689 Java职业 ...
- MQ & RPC 消息队列与RPC的区别与使用场景
MQ: 区别:面向数据.生产者与消费者.有缓冲节点.异步.系统级/模块级通信 选型:RabbitMQ.ActiveMQ/Apollo.ZeroMQ.memcacheQ.Redis.MSMQ.kafk ...
- Table 类(数据表基类)
只修改数据表某条记录的部分字段(究极进化): public class TableHelper { private Dictionary<string, object> temp; pub ...
- TP5.0 Redis(单例模式)(原)
看到好多面试都问设计模式,我就简单的了解了一下,顺便把之前封装好的Reis做了一次修改. 单例模式(Singleton Pattern 单件模式或单元素模式) 单例模式确保某个类只有一个实例,而且自行 ...
- AJAX如何实现和后端的交互(网页如何与 web 服务器进行通信)
在这里我们将会用一个姓名提示框案例来简单说明: 当用户在输入框中键入字符时,网页与 web 服务器进行通信,服务器返回提示信息,传给网页: 先看一下界面: 在html页面中: 思路:就是当用户在上面的 ...
- shell脚本学习之case用法及实例
case语句和判断语句[if...elif...else]功能类似;当在逻辑判断比较简单的情况下,比后者的代码量要少许多.case用法,用变量来匹配某值,如果匹配成功则执行它下面的命令,直到 ;;为止 ...