草庐IT

Vue中关于数组与对象修改触发页面更新的机制与原理简析

YeEeck的博客 2023-03-28 原文

Vue中关于数组与对象修改触发页面更新的机制与原理简析

相关问题

数组

使用索引直接赋值与直接修改数组length时，不会触发页面更新。

例如：

<script>
export default {
    name: "HomeView",
    data: () => ({
        list1: ["A", "B"],
    }),
    methods: {
        btnClicked() {
            this.list1[0] = "C"
            this.list1[2] = "C"
        },
    },
}
</script>

或是

<script>
export default {
    name: "HomeView",
    data: () => ({
        list1: [{ text: "123" }, { text: "456" }],
    }),
    methods: {
        btnClicked() {
            this.list1[0] = { text: "789" }
        },
    },
}
</script>

页面并不会触发更新。


对象

页面初始化完成后，在方法中直接对data内声明对象当前不存在的属性进行赋值来为对象新增属性时，页面也不会响应渲染。

例如：

<script>
export default {
    name: "HomeView",
    data: () => ({
        obj1: { a: "a", b: "b" },
    }),
    methods: {
        btnClicked() {
            this.obj1.c = "c"
        },
    },
}
</script>

页面并不会触发更新。


原因

Vue在初始化时会将data内所有的属性嵌套遍历并重写其Getter和Setter方法，借此实现响应式属性。

然而对于在页面渲染完成后加入data的属性，Vue并不会将其变为响应式。


一些深入的探究

数组

Vue对于数组是仅将其对应下标的对象的属性变为响应式，而这个下标本身是无法成为响应式的。

data: () => ({
        list1: [{ text: "123" }, { text: "456" }],
})

使用如上的data声明。

方法A：

this.list1[0] = { text: "789" }

方法B：

this.list1[0].text = "789"

方法B可以被正确响应而方法A不可以。

方法A将数组下标为0的位置替换为了一个新的对象，而因为数组下标不是响应式的，因此没有触发页面刷新。

同时，由于数组下标为0的位置替换为了一个新的对象，而这个新的对象并没有被配置为响应式，那对于这个对象属性的修改也不会触发页面更新。如下：

this.list1[0] = { text: "789" }
this.list1[0].text = "456"

由于新的对象的属性并没有被配置为响应式，那么即使对这个对象的属性进行修改，页面也不会被更新。

既然下标本身无法成为响应式，不妨尝试：

<script>
export default {
    name: "HomeView",
    data: () => ({
        list1: ["A", "B"],
    }),
    methods: {
        btnClicked() {
            this.list1[0] = "C"
        },
    },
}
</script>

通过下标修改数组的对应值也无法触发视图更新。


对象

data: () => ({
        obj1: { a: { text: "a" }, b: { text: "b" } },
}),

使用如上的data声明。

this.obj1.a = { text: "c" }

成功触发视图更新。

与数组下标不同，对象的属性在初始化是被定义为响应式的，因此直接对属性赋值对象是能够触发视图更新的。不像对数组的对应下标赋值而不会触发视图更新。


解决方案

数组

1. 内置API

如果需要向数组加入新的成员，则可以直接使用数组的push方法。

此外，下列数组方法也可以自动的触发视图刷新：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

2. 将数组重新赋值，修改引用地址

为数组新增一个字符串成员"C"
this.list1 = this.list1.concat(["C"])

由于list1是data的属性，list1的引用发生改变，就会触发视图更新。

修改数组的第一个值
let tempList = this.list1.concat([]) // 深拷贝，等价于一个新数组，使用slice，JSON都可以。
tempList[0] = "666"
this.list1 = tempList

通过原数组新建一个新数组，修改新数组后再将新数组赋值给原数组，由于原数组作为data的属性，其引用被修改，触发视图更新。

3. Vue.$set() 方法

使用Vue.$set可以为data对象添加一个新的响应式属性，且触发视图更新。

定义：

Vue.$set(对象或数组, 对象属性名或数组下标, 值)

向list1对象的0索引位置赋值一个新的响应式对象，同时触发视图更新：

Vue.$set(this.list1, 0, { text: "789" })

如果在组件中应使用this.$set来代替：

this.$set(this.list1, 0, { text: "789" })

对象

1. 将对象重新赋值，修改引用地址

思路与数组的类同。

使用JSON、手写递归、lodash深拷贝均可，但如果对象内含方法，则不能使用JSON来完成深拷贝。

深拷贝完成后修改对应属性后赋值给原对象即可。

2. Vue.$set() 方法

对象同样可以使用$set() 方法修改。

定义：

Vue.$set(对象或数组, 对象属性名或数组下标, 值)

将obj1对象的a属性赋值为字符串"b"并触发视图更新：

Vue.$set(this.obj1, a, "b")

如果在组件内，则应使用：

this.$set(this.obj1, a, "b")
简析Vuecodelanguage-javascriptstrong

有关Vue中关于数组与对象修改触发页面更新的机制与原理简析的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  4. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  5. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  6. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  7. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  8. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  9. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  10. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

随机推荐