看一下演示代码,先是增加数组和对象。

<template>
<div>
<p>这是我定义的数组</p>
<div>{{this.arr}}</div>
<button @click="changeArr">点击这里我就要修改数组里第一个</button>
<p>这是我的对象</p>
<div>{{this.haha}}</div>
<button @click="changeObj">点击这里我就要添加对象的属性</button>
</div>
</template> <script>
export default {
name: "test",
data() {
return {
arr: [0, 1, 2, 3, 4, 5, 6],
haha: {
name: "123",
age: 12,
story: "从前有座山",
}
};
},
watch:{
'arr':{
handler:function(val,oldval){
console.log('修改后',val,'修改前',oldval);
},
},
'haha':{
handler:function(val,oldval){
console.log('修改后',val,'修改前',oldval);
}
}
}, methods: {
changeArr() {
this.arr.push('12332') // 添加数组
console.log("这是修改之后的数组", this.arr); },
changeObj() {
this.haha.content = "我是一个小和尚"; // 添加对象
console.log("这是修改之后的对象", this.haha);
}
}
};
</script>

  

由此可见,watch监听到了数组的增加,并没有监听到对象的增加(没有监听到所以视图中的数据并没有发生改变)

接下来修改数组和对象(修改了对象中的value)

changeArr() {
this.arr[0]=1232 // 修改数组
console.log("这是修改之后的数组", this.arr); },
changeObj() {
this.haha.story = "我是一个小和尚"; // 修改对象的value
console.log("这是修改之后的对象", this.haha);
}

  

用VUE监听数组和对象的变化的更多相关文章

  1. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  2. vue监听数组中某个属性,计算其他属性问题

    今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题,刚开始代码如下 this.weekList1=r.data.roomProducts; this.weekList1.map ...

  3. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  4. vue watch监听不到对象,探究 watch 原理

    最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...

  5. vue如何监听数组的变化

    export function def (obj: Object, key: string, val: any, enumerable?: boolean) { Object.defineProper ...

  6. vue 监听父子组件传参,对象数据变化

    watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...

  7. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  8. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  9. AngularJS监听数组变化

    我们在使用angualr的监听时候,业务的需要我们会去监听一个数组的某一个值得变化,再写逻辑代码.然而我们在使用$scope.$watch("",function(){ })时候会 ...

随机推荐

  1. 【期望DP】[UVA1498] Activation

    显然是概率DP 我们用dp[i][j]表示队伍中有i个人,lyk的小迷妹现在排在j这个位置时的概率大小 不难列出下列转移方程: (显然已经排到前面k个位置的时候是要加上爆炸也就是p4的概率的) $$f ...

  2. LoadRunner中字符串的操作

    LoadRunner中字符串的操作 LoadRunner中常用的字符串操作函数有:                strcpy(destination_string, source_string); ...

  3. thinkphp 关联关系

    关联关系 通常我们所说的关联关系包括下面三种: 大理石平台等级 一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MA ...

  4. Java-MyBatis-MyBatis3-XML映射文件:XML映射文件

    ylbtech-Java-MyBatis-MyBatis3-XML映射文件:XML映射文件 1. XML 映射文件 MyBatis 的真正强大在于它的映射语句,这是它的魔力所在.由于它的异常强大,映射 ...

  5. iOS之CGPath的应用(二)

    1.矩形路径 CG_EXTERN CGPathRef CGPathCreateWithRect(CGRect rect, const CGAffineTransform * __nullable tr ...

  6. ireport 无法打开问题

    打开时闪退 ,是因为jdk版本过高的原因:https://blog.csdn.net/aust_glj/article/details/52291240 相关软件下载地址: JasperReports ...

  7. elasticsearch 中文API 获得(三)

    获取API 获取API允许你通过id从索引中获取类型化的JSON文档,如下例: GetResponse response = client.prepareGet("twitter" ...

  8. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  9. 延迟对象deferred

    Twisted 官方称,“Twisted is event-based, asynchronous framework ”.这个“异步”功能的代表就是 deferred. deferred 的作用类似 ...

  10. [洛谷]P1505 [国家集训队]旅游

    题目链接: 传送门 题目分析: 树剖板,支持单点修改,区间取反,区间求最大值/最小值/和 区间取反取两次等于没取,维护一个\(rev\ tag\),每次打标记用\(xor\)打,记录是否需要翻转,\( ...