如果被问到 Vue 怎么实现数据双向绑定,大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持,但是 Object.defineProperty() 只能对属性进行数据劫持,不能对整个对象进行劫持。
同理无法对数组进行劫持,但是我们在使用 Vue 框架中都知道,Vue 能检测到对象和数组(部分方法的操作)的变化,那它是怎么实现的呢?我们查看相关代码如下:

  /**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // observe 功能为监测数据的变化
}
} /**
* 对属性进行递归遍历
*/
let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看,我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象,从而达到利用 Object.defineProperty() 也能对对象和数组(部分方法的操作)进行监听。

Vue 框架怎么实现对象和数组的监听?的更多相关文章

  1. vue将地区以对象、数组的格式传给后端

    项目涉及到了一个地区筛选,同时省市区三级不进行关联,后端要求以对象包数组的格式传参,完整代码 1.先拿到接口返回的地区数据 对数据进行处理,拿到想要的格式 this.provinceOption =r ...

  2. vue中关于对象的监听与数组的监听

    数组: 数组可监听到的方法:'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' 如果是根据索引改变值,需要使用vue.$set ...

  3. vue watch关于对象内的属性监听

    vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.lo ...

  4. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  5. 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...

  6. Vue.js中 watch的理解以及深度监听

    如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...

  7. vue任意关系组件通信与跨组件监听状态 vue-communication

    大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好 ...

  8. Vue中计算属性(computed)和监听属性函数watch的比较

    1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...

  9. vue基础篇---修改对象或数组的值,页面实时刷新

    这个问题估计大家很难想到,如果一个数组[1,2,3,4],然后我们v-for遍历,我们改变数组的值,arr[1] = 5 ,难道不应该改变么?按理说根据vue的特性应该是改变的,但是事实上确实数组已经 ...

  10. vue 内存数组变化监听

    watch: { carts: { handler(val, oldVal) { subtotal(this.carts); console.log(this.carts) }, deep: true ...

随机推荐

  1. 远程桌面使用Pr剪视频

    要远程访问高性能计算机并使用 Pr(Adobe Premiere Pro)进行视频编辑,您可以考虑使用流畅且响应迅速的远程桌面软件.您可以考虑以下选项. Splashtop Business Acce ...

  2. 80x86汇编—汇编程序基本框架

    文章目录 First Program 指令系统 伪指令 数值表达式 程序框架解释 int 21 中断 通过一个基本框架解释各个指令和用处,方便复习.所以我认为最好的学习顺序就是先看一段完整的汇编代码程 ...

  3. 5GC 系统架构

    目录 文章目录 目录 前文列表 4G/5G 核心网对比 4G/5G 核心网融合架构 5GC 架构 AMF 功能 SMF 功能 NSSF 功能 UPF 功能 AF.PCF & NEF 功能 BS ...

  4. 一款基于C#开发的通讯调试工具(支持Modbus RTU、MQTT调试)

    前言 今天大姚给大家分享一款基于C#.WPF.Prism.MaterialDesign.HandyControl开发的通讯调试工具(支持Modbus RTU.MQTT调试,界面色彩丰富):Wu.Com ...

  5. Java手机号校验规则最新

    一.最新的Java手机号校验规则 在Java中,进行手机号校验通常使用正则表达式(Regex)来匹配手机号的格式.以下是一个基于当前(截至2024年)中国手机号规则的校验方法: 中国手机号通常以数字1 ...

  6. Python OpenCV #1 - OpenCV介绍

    一.OpenCV介绍 1.1 OpenCV-Python教程简介 OpenCV由 Gary Bradsky 于1999年在英特尔创立,第一个版本于2000年发布. Vadim Pisarevsky 加 ...

  7. PaddleOCR在 Linux下的webAPI部署方案

    很多小伙伴在使用OCR时都希望能过采用API的方式调用,这样就可以跨端跨平台了.本文将介绍一种基于python的PaddleOCR识方案.喜欢的可以关注公众号,获取更多内容. 一. Linux环境下部 ...

  8. [经验分享] VPS安装爱快

    前言:本人是作VPN服务端用,配合域名分流,蛮好用.参考1.送一个阿里云腾讯云安装爱快3.X的文档https://bbs.ikuai8.com/thread-97314-1-1.htmlVPS存在的问 ...

  9. C# .NET6 .NET CORE EXCEL 导入和导出

    使用NPOI导入.xlsx遇到"EOF in header"报错,网上找好很多方法,没解决,最后换成EPPlus.Core导入. 导出默认是.xls. NPOI 操作类: usin ...

  10. ssh基础

    SSH安全登录 机器准备 什么是SSH SSH 或 Secure Shell 协议是一种远程管理协议,允许用户通过 Internet 访问.控制和修改其远程服务器. SSH 服务是作为未加密 Teln ...