vue 钩子函数
beforeRouteEnter
- 方法名称: beforeRouteEnter
- 调用时机: 切换路由之前,调用该方法时,页面还没有切换
- next调用时机: activated 之后
- 注意事项: this == undefined
beforeRouteEnter(to, from, next) {
// alert('beforeRouteEnter')
next(vm =>{
// alert('beforeRouteEnter-next')
})
},
beforeCreate
- 方法名称: beforeCreate
- 调用时机: 数据观测, 初始化vue内部事件之前, beforeRouteEnter 调用之后
- 注意事项:
1: this !== undefined
2: this.$data == undefined
3: methods 里面的方法 == undefined
4: 如果有<keep-alive>缓存,该方法不会被调用
beforeCreate() {
// alert('beforeCreate')
},
created
- 方法名称: created
- 调用时机: 数据观测, 初始化vue内部事件之后 ,beforeCreate 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$data 可以访问
3: methods 里面的方法可以访问
created() {
// alert('created')
},
beforeMount
- 方法名称: beforeMount
- 调用时机: 在挂载开始之前被调用:相关的 render 函数首次被调用 ; created 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 不能访问
beforeMount() {
// alert('beforeMount')
},
mounted
- 方法名称: mounted
- 调用时机: el 被新创建的 vm.$el 替换,并挂载到实例上去之后 ; beforeMount 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 能访问
mounted() {
// alert('mounted')
},
activated
- 方法名称: activated
- 调用时机: keep-alive 组件激活时调用 ; mounted 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该会被调用
2: this.$el 能访问
activated() {
// alert('activated')
},
deactivated
- 方法名称: deactivated
- 调用时机: keep-alive 组件停用时调用 (跳出页面调用)
deactivated() {
// alert('deactivated')
},
beforeDestroy
- 方法名称: beforeDestroy
- 调用时机: 销毁页面之前 , 实例仍然完全可用
- 注意事项: $destroy()完全销毁一个实例
beforeDestroy() {
// alert('beforeDestroy')
},
destroyed
- 方法名称: destroyed
- 调用时机: 销毁页面之后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
- 注意事项: $destroy()完全销毁一个实例
destroyed() {
// alert('destroyed')
},
beforeUpdate
- 方法名称: beforeUpdate
- 调用时机: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
- 注意事项: 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程
beforeUpdate() {
// alert('beforeUpdate')
},
updated
- 方法名称: updated
- 调用时机: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁 之后调用
- 注意事项: 组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环
updated() {
// alert('updated')
},
vue 钩子函数的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- vue钩子函数的妙用之“created()和activated()”
一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- vee-validate使用教程
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
- P4011 孤岛营救问题
\(\color{#0066ff}{题目描述}\) 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克 ...
- CF959D Mahmoud and Ehab and another array construction task 数学
Mahmoud has an array a consisting of n integers. He asked Ehab to find another array b of the same l ...
- tomcat启动优化
tomcat的最佳实践运行模式 Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化. org.apache.coyote.http11.Http11Protocol ...
- angularJs分层服务开发
//控制层 app.controller('brandController' ,function($scope,$controller ,brandService){ $controller('bas ...
- spring自定义 xsd 位置
与元素类型 "beans" 相关联的属性 "xsi:schemaLocation" 的前缀 "xsi" 未绑定. 解决办法:(绿色字体) & ...
- springmvc 4.x 转json
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter&q ...
- Github常见命令整理
常见命令: 将文件增加到index/stage暂存区: git add filename 将暂存的文件更新到本地库中:git commit -m "备注内容" 将本地库更新到远程库 ...
- Sharepoint 页面超链接地址打开
SharePoint页面: http://test:81/pages/nihao.aspx 页面超链接:<a href="www.baidu.com" >百度</ ...
- 基于spring boot 和MDC实现 同一笔记录的日志跟踪实现--1.filter
同一个项目中,一般包含controller/servlet.service.dao等.1笔记录的日志贯穿于controller.service.dao中,在并发情况下,那如何找出该笔日志? 可通过以下 ...