Vue.js 生命周期的应用
生命周期示意图
值得注意的几个钩子函数
activated
类型:
Function
详细:
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考:
deactivated
类型:
Function
详细:
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
参考:
updated
类型:
Function
详细:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意
updated
不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉updated
:updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}该钩子在服务器端渲染期间不被调用。
一般情况下,如果采用 jQuery 对加载完成的元素进行处理时,可以将代码写入此钩子函数中则比较适宜。如:内容页中的图片过大,我们可以将所有图片加上一个 .img-responsive 的 class,利用 BootStrap 的便利性,让图片的显示更加的符合我们的期望。
Vue.js 生命周期的应用的更多相关文章
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- vue.js生命周期钩子函数及缓存
在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...
- vue.js 生命周期
boforeCreate 创建之前 created 创建之后 boforeMount 实例化之前 mounted 实例化之后 话不多说,直接上代码 & ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue:生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue实例生命周期+vueRoter
Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...
随机推荐
- Github入门 - Github基本使用及Github桌面版使用
知识内容: 1.版本控制 2.Git介绍 3.Github介绍及基本使用 4.Github桌面版介绍及安装 5.Github桌面版基础使用 6.Github桌面版进阶使用 参考: http://www ...
- 3.2_k-近邻算法案例分析
k-近邻算法案例分析 本案例使用最著名的”鸢尾“数据集,该数据集曾经被Fisher用在经典论文中,目前作为教科书般的数据样本预存在Scikit-learn的工具包中. 读入Iris数据集细节资 ...
- jsp 传多个值给后端
页面上是这样 http://localhost:8080/smartcloset/getClothByCategory/1/11 直接用/分 后台是这样取的 @RequestMapping(valu ...
- 文件的编辑命令-echo/cat
touch test.yaml echo "line1 line2" >> test.yaml cat test.yaml line1 line2 # 创建test.y ...
- elk6.22
启动错误: 参考网站:https://blog.csdn.net/feinifi/article/details/73633235?utm_source=itdadao&utm_medium= ...
- jpa-入门测试
package com.atguigu.jpa.test; import java.util.Date;import java.util.List; import javax.persistence. ...
- java ee7 配置文件
java ee7 配置文件 1. 项目目录 # ee pom.xml Maven构建文件 /src/main/java Java源文件 /src/main/resource ...
- 机器学习入门-贝叶斯统计语料库的词频.groupby() collections
1..groupby()[].agg(by={}) 2. collections.de...(lambda:1) 统计的单词是语料库中所有的词, 对Dataframe统计单词词频,同时增加一列数据co ...
- python, Django csrf token的问题
环境 Window 7 Python2.7 Django1.4.1 sqlite3 问题 在使用Django搭建好测试环境后,写了一个提交POST表单提交留言的测试页面. 如图: 填写表单,点击“提交 ...
- MySQLReport
简介: MySQLReport 一.安装 shell > yum -y install mysqlreport perl-DBD-MySQL 二.使用 shell > mysqlrepor ...