vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子
知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题。以下是尤雨溪回复的一部分:
作为一个个人项目的 Vue 没有这样的宣传资源,也并不是为了改变用户。所以从设计的角度上来说,Vue 首先考虑的是假设用户只掌握了 web 基础知识 (HTML, CSS, JS) 的情况下,如何能够最快理解和上手,实现一个看得见摸得着的应用。
--------------
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
生命周期图示(中英文版)
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
vue生命周期英文版
<!DOCTYPE html> <html> <head><title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body><div id="app"><p>{{ message }}</p> </div><script type="text/javascript">var app = new Vue({el: '#app',data: {message : "xuxiao is boy" },beforeCreate: function () {console.group('beforeCreate 创建前状态===============》');console.log("%c%s", "color:red" , "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) },created: function () {console.group('created 创建完毕状态===============》');console.log("%c%s", "color:red","el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeMount: function () {console.group('beforeMount 挂载前状态===============》');console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },mounted: function () {console.group('mounted 挂载结束状态===============》');console.log("%c%s", "color:red","el : " + this.$el); //已被初始化console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成状态===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },beforeDestroy: function () {console.group('beforeDestroy 销毁前状态===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },destroyed: function () {console.group('destroyed 销毁完成状态===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message)}}) </script> </body> </html>
create 和 mounted 相关
在chrome
浏览器里打开,F12
看console
就能发现beforecreated
:el 和 data 并未初始化
created
:完成了 data 数据的初始化,el没有
beforeMount
:完成了 el 和 data 初始化
mounted
:完成挂载
el还是 {{message}},这里就是应用的 Virtual DOM
(虚拟Dom)技术,先把坑占住了。到后面mounted
挂载的时候再把值渲染进去。
update 相关
在 chrome console里执行以下命令
app.message= 'yes !! I do';
就能看到data里的值被修改后,将会触发update的操作。
destroy 相关
有关于销毁,暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。
app.$destroy();
beforecreate
: 举个栗子:可以在这加个loading事件created
:在这结束loading,还做一些初始化,实现函数自执行mounted
: 在这发起后端请求,拿回数据,配合路由钩子做一些事情beforeDestroy
: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容
转载于:https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html
vue生命周期图示中英文版Vue实例生命周期钩子相关推荐
- vue的js文件中获取vue实例
1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: ' ...
- vue学习入门——Idea中安装vue插件
在Idea中安装插件: 安装完成之后重启idea,发现new没有Vue component 解决办法如下: Settings>Editor>File and Code Templates, ...
- java final生命周期_Java中final局部变量的生命周期
从C转Java过来,一些基础理论不是太扎实,在使用final局部变量时出现了理解错误,今天验证了一下,记下笔记. 从C转Java过来,一些基础理论不是太扎实,在使用final局部变量时出现了理解错误, ...
- 【Vue】在 Chrome 中安装 Vue 扩展程序
安装安装包 1.解包并进入解压后的 vue-devtools-master 文件夹 2.在搜索栏输入 cmd ,进入命令提示符案板 继续 3.命令行中输入npm install,安装所需依赖包,(np ...
- java 实例的生命周期_[Java教程]Vue实例生命周期
[Java教程]Vue实例生命周期 0 2017-08-15 19:00:09 前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一 ...
- (vue基础试炼_07)Vue实例生命周期函数
文章目录 一.生命周期图示 二.常见的生命周期函数 三.生命周期函数执行场景 四.测试代码 五.项目开源地址 一.生命周期图示 二.常见的生命周期函数 常见的生命周期函数 执行的时间 beforeCr ...
- VUE自学日志02-应用与组件实例
准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例 创建一个应用实例创建一个应 ...
- Vue-生命周期的理解+生命周期图示的理解
了解组件 从创建-> 运行->销毁 的三个阶段 了解 vue 生命周期的一个过程 生命周期 生命周期(Life Cycle) 是指一个组件从创建 -> 运行 -> 销毁的整个阶 ...
- (三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
最新文章
- 机器学习面试题集 - 如何进行 A/B 测试
- 生日QQ配对【找到你生日QQ了吗?】
- go string 换行_从词法分析角度聊 Go 代码组成
- 洗牌算法汇总以及测试洗牌程序的正确性
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(92)-打印EasyUI 的datagrid表格
- 怎样查看cudnn版本_ubuntu16.04+Geforce GTX1060安装CUDA和cuDNN
- 基于JAVA+SpringMVC+Mybatis+MYSQL的个人记账管理系统
- 海外仓储系统快速提升企业仓储物流效能的最有效手段?
- 三星530换固态硬盘_也许是目前性价比最高的固态硬盘!三星870 QVO快速体验
- Zotero IEEE trans期刊cls格式调整
- tracert原理和使用方法
- Tungsten Replicator
- 增长黑客手册:如何用数据驱动爆发式增长_思维导图
- 2021租房合同样板
- python金融大数据分析师工资待遇_国内数据分析待遇如何?
- QQ群—取消对某人的屏蔽
- 腾讯云Ubuntu18.04配置OpenPCDet深度学习环境
- 三跨计算机考研学校推荐,考研实现三跨—跨学校,跨地区,跨学科现实吗?
- 计算机平面设计基础 photoshop基本操作
- 如何用ADB命令删除Android中的系统应用
热门文章
- 【收藏】解决关闭Hadoop时no namenode to stop异常
- docker-compose部署nginx,挂载外置配置文件及项目
- 【收藏】MySQL出现data too long for column ‘name‘ at row 1 解决
- xshell 5如何选中即复制,右键即粘贴
- JavaFX SceneBuilder设置按钮的背景颜色
- Centos7安装Python3并更改默认版本为python3(编译安装)
- idea pycharm设置鼠标滚轮改变字体大小的方法
- 垃圾回收器的基本原理是什么?
- Linux 文件权限管理命令chmod、chown
- 学习数据结构和算法前瞻