文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue如何修改data中数据问题

2024-04-02 19:55

关注

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基本一致(推荐)

二、set方法(推荐)

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

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/...)修改数组,并重新赋值给原数组

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯