本文通过一个Vue实例展示了如何使用`setInterval`进行数据轮询，并在数据赋值成功后更新视图。重点讲解了Vue的生命周期钩子函数，包括`mounted`、`beforeUpdate`和`updated`，并强调在`methods`中使用`ajax`时要保存`this`上下文。同时，指出了在`setInterval`中调用方法的正确方式。
var vue = newVue({
el:"#notification",
data: {
Message:""},
methods: {
getMessage:function() {var self = this;
$.ajax({
url:"../Manage/Message/GetMessage",
type:"get",
dataType:"json",
async:false,
success:function(data) {
self.Message=data;
}
})
}
},
mounted:function() {this.getMessage();
setInterval(this.getMessage, 3000);
}
})
注：这里有三个关键点：
1、在methods里使用ajax的时候要把this先赋值一个设定的参数，不然ajsx内无法访问到this对象；
2、轮询执行要在mounted钩子方法下做，具体说明见下；
3、setInterval中调用方法时不要加()及引号等。
Vue每个钩子函数都在啥时间触发
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成
最低0.47元/天 解锁文章
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
