watch和computed是vue框架中很重要的特性。

那么,他们是怎么作用于对象数组的?

今天我们就来探究一下。

上代码。

<template>
<div class="hello">
{{ msg }} <div>
<button @click="submit">plus</button>
</div> <div>{{ testNum }}</div>
</div>
</template> <script> export default {
name: 'abc',
data () {
return {
msg: 'Welcome to Your Vue.js App',
originNum:0,
originObj:[ ] }
}, computed: {
testNum(){
console.log("computed")
if (this.originObj.length === 0) {
this.$set(this.originObj, 0, {number:0})
return this.originObj[0].number
}
let obj = this.originObj[0]
obj.number = -obj.number
this.$set(this.originObj, 0, obj) return this.originObj[0].number
}
},
watch:{
originObj:{
handler: function (val, oldVal) { console.log("watch") },
deep:true
}
},
created(){ },
mounted(){ },
methods:{
submit(){
let obj = this.originObj[0]
obj.number = 100
this.$set(this.originObj, 0, obj)
}
}
};
</script> <style scoped> </style>

首先是初始化(进入这个页面时)。

从日志中可以看到,先调用了computed,再调用了watch。

看代码。数据绑定是绑定了computed:testNum,所以初始化时就会调用。

      if (this.originObj.length === 0) {
this.$set(this.originObj, 0, {number:0})
return this.originObj[0].number
}

因为初始的对象数组originObj没有对象,所以加了一个对象。watch监听到originObj改变了,所以打了日志。

    submit(){
let obj = this.originObj[0]
obj.number = 100
this.$set(this.originObj, 0, obj)
}

然后,我点击按钮,触发submit()方法。

再看日志,分别触发了watch computed watch。

submit()方法修改了this.originObj[0].number,this.originObj的watch加了deep:true,所以可以监听到,watch打进日志。

this.originObj改变了,所以触发了computed:testNum(计算属性computed有缓存,只在值改变时触发),computed打进日志。

computed:testNum触发的时候同时也修改了this.originObj,所以再次触发watch,watch打进日志。

以上。

vue : watch、computed、以及对象数组的更多相关文章

  1. vue学习(十三) 删除对象数组中的某个元素

    //html <div id="app"> //v-for循环就不写了 每一条数据最后都有一个删除的超链 .prevent阻止默认的跳转行为 只执行点击事件 <a ...

  2. vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

    vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...

  3. vue - for 遍历对象和遍历对象数组

    1. 遍历对象时,参数: 第一个为值,第二个为键名,第三个为索引 <!DOCTYPE html> <html lang="en"> <head> ...

  4. vue的v-for循环普通数组、对象数组、对象、数字

    如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  5. vue 接口 对象数组的传入传出

    数组传入 对象的话用{...obj} <selectFile :tableData="[...tableData]" @uploadSuccess="data =& ...

  6. vue中computed和watch的写法,以及区别

    <template> <div class="print"> <div style="color: red"> <p ...

  7. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  8. [转] vue之computed和watch

    计算属性 computed 侦听器or观察者 watch 一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊: computed ...

  9. Vue源码解析之数组变异

    力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...

随机推荐

  1. GridView绑定数据与隐藏指定控件(模板列)

    1.1.    GridView绑定数据 1)       可以配置SqlDataSource数据源,修改select语句生成框架(不想手动绑定) 2)       删除DataSourceID属性和 ...

  2. opencv C++ Mat构造函数

    cv::Scalar scalar1(v); cv::Mat mat3(size,CV_8UC1,scalar1); std::cout<<mat3<<std::endl; s ...

  3. python读取文件路径

    不同系统对文件路径的分割符不同: 在Windows系统下的分隔符是:\ (反斜杠). 在Linux系统下的分隔符是:/(斜杠). 绝对路径和相对路径 绝对路径就是文件的真正存在的路径,是指从硬盘的根目 ...

  4. spring bean post processor

    相关文章 Spring 整体架构 编译Spring5.2.0源码 Spring-资源加载 Spring 容器的初始化 Spring-AliasRegistry Spring 获取单例流程(一) Spr ...

  5. Zookeeper-Access Control List(ACL)

    概述 Z K作为一个分布式协调框架.内部存储着一些分布式系统运行时状态的元数据.如何有效的保护这些数据的安全.如何做一个比较好的权限控制显得非常的重要. ZK 为我们提供一套完善的 ACL(acces ...

  6. python递归函数实现阶乘函数

    实现的效果如下: 参考www.cnblogs.com/yuanchenqi/articles/5828233.html f(5)=5*4*3*2*1=120   f(7)=7*6*5*4*3*2*1= ...

  7. 服务消费者(Ribbon)

    上一篇文章,简单概述了服务注册与发现,在微服务架构中,业务都会被拆分成一个独立的服务,服务之间的通讯是基于http restful的,Ribbon可以很好地控制HTTP和TCP客户端的行为,Sprin ...

  8. .netcore 网站启动后 502.5

    网站启动后,报错 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure 请检查安装的.netcore runtime版本和hosting版本是否 ...

  9. 使用Tensorflow对模型进行量化

    本文旨在将迁移学习训练好的模型基于tensorflow工具进行量化. 环境配置及迁移学习部分可参考博文[https://www.cnblogs.com/hayley111/p/12887853.htm ...

  10. 每日一题 - 剑指 Offer 32 - I. 从上到下打印二叉树

    题目信息 时间: 2019-06-25 题目链接:Leetcode tag:BFS(广度优先搜索) 队列 难易程度:中等 题目描述: 从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印 ...