首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue.set() (this.$set)的用法

vue.set() (this.$set)的用法及说明

2023-06-05 11:15:24 作者：小鱼儿游啊~游

这篇文章主要介绍了vue.set() (this.$set)的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue.set() (this.$set)的用法

这段时间工作上经常操作数组数据，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。），该方法的使用首先要在页面引入vue，应该这样写：import Vue from 'vue'，这样才能在组件全局获取到vue这个实例对象。

如果你觉得引入麻烦，推荐使用vue.set的别名this.$set。

那么现在上代码：

HTML：

<ul class="province_area_style province_area">
            <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
          </ul>

JS：

clickProvince(pindex, pitem) {
      pitem.checkOn = !pitem.checkOn
      pitem.checkOff = !pitem.checkOff
      this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

从上代码可知，点击事件clickProvince( )，可以改变数组　this.provinceArrs　中指定下标　pindex　的值并实时更新页面的视图，这样就极大的方便了操作数组中的某项值，使用示列：this.$set(arr, index, val)。

当然，this.$set除了用于操作数组外还可以操作对象，使用示例：this.$set( obj, key, val).

this.$set()的使用场景和用法以及与Vue.set()区别

this.$set()的使用场景

Vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，因此vue提供了$set这个API来解决这个限制。

当我们给一个对象添加属性时，在控制台上可以打印出来，但是视图却没有更新，此时this.$set()就派上用场了

this.$set的用法

首先先说明一下this.$set()中传参的含义：

this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value：重新赋的值

下面就着重来说明我在开发过程中的用法，希望对大家有所帮助,废话不多说，直接上代码：

此块是html部分：

<template>
  <div>
     <div v-for="item in goodList" :key="item.id">
      {{item.name}}&nbsp;&nbsp;&nbsp;{{item.value}}
    </div>
    <Button type="success" @click="handleClick()">改变数据</Button>
  </div>
</template>

此块是js部分：

1）在没有使用this.$set()的情况下：

<script>
export default {
  name: 'mySet',
  data () {
    return {
      goodList: [
        {name: '书本', value: '200元', id: 1},
        {name: '玩偶', value: '200元', id: 2},
        {name: '薯片', value: '300元', id: 3}
      ]
    }
  },
  methods: {
    handleClick () {
      this.goodList[3] = {name: '口罩', value: '409元', id: 4}
      console.log(this.goodList)
    }
  }
}
</script>

此时点击按钮，控制台可以看到新增数据，但是视图却没有变化：

2）在使用this.$set()的情况下：（直接修改methods中handleClick方法）

 methods: {
    handleClick () {
      this.$set(this.goodList, 3, {name: '口罩', value: '409元', id: 4})
      console.log(this.goodList)
    }
  }

此时点击按钮，控制台上可以看到，视图也发生了变化：

this.$set()和Vue.set()的区别

Vue.set( ) 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue原型上。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue.set() (this.$set)的用法及说明