关于 vue 不能 watch 数组变化 和 对象变化的解决方案
原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案
vue 监听数组和对象的变化
vue 监听数组
vue 实际上可以监听数组变化,比如:
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},
再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素,并在下标 0 插入一个元素 3:
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},
push 数组也能够监听到
vue 无法监听数组变化的情况
但是,数组在下面两种情况无法监听:
- 利用索引直接设置一个数组项时,例如:arr[indexOfItem] = newValue;
- 修改数组的长度时,例如:arr.length = newLength;
举例无法监听数组变化的情况
- 利用索引直接修改数组值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},
- 修改数组的长度
长度大于原数组就将后续元素设置为 undefined
长度小于原数组就将多余元素截掉data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
上面的 watchArr 变成
vue 无法监听数组变化的解决方案
- this.$set(arr, index, newVal);
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.$set(this.watchArr, 0, {name: 'xiaoyue'});
}, 1000);
},
使用数组 splice 方法可以监听,例子上面有
使用临时变量直接赋值的方式,原理与直接赋值数组一样
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
let temp = [...this.watchArr];
temp[0] = {
name: 'xiaoyue',
};
this.watchArr = temp;
}, 1000);
},
vue 监听对象
vue 可以监听直接赋值的对象
this.watchObj = {name: 'popo'};
vue 不能监听对象属性的添加、修改、删除
vue 监听对象的解决方法
- 使用 this.$set(object, key, value)
- 使用深度监听 deep: true,只能监听原有属性的变化,不能监听增加的属性
mounted () {
// 这里使用深度监听 blog 对象的属性变化,会触发 getCatalog 方法
this.$watch('blog', this.getCatalog, {
deep: true,
});
},
- 使用 this.set(obj, key, val) 来新增属性(vue 无法监听 this.set 修改原有属性)
this.$set(this.watchObj, 'age', 124);
delete this.watchObj[‘name’](vue 无法监听 delete 关键字来删除对象属性)
- 使用 Object.assign 方法,直接赋值的原理监听(最推荐的方法)
this.watchObj = Object.assign({}, this.watchObj, {
name: 'xiaoyue',
age: 15,
});
原文地址:
关于 vue 不能 watch 数组变化 和 对象变化的解决方案
关于 vue 不能 watch 数组变化 和 对象变化的解决方案的更多相关文章
- vue 不能检测数组长度 值变化原因解析
1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...
- vue中改变数组的值视图无变化
今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
- vue 绑定class、v-bind:style(对象语法、数组语法)
绑定 HTML Class 我们可以传给 v-bind:class 一个对象,以动态地切换 class: 内联样式在模板里 <div id="div1" :class=&qu ...
- vue : watch、computed、以及对象数组
watch和computed是vue框架中很重要的特性. 那么,他们是怎么作用于对象数组的? 今天我们就来探究一下. 上代码. <template> <div class=" ...
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...
随机推荐
- TS+React+Redux 使用之搭建环境
使用 create-react-app 构建 1.全局安装create-react-app npm install -g create-react-app 2.创建一个项目 create-react- ...
- Linux系统下如何运行.sh文件
在Linux系统下运行.sh文件有两种方法,比如我在root目录下有个datelog.sh文件 第一种(这种办法需要用chmod使得文件具备执行条件(x): chmod u+x datelog.sh) ...
- requirejs + sass 实现的前端及 grunt 自动化构建
对于 现在的 vue . react .webpack 来说也许有点旧了,有时候,越简单的技术越可靠,备份一下 module.exports = function(grunt) { // Projec ...
- sqlite3数据库教程
1.sqlite3安装(命令行): sudo apt-get install sqlite3 2.图形界面查看工具安装: sudo apt-get install sqlitebrowser 3.命令 ...
- 一篇年薪60万的JVM性能调优文章
JVM 调优概述 性能定义 吞吐量 - 指不考虑 GC 引起的停顿时间或内存消耗,垃圾收集器能支撑应用达到的最高性能指标. 延迟 - 其度量标准是缩短由于垃圾啊收集引起的停顿时间或者完全消除因垃圾收集 ...
- Javascript高级编程学习笔记(92)—— Canvas(9) 渐变
渐变 渐变由 canvasGradient 实例表示 要创建一个渐变对象需要调用 createLinearGradient() 方法 该方法接收四个参数: 起点的x坐标 起点的y坐标 终点的x坐标 终 ...
- [Swift]LeetCode402. 移掉K位数字 | Remove K Digits
Given a non-negative integer num represented as a string, remove k digits from the number so that th ...
- [Swift]LeetCode409. 最长回文串 | Longest Palindrome
Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...
- Android开发:在Eclipse中配置Android环境
一.文件需要: https://pan.baidu.com/s/1-XCSSPW5JGyPRlvwRVSfmA 提取码:m5t8 NDK过大没有上传在这个文件里. 二.在Eclipse中配置Tools ...
- 网络协议 7 - UDP 协议:性善碰到城会玩
网络协议五步登天路,我们一路迈过了物理层.链路层,今天终于到了传输层.从这一层开始,很多知识应该都是服务端开发必备的知识了,今天我们就一起来梳理下. 其实,讲到 UDP,就少不了 TC ...