Javascript - Vue - vue对象的生命周期
2024-08-22 19:39:16
vue对象的生命周期
从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期。
创建期间的生命周期函数
<div id="box">
<h3 id="h3">{{msg}}</h3>
</div>
<h3 id="h3">{{msg}}</h3>
</div>
var vm = new Vue({
el: "#box",
data: {
msg: "hello"
},
methods: {
show: function () {
alert("执行了show函数");
}
},
//vue被完整创建之前触发,内部还没有任何属性
beforeCreate() {
this.show();//无法调用show方法
},
//vue已完整创建出来(其属性已初始化)之后触发
created: function () {
this.show(); //能调用show方法
},
//vue已完整创建出来(其属性已初始化)但数据尚未插入到dom元素时触发
beforeMount: function () {
alert(document.getElementById("h3").innerText);//输出{{msg}}的字符表示
},
//vue已完整创建出来(其属性已初始化),数据已插入dom元素时触发
mounted: function () {
alert(document.getElementById("h3").innerText); //正确输出msg的值
}
});
el: "#box",
data: {
msg: "hello"
},
methods: {
show: function () {
alert("执行了show函数");
}
},
//vue被完整创建之前触发,内部还没有任何属性
beforeCreate() {
this.show();//无法调用show方法
},
//vue已完整创建出来(其属性已初始化)之后触发
created: function () {
this.show(); //能调用show方法
},
//vue已完整创建出来(其属性已初始化)但数据尚未插入到dom元素时触发
beforeMount: function () {
alert(document.getElementById("h3").innerText);//输出{{msg}}的字符表示
},
//vue已完整创建出来(其属性已初始化),数据已插入dom元素时触发
mounted: function () {
alert(document.getElementById("h3").innerText); //正确输出msg的值
}
});
运行期间的生命周期函数
<div id="box">
<h3 id="h3">{{msg}}</h3>
<input type="button" value="OK" @click="changeData"/> //点击按钮,更改msg的值
</div>
<h3 id="h3">{{msg}}</h3>
<input type="button" value="OK" @click="changeData"/> //点击按钮,更改msg的值
</div>
var vm = new Vue({
el: "#box",
data: {
msg:"hello"
},
methods: {
changeData: function () {
this.msg = "world";
}
},
//在vue内部的data数据已经更新且页面上的数据尚未更新之前触发
beforeUpdate: function () {
alert(document.getElementById("h3").innerText); //输出hello
alert(this.msg); //输出world
},
//数据在vue内部和页面上都更新完成之后触发
updated: function () {
alert(document.getElementById("h3").innerText); //输出world
alert(this.msg); //输出world
}
});
el: "#box",
data: {
msg:"hello"
},
methods: {
changeData: function () {
this.msg = "world";
}
},
//在vue内部的data数据已经更新且页面上的数据尚未更新之前触发
beforeUpdate: function () {
alert(document.getElementById("h3").innerText); //输出hello
alert(this.msg); //输出world
},
//数据在vue内部和页面上都更新完成之后触发
updated: function () {
alert(document.getElementById("h3").innerText); //输出world
alert(this.msg); //输出world
}
});
销毁期间的生命周期函数
var vm = new Vue({
el: "#box",
beforeDestroy: function () {
//组件销毁前,此时vue的各个属性都可用
},
destroyed: function () {
//组件销毁后,此时vue的各个属性不可用
}
});
el: "#box",
beforeDestroy: function () {
//组件销毁前,此时vue的各个属性都可用
},
destroyed: function () {
//组件销毁后,此时vue的各个属性不可用
}
});
最新文章
- 安装hadoop+zookeeper ha
- Git &; GitHub
- java 线程安全不线程不安全
- Installation and Upgrading
- ios 检测应用程序升级问题
- android 布局如何支持多种不同屏幕尺寸
- [Angular Tutorial] 5-Filtering Repeaters
- Python中模块之shutil及zipfile&;tarfile的功能介绍
- 线性表 linear_list 顺序存储结构
- CentOS7操作Redis4.0
- 【转载】JVM系列一:JVM内存组成及分配
- 没有插件的sublime编辑器是没有灵魂的
- [Go] 编码规范
- 如何高效使用Google
- Node.js数据流Stream之Duplex流和Transform流
- spring boot(9)-mybatis关联映射
- Majority Number III
- 乱侃OOD
- PowerDesigner使用教程(转)
- mouseenter和hover的区别
热门文章
- 一个java实现的简单的4则运算器
- C#程序分析
- 侧边导航栏css示例
- Windows 创建计划任务 实现自动同步文件.
- 查看Jira 使用的H2数据库 数据结构以及内容的方法
- Java中String直接赋字符串和new String的区别 如String str=new String(";a";)和String str = ";a";有什么区别?
- c# DataGridView绑定DataTable对象之后总会多一行
- Flume自定义Source、Sink和Interceptor(简单功能实现)
- 小记之while循环条件的操作位置
- luogu1081 [NOIp2012]开车旅行 (STL::multiset+倍增)