详解Vue如何监测数组的变化
目录
- 一、使用 Vue.js 提供的方法来更新数组
- 二、使用专门用于监测数组变化的语法糖
- 三、使用Vue.observable()函数
- 四、使用 computed 属性和 watch 属性监测数组变化
- 五、使用 Deep Watcher 方法
- 六、使用 $watch 函数
- 七、使用 Vue 的 $forceUpdate() 方法
- 八、使用 Vue 中的 $nextTick() 方法
- 九、使用 reactive 函数
- 十、使用 vue-devtools 中的 track 功能
在 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 属性可以方便地监测数组和对象的变化，并执行相应的操作。
五、使用 Deep Watcher 方法
watch: {
'myArray': {
deep: true,
handler: function (val) {
// do something with the new and old value of myArray
}
}
}
当 deep 为 true 时，Vue 会递归监测数组中所有对象的变化，但是会带来一些性能开销，所以在实际使用中需要根据实际需要来确定是否使用 deep watcher。
六、使用 $watch 函数
mounted() {
this.$watch(
'myArray',
function(newVal, oldVal) {
// do something with the new and old value of myArray
},
{
deep: true
}
)
}
$watch 方法接收三个参数，第一个是要监测的属性，第二个是回调函数，第三个是配置对象，可以使用 deep 选项来监测对象中的变化。
七、使用 Vue 的 $forceUpdate() 方法
使用 Vue 的 $forceUpdate() 方法来强制组件重新渲染，这样就可以监测到数组的变化。
this.$forceUpdate()
这样做会让组件强制重新渲染, 但是这样会有一些性能开销,所以不建议在组件中频繁使用 $forceUpdate()。
八、使用 Vue 中的 $nextTick() 方法
使用 Vue 中的 $nextTick() 方法来监测数组变化。$nextTick() 函数可以在下一次 DOM 更新循环结束之后执行延迟回调。
this.$nextTick(() => {
// your code
})
这样可以确保在数组变化之后再执行相关的操作，这样就可以监测到数组的变化。
九、使用 reactive 函数
在 Vue3 中可以使用 reactive 函数来创建响应式的数组，这样就可以监测到数组的变化。
import { reactive } from 'vue'
const state = reactive({
myArray: [1, 2, 3]
})
这样Vue3就会自动监测 myArray 变化。
十、使用 vue-devtools 中的 track 功能
注意：该方法无法解决修改数组未触发视图更新的问题，属于数组监测问题
总之，Vue.js 提供了多种方法来监测数组和对象的变化，如使用 Vue.set()，splice()，$set()，$delete()，watch，computed，$watch()，vue-devtools 中的 “track” 功能，Vue3 中的 reactive 函数，$forceUpdate() 和 $nextTick() 等方法，可以根据需要选择合适的方法来实现。
到此这篇关于详解Vue如何监测数组的变化的文章就介绍到这了,更多相关Vue监测数组变化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
关于vue中如何监听数组变化
前言 前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.
-
Vue监听数组变化源码解析
上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在. 这一篇开始考虑数组的问题. 从最简单的入手 先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象. 遍历数组,而后对数组中的每个对象调用 observe 方法 // 上一篇中出现的未曾重写的代码,这一篇中不再重复 var Observer = function Observer(value) { this.value = value; this.dep = new Dep();
-
vuex state中的数组变化监听实例
前言 首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法. 问题 vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数.最终store.js中的代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } c
-
vue中是怎样监听数组变化的
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue
-
详解Vue如何监测数组的变化
目录 一.使用 Vue.js 提供的方法来更新数组 二.使用专门用于监测数组变化的语法糖 三.使用Vue.observable()函数 四.使用 computed 属性和 watch 属性监测数组变化 五.使用 Deep Watcher 方法 六.使用 $watch 函数 七.使用 Vue 的 $forceUpdate() 方法 八.使用 Vue 中的 $nextTick() 方法 九.使用 reactive 函数 十.使用 vue-devtools 中的 track 功能 在 Vue 中,如果
-
详解VUE 数组更新
1.数据方法分类: (1)原数组改变 push pop unshift shift reverse sort splice (2)原数组未变,生成新数组 slice concat filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&
-
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}
-
详解vue高级特性
Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet
-
详解 vue.js用法和特性
前 言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
-
详解Vue文档中几个易忽视部分的剖析
针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components
-
详解Vue之计算属性
模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护 什么是计算属性 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如 <div> {{text.split(',').reverse().join(',')}} </div>. 这里表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以用计算属性进行改写: <div id="Calculat
-
详解Vue.js 响应接口
Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click
-
详解vue中v-model和v-bind绑定数据的异同
vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
-
详解Vue中的watch和computed
前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in