vue 项目实战 (生命周期钩子)
开篇先来一张图
下图是官方展示的生命周期图
Vue实例的生命周期钩子函数(8个)
1. beforeCreate
刚 new了一个组件,无法访问到数据和真实的dom,基本上这个好像不能干啥
2. created
data属性完成了赋值,可以对数据进行修改但是不会触发updated,在这里可以做初始数据的获取
3. beforeMount
render准备要渲染了,函数中虚拟dom已经创建完成,这时候改变数据也不会触发update,在这里可以做初始数据的获取
4. mounted
开始render,渲染出真实dom,执行mounted钩子函数,组件已经出现在页面中,数据,事件,都DOM都处理好了。这里你 可以改是进行真实的DOM操作
5. beforeUpdate
组件,实例数据更新之前会执行的函数,虚拟DOM会重新构建虚拟DOM,与上一次的虚拟DOM对比后重新渲染。切记不可 进行数据修改否则会出现死循环
6. updated
更新完会执行的函数,切记不可进行数据修改否则会出现死循环
7. beforeDestroy
实例被销毁之前会执行的函数,做善后的工作,清除计时器,清除非指令绑定的事件等等
8. destroyed
实例被销毁后会执行的函数,也可以做善后工作。
<template>
<div class="hello">
Hello World!
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
beforeCreate: function() {
console.log("data属性光声明没有赋值的时候");
},
created: function() {
console.log("data属性完成了赋值");
},
beforeMount: function() {
console.log("页面上的{{name}}还没有被渲染成真正的数据");
},
mounted: function() {
console.log("页面上的{{name}}被渲染成真正的数据");
},
beforeUpdate: function() {
console.log(" 数据(data属性)更新之前会执行的函数");
},
updated: function() {
console.log("数据(data属性)更新完会执行的函数");
},
beforeDestroy: function() {
console.log("实例被销毁之前会执行的函数");
},
destroyed: function() {
console.log("实例被销毁后会执行的函数");
}
};
</script> <style scoped>
</style>
console这样一个输出顺序:
大概这样一个 生命周期钩子函数执行的顺序,包括我之前是用angular开发跟vue一样 他也有自己的生命周期钩子函数。
生命周期简单来说就是一个组件从创建到初始化到销毁的一个过程,在这个过程中有这些生命周期钩子函数我们可以更方便的去操作整一个组件。
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
vue 项目实战 (生命周期钩子)的更多相关文章
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- Vue学习之生命周期钩子小结(四)
一.生命周期钩子(函数): 1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运 ...
- Vue项目的创建、路由、及生命周期钩子
目录 一.Vue项目搭建 1.环境搭建 2.项目的创建 3.pycharm配置并启动vue项目 4.vue项目目录结构分析 5.Vue根据配置重新构建依赖 二.Vue项目创建时发生了什么 三.项目初始 ...
- vue环境配置脚手架搭建,生命周期,钩子
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue 父子component生命周期
如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要.正确理解组件之间的关系,才能让代码按照我们与预料方式工作.最近参与了一个Vue.js的项 ...
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
随机推荐
- openTSDB (rpm)安装 + Grafana 视图
1.提前安装环境 操作系统:CentOS OpenTSDB版本:2.0.1 JDK版本:1.8.1_101 Apache HBase版本:1.1.2 2.安装Grafana yum安装grafana ...
- canvas画布如何画图案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- About certificate
证书spec, X509, 类似规定了一个目录结构.其中重要内容包括 issuer: who isued this certificate subject: the ID of this certif ...
- vue history模式 apache配置
我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不 ...
- 计蒜客 2019 蓝桥杯省赛 B 组模拟赛(一)
D题:马的管辖 二进制枚举方案.判断该方案是否全部能被覆盖,将最优方案存下来并进行剪枝. #include<iostream> #include<cstring> #inclu ...
- Linux学习---内存分布基础
内核空间 应用程序不允许访问 -----------------------------------------3G 栈空间 局部变量 RW ----------------------------- ...
- Win7 VS2017 NASM编译FFMPEG(2018.12.22)
今天无意中在gayhub发现个牛逼工程,全VS工程编译FFMPEG库,包括依赖库全是VS生成的,无需Mingw等Linux环境. 简单记录下过程,以防将来重装系统等情况,备忘. https://git ...
- php学习备注笔记
一: PHP内核相关 http://blog.csdn.net/ywh147/article/details/40188411 [深入PHP内核(二)——SAPI探究] http://www.nowa ...
- mvc 路由伪静态实现
很多网站都采用伪静态,例如以html.shtml等结尾的url,mvc的路由可以轻松实现. 配置路由 默认路由配置 添加伪静态路由 mvc的路由原理是从上往下匹配的,所以只需要在后面添加自己配置的路由 ...
- influence maximization
Robust Influence Maximization 首先简要介绍一下这个问题:在一个社交网络图中寻找固定数量的节点,使得这些节点对所有节点的影响值尽可能的大.这个问题由于在病毒式营销,谣言监控 ...