vue钩子生命周期
1.beforeCreate // 组件实例刚刚被创建
2.created // 实例已经创建完成
3.beforeMount // 模板编译之前
4.mounted // 模板编译完成
5.beforeUpdate // 组件更新之前
6.updated // 组件更新之后
7.beforeDestroy // 实例销毁之前
8.destroyed // 实例销毁之后
9.activated // keep-alive 组件激活时调用
10.deactivated // keep-alive 组件停用时调用
11.errorCaptured // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
HTML
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁数据" @click="destroy">
{{msg}}
</div>
Vue
new Vue({
el: "#box",
data: {
msg: "welcome vue2.0"
}, methods: {
update(){
this.msg = "大家好!";
console.log("更新数据")
}, destroy(){
this.$destroy();
console.log("销毁数据")
}
}, // 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
beforeCreate(){
console.log("组件实例刚刚被创建,属性都没有")
}, // 实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调
created(){
console.log("实例已经创建完成, 属性已经绑定")
}, // 在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
beforeMount(){
console.log("模板编译之前")
}, // mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
mounted(){
this.$nextTick(function () {
console.log("模板编译完成")
})
}, // 组件变化时检测
// 数据更新时调用,发生在虚拟 DOM 打补丁之前, 更新之前访问现有的 DOM,比如手动移除已添加的事件监听器
beforeUpdate(){
console.log("组件更新之前")
}, // 数据更改导致的虚拟 DOM 重新渲染和打补丁
updated(){
this.$nextTick(function () {
console.log("组件更新之后")
});
}, // 实例销毁之前调用。在这一步,实例仍然完全可用。
beforeDestroy(){
console.log("实例销毁之前")
}, // Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
destroyed(){
console.log("实例销毁之后")
}
})
vue钩子生命周期的更多相关文章
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue2.0 【第二季】第4节 Vue的生命周期(钩子函数)
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- 如何解释vue的生命周期才能令面试官满意?
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- 机器学习——利用PCA来简化数据
降维技术的好处: 1.使得数据集更易使用 2.降低很多算法的计算开销 3.取出噪声 4.使得结果易懂 在已标注和未标注的数据上都有降维技术,降维的方法: 1.主成分分析(Principal Compo ...
- 编写高质量代码_改善C++程序的150个建议 读书笔记
这几天看了下这本书<编写高质量代码_改善C++程序的150个建议>,觉的蛮有收获的,再次记录下自己以前不清晰的知识点,以供学习. 编写符合标准的main函数 C语言标准规定了main函数的 ...
- 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)
/** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...
- Xcode不太常见又实用的小技巧
备份, 原文: http://rocry.com/2012/12/17/xcode-tips/ 让代码中的TODO和FIXME变成Warning 选中某个Target > Build Phase ...
- git statsh命令报错解决
git stash命令主要用于当在一个分支的开发工作未完成,却又要切换到另外一个分支进行开发的时候,除了commit原分支的代码改动的方法外,提供暂存代码的方式. git stash命令参考这篇:ht ...
- Apache中的Order Allow,Deny用法详解
本文讲述了Apache中的Order Allow,Deny用法.分享给大家供大家参考,具体如下: Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directo ...
- Java输出错误信息与调试信息
创建一个类,在该类的main()主方法中,使用System类中的out和err两个成员变量来完成调试与错误信息的输出. public class PrintErrorAndDebug { public ...
- flexbox父盒子justify-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 彻底删除weblogic域方法
1.删除 D:\Oracle\Middleware\wlserver_10.3\common\nodemanager\nodemanager.domains 里的base_domain域内容 #Dom ...
- mongo数据库查询结果不包括_id字段方法
db.GPRS_PRODUCT_HIS_FEE.find({"条件字段" : "412171211145135"},{_id:0}) db.GPRS_PRODU ...