vue如何修改data中数据问题

 更新时间:2022年09月07日 14:13:42   作者:可缺不可滥  
这篇文章主要介绍了vue如何修改data中数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue修改data中数据

vue的data中保存一些数据,用于页面的渲染。有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新。

注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改。强制性通过js对数据修改的那些方法,有一部分在vue中是不被认可的。

vue中修改简单类型数据

简单类型的数据,包括number boolean bigInt string 等

修改这类型的数据,我们可以直接赋值,vue也能监听到数据发生的变化,然后作出修改。

xxxx表示变量名,yyyy则是要赋值的新值。

this.$data.xxxx = yyyy
或
this.xxxx = yyyy

vue中修改数组的方法

一、变异方法(7个):push ,shift, unshift, pop, sort, splice, reverse

这些方法在与js基本一致(推荐)

  • push:此方法是在数组的后面添加新加元素,此方法改变了数组的长度
  • pop:此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度
  • shift:此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度
  • unshift:此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度
  • splice:Array.splice(开始位置, 删除的个数,替换的元素) 万能方法,可以实现增删改
  • sort:该方法用于对数组进行排序
  • reverse:该方法用于将数组的内容倒置

二、set方法(推荐)

this.set 这是 vue 实例调用 set 这是vue实例调用set这是vue实例调用set()方法,专门用来修改数组的

  • 第一个参数,已经存在data中的数据,要被修改的数组
  • 第二个参数,要修改的数组下标
  • 第三个参数,要修改的数组对应下标的值
this.$set (this.selectedarr, index, option)
data() {
    return {
        textArray: ["1","2","3"]
    }
}

修改最后一个为"4"

this.$set (this.textArray, 2, "4")

三、用一个全新的数组替换原先的数组,而不是在原先数组上修改(不推荐)

data() {
    return {
        textArray: ["1","2","3"]
    }
}

修改最后一个为"4"

this.textArray = ["1","2","4"]

简单总结一下,这三种修改数组的方法,最后一种不推荐,因为这会引起vue中整个数组数据对应的页面重新渲染,而我们明明只想改变数组中的某一个元素。

vue中修改对象的方法

一、方法直接改(如果对象数据过于复杂,层次很深的话,不推荐)

this.obj.dengxi = 'dengxi' 

二、使用vue的实例提供的方法进行操作(推荐,vue监听了这个方法,做到更好的更新渲染)

this.$set(vm.obj,'dengxi','dengxi好帅')

三、通过vue构造函数提供的方法来改变(推荐,这个其实和第二种方法一样)

Vue.set(this.obj,'dengxi','dengxi真的好帅')

关于删除

如果想要将对象中的某一个键值对应的value删掉

一、可以通过上面的三种方法,将其设置为空(推荐,粗暴简单,但有效)

this.obj.dengxi = null

二、vue实例提供的删除方法(推荐)

this.$delete(this.obj,'yangxi')

三、vue构造函数提供的方法(其实和第二种一样,推荐)

Vue.delete(this.obj,'dengxi')

四、创建一个新对象,覆盖之前的对象,vue仍能实现更新(不推荐)

this.obj = {....}

vue修改数据不生效,页面不刷新

vue中数据类型

包括:基本类型,对象,数组

vue数据侦听简易理解

在vue2中,是通过Object.definedPropety()来进行数据代理。

我们配置在const vm = new Vue({})中的deta会变成 vm自身上的属性,也会存在于vm._data中,此时data中对应的每一个属性都会有getter和setter,数据改变后模板重新解析,就依赖于setter对数据的侦听。

从上图黑色部分可以看到,age是对象,hobbies是字符串数组,friends是对象数组,他们本身都有getter和setter来实现响应式。

1、类型为基本数据类型:

此时,该属性在vm上有直接的getter和setter,可以直接修改

vm.name="xiaoming"

2、类型为对象

 此时对象的每个属性都有对应个getter和setter,也可以实现响应式

 3、类型为数组

 在js中,想要操作数组中的某个元素,我们可能会通过索引来操作,然而,从截图中,我们发现没有对应元素索引值的getter和setter方法,因此我们再通过数组索引值修改数据,就不会触发模板解析,从而就不会刷新页面。

数据更新后,页面不刷新的可能原因

1. 初始化时data中不存在该属性

通过 vm.xxx=yyy / vm.xxx.yyy="abc"方式添加,该属性为非响应式。想要添加响应式数据,需要借助vue提供的set方法:

Vue.set(vm.xxx, 'yyy', 'zzz')  

或者 

vm.$set(vm.xxx, 'yyy', 'zzz')

也可以在初始化时的data数据中添加目标属性

注意:data中是不可直接用Vue.set()方式添加属性的 即 Vue.set(vm, 'yyy', 'zzz')  或者  vm.$set(vm, 'yyy', 'zzz')是不合法的,控制台会报错,我们只能往已存在的属性中增加属性。

2. 通过索引值修改数组元素

错误方式:

vm.hobbies[0]='上班'
vm.friends[0]={name:'henmeimei',age=”19”}

正确修改方式:

通过数组的pop(末尾删除)/push(末尾添加)/shift(开头删除)/unshift(开头添加)/reverse(反转)/sort(排序)/splice(起始位置,删除数量,插入元素)方法操作

Vue.set(vm.items, indexOfItem, newValue)     
vm.$set(vm.items, indexOfItem, newValue)

通过其他方式(filter/map/...)修改数组,并重新赋值给原数组

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

相关文章

  • vue组件挂载到全局方法的示例代码

    vue组件挂载到全局方法的示例代码

    这篇文章主要介绍了vue组件挂载到全局方法的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • element中el-autocomplete的常见用法示例

    element中el-autocomplete的常见用法示例

    这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • Vue中使用Ueditor的示例详解

    Vue中使用Ueditor的示例详解

    这篇文章主要介绍了Vue中使用Ueditor的方法,本文通过实例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue3更高效的构建工具Vite使用指南

    Vue3更高效的构建工具Vite使用指南

    这篇文章主要给大家介绍了关于Vue3更高效的构建工具Vite使用的相关资料,Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验,需要的朋友可以参考下
    2023-10-10
  • vue-resource 拦截器(interceptor)的使用详解

    vue-resource 拦截器(interceptor)的使用详解

    本篇文章主要介绍了vue-resource 拦截器(interceptor)的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue.js的安装方法

    vue.js的安装方法

    这篇文章主要为大家详细介绍了vue.js的安装方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • iview Upload组件多个文件上传的示例代码

    iview Upload组件多个文件上传的示例代码

    这篇文章主要介绍了iview Upload组件多个文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue使用Element实现增删改查+打包的步骤

    Vue使用Element实现增删改查+打包的步骤

    这篇文章主要介绍了Vue使用Element实现增删改查+打包的步骤,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue混入mixin的介绍及理解

    vue混入mixin的介绍及理解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-08-08

最新评论