vue中$set与$delete的使用及说明

 更新时间:2023年10月27日 08:59:48   作者:高先生的猫  
这篇文章主要介绍了vue中$set与$delete的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

对于对象

vue无法检测property的添加或移除,由于vue会在初始化实例时对property执行getter/setter转换,所以propterty必须在data对象上存在才能让vue将它转换为响应式的。

例如:

var vm = new vue({
  data:{
    a:1
  }
})
 
// `vm.a` 是响应式的
 
vm.b = 2
// `vm.b` 是非响应式的

对于已经创建的实例,vue不允许添加根级别的响应式属性,但是可以使用

vue.set(vm.someObject, "b" ,2)

也可以使用vm.$set实例方法,这也是全局vue.set方法的别名

this.$set(this.someObject, "b", 2)

如果为已有的对象赋值多个新property

this.someObject = Object.assign({},this.someObject,{a:1,b:2})

例子:

            <div class>
              参数名:
              <el-input style="width:170px" v-model="parKey" class="margin_r20"></el-input>参数值:
              <el-input style="width:170px" v-model="parName" class="margin_r10"></el-input>
              <el-button type="primary" size="medium" @click="addPar">增加</el-button>
            </div>参数列表
            <ul class="parList">
              <li v-for="(value, name, index) in AddEditeDialog.netTypeParam" :key="index">
                {{name}} : {{value}}
                <el-button size="mini" round @click="delPar(name)" class="pull-right">删除</el-button>
              </li>
            </ul>
    addPar() {
      this.parKey = this.parKey.trim();
      this.parName = this.parName.trim();    
      this.$set(this.AddEditeDialog.netTypeParam, this.parKey, this.parName);
      // 不能写成this.AddEditeDialog.netTypeParam[this.parKey] = this.parKey
      this.parKey = "";
      this.parName = "";
    },
    delPar(name) {
      this.$delete(this.AddEditeDialog.netTypeParam, name);
    },

对于数组

vue不能检测以下数组的变动

vm.items[indexOfItem] = newValue
vm.items.length = newLength
var vm = new vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
vm.items[indexOfItem] = newvue
// 可以采用下面2种方法实现响应式
Vue.set(vm.items, indexOfItem, newValue) || vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
 
vm.items.length = newLength
// 可以采用下面方法实现响应式
vm.items.splice(newLenght)

总结

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

相关文章

  • vue-cli项目配置多环境的详细操作过程

    vue-cli项目配置多环境的详细操作过程

    vue-cli 默认只提供了 dev 和 prod 两种环境。这篇文章主要介绍了vue-cli项目配置多环境的详细操作过程,需要的朋友可以参考下
    2018-10-10
  • 解析vue 3.0 使用axios库发起 post get 的配置过程

    解析vue 3.0 使用axios库发起 post get 的配置过程

    get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢 这里记录一下配置过程,对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧
    2022-05-05
  • Vue实现定位并解决内存泄漏

    Vue实现定位并解决内存泄漏

    Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助
    2023-09-09
  • Vue源码之rollup环境搭建步骤详解

    Vue源码之rollup环境搭建步骤详解

    这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue中的 watch监听属性详情

    Vue中的 watch监听属性详情

    这篇文章主要介绍了Vue中的 watch监听属性详情,mputed计算属性用来监听多个数据;watch 监听单个数据;本文将具体介绍的是 watch监听属性,感兴趣的小伙伴可以参考一下文章的具体内容,希望对你有所帮助
    2021-12-12
  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    这篇文章主要介绍了详解vite2.0配置学习(typescript版本),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue3 销毁组件方法及问题解决方案

    vue3 销毁组件方法及问题解决方案

    这篇文章主要介绍了vue3 销毁组件方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue使用font-face自定义字体的案例详解

    Vue使用font-face自定义字体的案例详解

    @font-face 是 CSS 中的一个规则,它允许你加载服务器上的字体文件(远程或者本地),并在网页中使用这些字体,本文给大家介绍了Vue使用font-face自定义字体的案例,并通过代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    这篇文章主要介绍了vue3 解决getCurrentInstance 打包后线上环境报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • 解决在el-dialog中无法正确获取DOM的问题

    解决在el-dialog中无法正确获取DOM的问题

    这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论