检测数组更新

最新推荐文章于 2023-04-03 09:24:01 发布
最新推荐文章于 2023-04-03 09:24:01 发布
阅读量369 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39368007/article/details/109686602
版权

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick() {
        // 1.push方法
        // this.letters.push('aaa')
        // this.letters.push('aaaa', 'bbbb', 'cccc')

        // 2.pop(): 删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift(): 删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift(): 在数组最前面添加元素
        // this.letters.unshift()
        // this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // splice(start)
        // splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')

        // 5.sort()
        // this.letters.sort()

        // 6.reverse()
        // this.letters.reverse()

        // 注意: 通过索引值修改数组中的元素
        // this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })


  // function sum(num1, num2) {
  //   return num1 + num2
  // }
  //
  // function sum(num1, num2, num3) {
  //   return num1 + num2 + num3
  // }
  // function sum(...num) {
  //   console.log(num);
  // }
  //
  // sum(20, 30, 40, 50, 601, 111, 122, 33)

</script>

</body>
</html>

 

小草dym
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
判断对象或者数组等变量有没有被修改过?
qq_46266925的博客
09-05 1656
判断对象或者数组等变量有没有被修改过?若修改过弹窗提示....
数组更新检测
YY的博客
11-21 526
数组更新检测
vue是如何检测数组变化的
weixin_39808181的博客
02-28 616
array.js： //主要做的事就是拦截用户调用的push shift unshift pop reverse sort splice //上述方法可改变原始数组 import { observe } from "./index"; //先获取老的数组方法 只改写这7个方法 let oldArrayProtoMethods = Array.prototype; console.log(Array.prototype) //拷贝的一个新的对象 可以查找到老的方法 //arrayMethods里包含
Vue中如何检测数组变化？
qq_42931285的博客
09-25 1325
地址 有两点需要解释一下： 1.为什么Object.defineProperty是可以监听到数组值变化，而vue没有实现呢？ 因为vue编码中是对数组元素进行了监听，但是对数组本身的变化时没有监听。 即就是改变数组里的元素不能监听到，但是数组内的值是对象类型的，修改它依旧能得到监听响应，如改变list[0].val可以得到监听，但是改变list[0]不能，因为没有对数组本身的变化进行监听。这里有点绕，要看源码才能懂。因为obseve中这个方法是对象的属性值进行监听的。而非对象本身。从下面的代码中可以看出：
5.对象和数组更新检测
休息休息夏的博客
05-22 110
<div id="app"> <p v-for="(v,k) in obj">{{k}}-->{{v}}</p> <button type="button" @click="addKey">addKey</button> <ul> <li v-for="l in arr ">选项{{l}}</li> </ul> <button typ
vue.js中$set与数组更新方法
01-21
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。 ...
Vue 数组和对象更新,但是页面没有刷新的解决方式
10-16
当数组元素被替换或者对象属性被直接赋值时，Vue无法检测到这些变化，从而导致视图未更新。本文将详细介绍如何解决这个问题。 首先，我们要理解Vue是如何响应式地处理数据变化的。Vue使用了Object.defineProperty来...
浅谈Vue为什么不能检测数组变动
10-16
Vue为了应对数组变动的限制，提供了一些变异方法，如`Vue.set`、`this.$set`，以及使用`Array.prototype.splice`，这些方法可以让Vue正确地追踪数组变化并更新视图。当需要直接修改数组元素时，推荐使用这些变异方法...
解决Vue不能检测数组或对象变动的问题
08-27
解决 Vue 无法检测数组或对象变动的问题 Vue 是一个流行的前端框架，但是在使用...要解决这个问题，我们可以使用 Vue 的 `$set` 方法来更新数组或对象，从而让 Vue 检测到这些变化，并且 View 层也将及时地渲染出来。
详解vue 数组和对象渲染问题
10-17
1. `push()`, `pop()`, `shift()`, `unshift()`: 这些方法会直接改变数组的长度，Vue可以检测到这些变化并更新视图。 2. `splice()`: 可以添加或删除数组元素，Vue同样能跟踪这些变化。 3. `sort()`, `reverse()`: ...
js判断前后两个数组是否发生变化
CHENC0518的博客
04-03 790
【代码】js判断前后两个数组是否发生变化。
vue中如何监测数组的变化
chenjixue的博客
12-14 5128
一、数组监听与对象监听的不同 对象的监听是直接递归使用Object.defineProperty重新定义数组的每个属性，而数据是改写数组的7个数组方法：push，pop，shift，unshift，sort，splice，reverse 二、实现原理 vue在数据初始化时调用initData方法，然后通过new Observer对数据进行监测，然后对数据进行判断，如果是数组并且支持原型链就会执行protoAugment让目标原型链指向arrayMethods，arrayMethods用来改写数组的原型
Web前端，JS基础之数组的4个用法，查、改、增、删
星辰迷上大海的博客
06-28 1819
Web前端，JS基础之数组的4个用法，查、改、增、删
c语言检测状态是否变化,C语言数组状态研究
weixin_29669899的博客
05-21 1388
摘 要:在不同上下文语境中,探讨各种类型的C语言数组所呈现出的宏观和微观状态。通过横向和纵向的对比分析,系统地阐述了这些状态形成和改变的原理。关键词:C语言;数组;元素中图分类号:TP313文献标识码:A文章编号:1672-3198(2009)16-0255-021 整型数组状态分析1.1 整型数组初始化后的状态分析以下代码在定义一维整型数组时初始化部分元素,并输出全部单元的值。int a[4]=...
js监听数组的变化
热门推荐
qq_41672008的博客
06-25 1万+
js监听数组的变化 最近在造轮子的时候遇到了这么一个问题，那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化，举个例子：假设一个数组调用了一个push方法，如果才可以知道数组调用了push方法，怎么去监听呢？？？ 如果是直接调用数组内部的方法，那么不会监听到数组的变动，为此可以进行改造，代码如下： // 获取Array的原型，并创建一个新的对象指向这个原型 const arrayMethods = Object.create(Array.prototype) // 创建一个新的原型，这就是改造
js es6高阶函数测试：是否修改原数组，是否存在返回值等等。（forEach,map,filter,every,some）
PrimaryColor
02-24 567
高阶函数测试： 是否修改原数组，是否存在返回值。 一、forEach（循环遍历）： 测试一：是否修改原数组，是否存在返回值？ /**直接数组**/ let arr=[1,2,3,4,5,6,7,8,9,10]; let newArr=arr.forEach(item=>{ if(item%2==0){ item=5; return item; } }); console.log("原数组，新数组："); console.log(arr,ne
通过$set全量更新数组
最新发布
05-02
$set操作符是MongoDB中的一个更新操作，它能够对指定文档中的某个字段进行更新，如果该字段不存在，那么$set操作符会自动生成该字段。在对数组进行更新时，$set操作符可以使用全量更新数组的方式。全量更新数组指的是将数组字段直接替换成一个新的数组，新的数组中包含了所有需要更新的元素。 具体来说，如果想要通过$set全量更新数组，需要先构造一个和原数组结构相同的新数组，并将需要更新的元素放入其中，然后再使用$set操作符将该新数组替换原来的数组字段即可。需要注意的是，全量更新数组有可能会覆盖掉原来数组中的其他元素，因此在更新前需要仔细检查新数组中是否包含了所有需要更新的元素以及其他不需要更新的元素。 $set操作符的全量更新数组功能在某些场景下非常实用，比如在需要批量更新数组元素时，可以直接使用该功能一次性更新数组，从而简化代码逻辑。不过，在使用全量更新数组功能时需要注意，更新的数据量过大时可能会对数据库性能产生较大影响，因此需要谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值