那些数组方法是响应式的

最新推荐文章于 2021-09-14 22:15:20 发布
最新推荐文章于 2021-09-14 22:15:20 发布
阅读量125 收藏
点赞数
分类专栏： # Vue 文章标签： splice push shift sort reverse
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43613849/article/details/117469863
版权

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

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

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
<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', 'E']
      },
      methods: {
        btnClick() {
          //1.push方法(响应式)
          this.letters.push('aaa');


          //2.通过索引值修改数组中的元素（非响应式）,虽然这个是非相应式的，但是可以通过splice实现,或者Vue.set方法
          thiS.letters[0] = 'bbbb';
          this.splice(0, 1, 'bbbbb');
          //Vue.set(要修改的对象,索引值,修改后的值)
          Vue.set(this.letters, 0, 'bbbbb');


          //3、pop()(响应式)：删除数组中的最后一个元素
          this.letters.pop();


          //4、shift()(响应式)：删除数组中的第一个元素
          this.letters.shift();


          //5、unshift()(响应式)：在数组的最前面添加元素
          this.letters.unshift('aaa');


          //6、splice(响应式)
          //splice作用：删除/插入/替换元素
          //删除元素：第二个参数传入你要删除几个元素
          //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
          //插入元素：第二个参数，传入0，并且后面跟上要插入的元素
          //splice(start)
          this.letters.splice(1, 2, 'a', 'b');


          //7、sort()(响应式)：排序
          this.letters.sort();


          //8、reverse()(响应式):反转
          this.letters.reverse();

        }
      }
    })
  </script>

</body>

参考链接：

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

Doe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组中哪些方法是响应式的
third_的博客
09-06 795
安抚
浅谈Vue响应式(数组变异方法)
08-27
主要介绍了浅谈Vue响应式(数组变异方法)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
数组中的响应式方法
qq_44363897的博客
02-20 760
数组中的响应式方法 push() — 向数组最后添加元素，可添加多个 pop() — 删除数组最后一个元素 shift() — 删除数组第一个元素 unshift() — 向数组最前面添加元素，可添加多个 splice() — 可用于删除/插入/替换数组元素 删除元素： splice(start , 要删除几个元素即删除元素的个数) — 若没有传第二个参数，则删除start后面的所有元...
数组中哪些数组方法具备响应式
shimily_liu的博客
06-10 156
数组中哪些数组方法具备响应式 关于数组的方法的响应式，代码如下： <!-- 数组中哪些方法在vue中是响应式的 push() pop() shift() unshift() splice() sort() reverse() --> <div id="app"> <ul> <li v-for="item in name">{{item}}</li> </ul> <button @clic
使用Vue.set()方法实现响应式修改数组数据步骤
10-16
为了解决这个问题，Vue提供了一个`Vue.set()`方法，专门用于确保数组或对象的响应式更新。 `Vue.set()`方法的使用方式如下： ```javascript Vue.set(object, index, value); ``` - `object`: 需要修改的数据源，...
Vue数组响应式操作及高阶函数使用代码详解
10-15
本文将详细讲解Vue中的数组响应式操作以及如何结合高阶函数来更高效地处理数组。 首先，Vue对数组的响应式操作是通过拦截和重定义一些特定的方法实现的，包括`push`、`pop`、`shift`、`unshift`、`splice`等。以下...
数组中常用的几个响应式方法
weixin_42371145的博客
04-18 320
push 添加元素到数组的尾部,可以添加任意个元素 pop 删除数组中的最后一个元素 shift 删除数组中的第一个元素 unshift 从数组的头部插入一个元素, 也可以插入多个 splice 添加 第二个参数是0 删除 第二个参数是删除元素的个数 修改 第二个参数是替换元素的个数 sort 排序 reverse 倒序 Vue提供的set/delete方法 新增与删除 示例： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
数组中哪些方法是响应式的（重要）
vfjcgg的博客
06-11 297
数组中哪些方法是响应式的 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。 1.push() 2.pop() 3.shift() 4.unshift() 5.splice() 拼接 6.sort() 将…分类 7.reverse() 颠倒 反转 ...
Vue里面数组哪些方法是响应式的
小小前端攻城狮的博客
03-23 1465
简述 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。 尾部追加：push() 尾部删除：pop() 首部删除：shift() 首部添加：unshift() 删除/插入/替换元素：splice() 排序：sort() 反转数组：reverse() push() //1.push方法,最后一位添加元素，响应式,数据改变 let letters=['A','B','C','D
vue中哪些数组方法是响应式的
linyiwwy的博客
04-13 317
1，push() 数组尾部添加元素（包括多个） 2,pop() 删除数组中的最后元素 3,shift() 删除数组的第一个元素 4，unshift() 在数组最前添加元素（包括多个） 5,splice() 可以删除，插入，替换元素 删除元素:splice(start,count),从下标start开始删除count个元素。splice(start):从start开始删除所有的元素。 替换元素...
vue数组中哪些方法是响应式的
weixin_42661283的博客
11-01 935
Vue数组中响应式的方法： push() 在数组最后元素中追加元素 pop() 删除数组最后一个元素 shift() 删除数组中第一个元素 unshift() 在数组前面元素中追加元素 splice() 删除、插入、替换元素 sort() 排序 reverse() 反转 <div id="app"> ...
ES6（二）数据响应式
literarygirl的博客
05-04 370
1、利用 defineProperty 实现数据劫持 2、mvvm框架中编译数据到视图 3、实现数据驱动视图更新
（VueJs）数组的响应式方法
黑胡子大叔的博客
03-08 1928
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> ...
vue splice方法_vue中数组的响应式布局
weixin_39657575的博客
12-04 667
点击蓝字 关注我们vue中的响应式布局--数组一.vue中的MVVM思想●MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel● m -> model数据层 Vue 中 数据层 都放在 data 里面●v view 视图Vue 中 view 即 我们的HTML页面●vm (vie...
Vue生命周期函数
热门推荐
weixin_43613849的博客
05-29 1万+
1、常用生命周期函数 生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤 Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动的帮我去之行一个函数，这个函数就是beforeCreate 1、beforeCreate be..
vue3中的Suspense
weixin_43613849的博客
09-14 1万+
1、Suspense作用 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 2、使用步骤 使用步骤： 异步引入组件 import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue')) 使用Suspense包裹组件，并配置好default 与 fallback <template> .
计算属性computed的使用
weixin_43613849的博客
05-30 7528
1、计算属性的基本使用 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}} 我们可以将上面的代码换成计算属性： 我们发现计算属性是写在实例的computed选项中的。 computed计算属性，
Vuex中的Getter的使用
weixin_43613849的博客
07-06 6167
1、Getter的作用 1、传入一个参数（state） 在getter中接受的第一个参数是Vuex中的state 有时候，我们需要从store中获取一些state变异后的状态 getters: { powerCounter(state) { return state.counter * state.counter }, more15stu(state) { return state.students.filter(item => item.a
vue3数组改动支持响应式
最新发布
03-31
Vue3中的数组改动支持响应式，也就是说，当数组发生改变时，视图会自动更新。 在Vue2中，通过改变数组的方法（如push，pop，splice等），是无法触发视图更新的。需要手动调用Vue的$set方法或者使用数组的变异方法，才能使视图更新。 而在Vue3中，数组的改动会自动触发视图更新。这是因为Vue3使用了Proxy来代理数组，当数组发生改动时，Proxy会自动触发视图更新。 例如，以下代码中的arr数组发生改变后，视图会自动更新： ```javascript <script> import { ref } from 'vue' export default { setup() { const arr = ref([1,2,3]) const handleAdd = () => { arr.value.push(4) } return { arr, handleAdd } } } </script> <template> <div> <ul> <li v-for="item in arr" :key="item">{{ item }}</li> </ul> <button @click="handleAdd">添加</button> </div> </template> ``` 当点击按钮添加元素后，视图会自动更新，显示新添加的元素。 需要注意的是，使用数组的变异方法（如push，pop，splice等）可以触发视图更新，但是直接给数组赋值或使用索引修改数组元素是无法触发视图更新的。例如，以下代码中的arr数组修改元素后，视图不会自动更新： ```javascript arr[0] = 4 // 不会触发视图更新 arr.value[0] = 4 // 不会触发视图更新 arr.value.splice(0, 1, 4) // 会触发视图更新 ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值