vue钩子函数update的作用就是数据修改时执行，那么在调用后updated函数被反复触发是什么原因呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-color="oRed">{{msg}}</h2>
<button @click="changeMsg()">修改msg</button>
<br>
<input type="text" v-focus>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "你过来呀!",
oRed: "red"
},
methods: {
changeMsg() {
this.msg = "求求你们别打了";
}
},
//定义私有指令
directives: {
// 对象的属性就是指令名
color: { //color 指令名
bind: function(el, args) {
el.style.color = args.value;
},
//钩子函数inserted--自定义指令
inserted: function(el) {
console.log("inserted");
},
//钩子函数update--数据修改时执行
update: function(el) {
console.log("修改数据时执行了update钩子函数");
},
//钩子函数componentUpdated--数据修改完执行
componentUpdated: function(el) {
console.log("数据修改完执行了componentUpdated钩子函数");
},
//钩子函数unbind--只调用一次,指令与元素解绑时调用
unbind: function() {
console.log("元素与指令解绑后调用unbind钩子函数");
}
//销毁见下方↓
},
// v-focus 自动获取表单焦点
focus: {
//bind无法自动选中的原因:
inserted: function(el) {
el.focus();
}
}
}
});
// 销毁
vm.$destroy();
</script>
</html>官方文档:beforeUpdate()是针对视图层的，只有页面中渲染的数据发生改变或者渲染，才会触发这个生命周期函数,updated()中修改数据是会触发beforeUpdate()的
原因:如果是请求方法里面
1.操作了data()里面的值
2.给data()里面的值赋了新值
因为页面已经挂载完成了,如果操作data()的值,页面又会重新走更新周期里的方法,就会不停的发送请求,把操作data()的代码注释掉就不会一直发送请求了。
data(){
return{
loading:false
}
},
beforeUpdate(){
this.getQueryList()
},
methods:{
async getQueryList(){
this.loading = true //这个是操作data()里的loading
let _this = this,
api = _this.$api.demo,
params = {
}
const res = await _this.$post(api,params)
//省略以下
}
}改为
data(){
return{
loading:false
}
},
beforeUpdate(){
this.getQueryList()
},
methods:{
//去掉data()里面的值就不会一直发请求了
async getQueryList(){
let _this = this,
api = _this.$api.demo,
params = {
}
const res = await _this.$post(api,params)
//省略以下
}
}总结:尽量把请求放到mounted()里面请求,如果非要在beforeUpdate()和updated()请求,就不要再里面操作data()值.
通过以上内容我们知道了vue updated函数为什么反复触发？。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！