你真的知道如何使用Vue.set吗

栏目: JavaScript · 发布时间: 5年前

内容简介::blush:我活的好累,工作8小时并且非工作时间并不想碰代码的我还是利用上班的空闲编一篇文章。推荐有兴趣的开发者可以参加6月份Vue.js的分享会一般想到这个api的开发者,都是遇到明明更改了数据,然而浏览器的dom却没有更新新的数据,有时候会出现操作一下其他数据,之前更新的数据才渲染到dom,有时候不管怎么操作都不会更新,这种类似的bug一直让很多开发者苦恼。

:blush:我活的好累,工作8小时并且非工作时间并不想碰代码的我还是利用上班的空闲编一篇文章。

推荐有兴趣的开发者可以参加6月份Vue.js的分享会

场景

一般想到这个api的开发者,都是遇到明明更改了数据,然而浏览器的dom却没有更新新的数据,有时候会出现操作一下其他数据,之前更新的数据才渲染到dom,有时候不管怎么操作都不会更新,这种类似的bug一直让很多开发者苦恼。

Vue.set

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

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

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。

文档写的很明白,向响应式对象中添加一个响应式属性,那么出现无法更新视图(dom)的情况,不就是说明视图所绑定的属性值并不是响应式么。

案例

例一:

<!-- demo.vue -->
<template>
  <div class="demo">
    <input v-model="obj.value1" />
    <input v-model="obj.value2" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        obj: {}
      }
    }
  }
</script>
复制代码

如上代码,当一个组件中有多个input标签,并且v-model绑定多个值时,且这些值都是 某一个对象中动态出现的属性 ,这种情况下,如果单纯的赋值,

// 错误赋值
export default {
  methods: {
    fn() {
      getData().then(res => {
        this.obj[res.key] = res.value;
      })
    }
  }
}
复制代码

这种情况下,你会在 devtools 中看到,数据的确赋值成功了,然而input无法更新视图,并且可能你无法在这个input内输入任何内容了,这时 this.obj 里面的键都不是响应式的,那么 this.$set 方法该出场了。

// 正确姿势
export default {
  methods: {
    fn() {
      getData().then(res => {
        // this.obj[res.key] = res.value;
        this.$set(this.obj, res.key, res.val);
      })
    }
  }
}
复制代码

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

例二:

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

<!-- demo.vue -->
<template>
  <div class="demo">
    <input v-model="obj.value1" />
    <input v-model="obj.value2" />
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState(['obj']),
    }
  }
</script>
复制代码

此时obj是一个vuex的状态,这个obj可能是其他组件或者页面的,此时 Vue.set 就出场了。

// 某个mutation:blush:
import Vue from 'vue';
export default {
  updateObj(state, { key, value }) {
    // state.obj[key] = value;  这是错误的赋值
    Vue.set(state.obj, key, value);
  }
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

长尾理论

长尾理论

[美] 克里斯·安德森 / 乔江涛 / 中信出版社 / 2006-12 / 35.00元

书中阐述,商业和文化的未来不在于传统需求曲线上那个代表“畅销商品”(hits)的头部; 而是那条代表“冷门商品”(misses)经常为人遗忘的长尾。 举例来说, 一家大型书店通常可摆放10万本书,但亚马逊网络书店的图书销售额中,有四分之一来自排名10万以后的书籍。这些“冷门”书籍的销售比例正以高速成长,预估未来可占整体书市的一半。 这意味着消费者在面对无限的选择时,真正想要的东西、和想要取得......一起来看看 《长尾理论》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换