首页 > 其他分享 >Vue 中如何监测数组的变化?

Vue 中如何监测数组的变化?

时间:2023-01-19 22:22:51浏览次数:36  
标签:Vue watch js 数组 使用 监测

在 Vue 中,如果直接对数组进行操作,比如使用下标直接修改元素, Vue 是无法监测到这种变化的,导致无法触发视图更新。针对该问题,总结如下解决方法:

一、使用 Vue.js 提供的方法来更新数组

在 Vue.js 中,可以使用 Vue.set(target, key, value)vm.$set(target, key, value) 来监测数组变化。例如:

// 使用 Vue.set()
Vue.set(vm.items, indexOfItem, newValue)

// 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)

除了上述方法之外,Vue.js 还提供了一些其它的方法来监测数组变化,如 push()pop()shift()unshift()splice()sort()reverse()。这些方法都是基于数组原型链上的方法,Vue.js 通过重写这些方法来监测数组变化。

例如,如果要在数组末尾添加一个新的元素,可以使用 vm.items.push(newItem)

你也可以使用vm.items.length = newLength来修改数组长度,这样也会触发视图更新。

总之,在 Vue.js 中,如果你想要监测数组变化,最好使用 Vue.js 提供的方法来更新数组。

二、使用专门用于监测数组变化的语法糖

另外,Vue.js提供了一些专门用于监测数组变化的语法糖,如 v-for 指令,它允许我们遍历数组并渲染每个元素。当数组发生变化时,v-for 指令会自动重新渲染视图。

三、使用Vue.observable()函数

还有,对于对象变化的监测,我们可以使用Vue.observable()函数来创建一个可监测的对象。

使用 Vue.observable() 可以避免使用 Vue.set() 或 vm.$set() 来监测对象的变化。

例如:

const obj = Vue.observable({
  prop: 'value'
})

四、使用 computed 属性和 watch 属性监测数组变化

computed 属性是 Vue.js 中的一种计算属性,它可以根据其他属性的值进行计算得到新的值。当其他属性的值发生变化时,computed 属性也会随之变化。

watch 属性是 Vue.js 中的一种监听属性,它可以监听某个属性的变化并执行相应的函数。

例如:

computed: {
  filteredItems() {
    return this.items.filter(item => item.age > 18)
  }
},
watch: {
  items: {
    immediate: true,
    handler() {
      console.log('items changed')
    }
  }
}

使用 computed 和 watch 属性可以方便地监测数组和对象的变化,并执行相应的操作。

五、使用 reactive 函数

Vue3 中可以使用 reactive 函数来创建响应式的数组,这样就可以监测到数组的变化。

import { reactive } from 'vue'

const state = reactive({
  myArray: [1, 2, 3]
})

这样Vue3就会自动监测 myArray 变化。

六、使用 Deep Watcher 方法

watch: {
  'myArray': {
    deep: true,
    handler: function (val) {
    // do something with the new and old value of myArray
    }
  }
}

当 deep 为 true 时,Vue 会递归监测数组中所有对象的变化,但是会带来一些性能开销,所以在实际使用中需要根据实际需要来确定是否使用 deep watcher。

七、使用 vue-devtools 中的 track 功能

注意:该方法无法解决修改数组未触发视图更新的问题,属于数组监测问题

八、使用 Vue 的 $watch 函数

mounted() {
  this.$watch(
    'myArray',
    function(newVal, oldVal) {
      // do something with the new and old value of myArray
    },
    {
      deep: true
    }
  )
}

$watch 方法接收三个参数,第一个是要监测的属性,第二个是回调函数,第三个是配置对象,可以使用 deep 选项来监测对象中的变化。

 

总之,Vue.js 提供了多种方法来监测数组和对象的变化,可以根据需要选择合适的方法来实现。

标签:Vue,watch,js,数组,使用,监测
From: https://www.cnblogs.com/yuzhihui/p/17062222.html

相关文章

  • 数组
    数组数组的定义数组是相同类型数据的有序组合数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成其中,每一个数据称作一个数组元素,每一个数组元素可以通......
  • Vue 中 data 为什么必须是一个函数?
    在Vue中,每个组件都是一个对象,当多个实例共享同一对象时,它们将共享相同的状态。如果data不是一个函数并且是一个对象,那么所有组件实例将共享相同的data对象,这样就会导......
  • 树状数组笔记整理
    树状数组介绍树状数组,顾名思义,就是树状的一维数组。二叉树同样也可以用一维数组存储。我们以二叉树进行类比。如图所示,图中节点的序号就是存在数组中的下标。记父节点......
  • Vue2.0项目引入字体库font-awesome
    1.安装依赖npminstallfont-awesome--save2.引入依赖可以选择全局引入或局部引入import'font-awesome/css/font-awesome.min.css';3.使用方式3.1.基本图标......
  • 前后端不分离的项目中使用jq动态遍历数组渲染页面,显示从第2条数据开始渲染
    前后端不分离的项目中使用jq动态遍历数组渲染页面,显示从第2条数据开始渲染 后台跳转页面携带参数processVos为数组,具体内容为:varprocessVos=[{id:1......
  • VueUse实用工具
    1.安装npmi@vueuse/core2.使用useClipboard剪贴板<scriptsetuplang="ts">import{ref}from'vue'import{useClipboard,usePermission}from'@vue......
  • 使用 IDEA 工具打开vue/react/node项目
    1.IDEA在官网上下载社区免费版的https://www.jetbrains.com/zh-cn/idea/download/#section=mac下载完成后,一直点击next安装即可2.安装完成后点击open打开gitcl......
  • vant+vue3自定义主题
    很多系统都会有切换主题的功能,现在做的是一个vant的项目,特地记录一下这里面用到的css3的一个技术,也就是变量,css3的var()和自定义变量,具体使用可百度大题逻辑是这样 ......
  • 明渠流量监测站_明渠流量实时监测管理系统
    明渠流量监测站又称明渠流量实时监测管理系统、明渠河道水位流速流量监测站,明渠流量监测站专为明渠、灌区信息化管理而设计,主要由监测现场、通信网络和监测中心三部分组成,采......
  • 将101到200之间的值中的质数 放入数组中
    packagecom.fqs.demo;publicclassZhiNumber{publicstaticvoidmain(String[]args){intstart=101;//被除数开始的值,包含本身......