beforeCreate
- 组件创建之前,初始化之前,在这里访问不到组件的状态(数据)
created
beforeMount
- 组件挂载之前, 这里还没挂载到dom标签,在这里是最后一次修改状态的机会, 在这里可以操作ajax 但是会因为一些原因会操作两次, 所以在这里不建议
mounted
- dom挂载完成了, 访问dom-swiper","监听事件, ajax, 设置定时器
beforeUpdate
updated
- 获取跟新后的dom, 在这里使用依赖dom操作的库, 需要知道状态更新完, 什么时候dom更新的库
beforeDestroy
destroyed
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<hr><hr><h3>{{ name }}</h3>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
name:"xiaoming"
},
methods:{
},
beforeCreate(){
console.log("组件创建之前,初始化之前,在这里访问不到组件的状态(数据)")
console.log("beforeCreate-----", this.name)
},
created(){
console.log("初始化完成, 这里已经可以访问状态(数据)")
console.log("created--", this.name)
},
beforeMount(){
console.log("beforeMount----",)
console.log("组件挂载之前, 这里还没挂载到dom标签,在这里是最后一次修改状态的机会, 在这里可以操作ajax 但是会因为一些原因会操作两次, 所以在这里不建议")
},
mounted(){
console.log("mounted---"," dom挂载完成了, 访问dom-swiper","监听事件, ajax, 设置定时器")
},
beforeUpdate(){
console.log("beforeUpdate----")
},
updated(){
console.log("updated--", "获取跟新后的dom, 在这里使用依赖dom操作的库, 需要知道状态更新完, 什么时候dom更新的库")
console.log()
},
beforeDestroy(){
console.log("beforeDestroy-----")
},
destroyed(){
console.log(" destroyed--取消定时器, window事件进行解绑操作")
}
})
</script>
</body>
</html>
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
