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}} {{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原型上。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue3 computed初始化以及获取值设置值实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家介绍了vue中destroyed方法及使用示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
很高兴Vue 2.5 Level E 发布了。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染2017-10-10
这篇文章主要介绍了Vue Promise解决回调地狱问题，总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路2023-01-01
Vue 中v-model的完整用法及v-model的实现原理解析
这篇文章详细介绍了Vue.js中的v-model指令的使用,包括基本用法、原理、结合不同类型的表单元素（如radio、checkbox、select）以及使用修饰符（如lazy、number、trim）等,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要为大家详细介绍了vue实现动态控制表格列的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue项目不能使用localhost访问的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue3中的h方法用于创建虚拟DOM节点,是渲染函数的核心,它接受三个参数：type（节点类型）、props（属性对象）和children（子节点）,通过示例展示了如何使用h方法创建简单的HTML元素、带有属性的元素、嵌套元素和自定义组件,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了vue中关于click.stop的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue子组件created方法不执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论