黑木耳,溏心风暴3,safari浏览器-额头blog,每日最新思考

admin 2个月前 ( 05-27 02:16 ) 0条评论
摘要: 然而浏览器的dom却没有更新新的数据,有时候会出现操作一下其他数据,之前更新的数据才渲染到dom。--demo.vue--˃...

场景

一般想到这个api的开发者,都是遇到分明更改了数据,但是浏览器的dom却没有更新新的数据,有时候会呈现操作一下其他数据,之前更新的数据才烘托到尽情忘爱dom,有时候不管怎么操作都不会更新,这种相似的bug一直让许多开发者苦恼。

Vue.set

首要让我们看看尤大的文档。

每个组件都是承继了vue的原型,所以组件实例化后会在this上挂载一个$set办法,和Vue.set是相同的。

向呼应式目标中增加一个特点,并保证这个新特点同样是黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑呼应式的,且触发视图更新黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑。

文档写的很理解,向呼应式目标中增加一个呼应式特点,那么呈现姿月朝户无法更新视图(dom)的状况,不就是阐明视图所绑定的特点值并不是呼应式么。

事例

例一:




如上代码,当一个组件中有多个input标签,而且v-舒莱卫生巾model绑定多个值时,且这些值都是某一个目标中动态呈现的特点,这种状况下,假如单纯的赋值,


// 过错赋值
export default {
methods: {
fn() {
getData().then(res => {
this.obj[r田开斌es.key] = res.valu黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑e;
})
}爱情意外小把戏
}
}

这种状况下,你会在devtools中看到,数据确实赋值成功黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑了,但是input无法更新视图,而且或许你无法在这个input内输入任何内容了,这时this.obj里边的键都不是呼应式的,那么this.$set办法该进场了。

// 郝美易贷正确姿态
export default {
methods: {
fn() {
黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑getData().then(res => {
// this.obj[res.key] = r火热热心脏es.value;
this.$set(this.obj, res棋魂同人命运之力.女星走光key, res.val);
})
}
}
}

此刻你会发现,视图更新了狒狒人品,一切都美好了,吃的饭也更香了。

例二:

有人说了,只用this.$set不就行了,Vue.set有啥用




此刻obj是东北丈母娘一个vuex的状况,这个铝导辊obj或许是其他组件或许页面的,此刻Vue.set就进场了。

// 某个mu14岁小学生tation
import Vue from 'vue';
export default {
updateObj(state, { key, value }) {
// state.obj[key] 黑木耳,溏心风暴3,safari浏览器-脑门blog,每日最新考虑= value; 这是过错洗米华不给尹国驹体面的赋值
Vue.s穿过忧伤的花季et(state.obj, key, value);蓓瑞维奥
}
}
欢迎重视大众号:前端冒险攻略
文章版权及转载声明:

作者:admin本文地址:http://etoudiblog.com/articles/1508.html发布于 2个月前 ( 05-27 02:16 )
文章转载或复制请以超链接形式并注明出处额头blog,每日最新思考