Vue生命周期钩子函数
本文共 2989 字，大约阅读时间需要 9 分钟。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script type="text/javascript" src=";</head><style></style><body>
<div id="app"><p>{ {message}}</p>数字：</div><script>var app = new Vue({ el: "#app",data: { message: "中国"},beforeCreate: function () { console.group('beforeCreate 创建前状态==============') console.log("%c%s", "color:red", "el :" + this.$el); console.log("%c%s", "color:red", "data :" + this.$data); console.log("%c%s", "color:red", "message :" + this.message) }, created: function () { console.group('created 创建后状态==============') console.log("%c%s", "color:red", "el :" + this.$el); console.log(this.$el) console.log("%c%s", "color:red", "data :" + this.$data); console.log(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(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(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(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(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(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(this.$data) console.log("%c%s", "color:red", "message :" + this.message) }}) </script>
</body></html>
1.程序运行，控制台看输出：
2.控制台输入 app.message = 'test'
转载于:https://blog.51cto.com/2014fontend/2107433
你可能感兴趣的文章
前后端分离那些事
查看>>
使用Vue-cli和NutUI快速撸一个Vue项目
查看>>
函数声明
查看>>
vue[源码]生命周期钩子的实现
查看>>
2 KD-Tree的构造与搜索
查看>>
Java POI处理大量数据导入导出
查看>>
（JS基础）DOM：遍历 与 范围
查看>>
MacBook Pro 安装 Windows 10
查看>>
如何Spring Cloud Zuul作为网关的分布式系统中整合Swagger文档在同一个页面上
查看>>
1分钟做出一个可爱鬼畜动图！
查看>>
实现一个炫酷的随机标签排列效果（颜色随机，大小随机，成菱形排列的列表）...
查看>>
flex 布局
查看>>
数字资产交易所开发：平台币快速吸金的背后
查看>>
Java线程安全和锁Synchronized概念
查看>>
mac app开发试玩（续）
查看>>
【译】提高 JavaScript 开发效率的高级 VSCode 扩展！
查看>>
npm script 钩子的使用
查看>>
产品经理爬取《人人都是产品经理》的5万篇文章，学习如何通过数据找到业务推进重点...
查看>>
基于Git生成开发周报或项目版本change log
查看>>
小程序自定义音频组件，带滚动条，IOS循环失效问题
查看>>