关于vue中如何监听数组变化

2024-12-05 00:32:52

前言

前段时间学习了关于vue中响应式数据的原理，（并作了学习笔记vue响应式原理），其实是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。那么数组有一系列的操作方法，这些方法并不会触发数组的getter和setter方法。那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~

源码部分

https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js

从哪开始第一步学习呢

Emmmm...
我觉得要先把Vue中的数据响应式原理弄清楚，这样对于理解vue中是如何检测数组的变化才比较好，所以，可以去网上找下文章然后配合源码进行阅读，相信你一定会理解的。推荐下我之前看的一篇博客，还有我看过后自己写的学习记录吧，哈哈。

vue响应式原理

vue的双向绑定原理和实现

好的，先看看这个吧。哈哈！

从图开始

咱们先看下下面的图，先了解下vue中实现的思路，这样接下来再看源码的实现，会一清二楚，明明白白。

看到这个图然后思考一下，是不是大致了解了~

首先判断浏览器是否支持__proto__指针

重写数组的这7个方法，然后根据是否支持__proto__，将改写后的数组指向数组的prototype。

是不是很简单！！！

看看源码吧

了解了实现原理，那么我们再看看源码吧，看下源码主要是更深入的了解作者是如何实现的，也可以看下优秀的代码编码方式，加以学习。

关于一些解释我就写在下面的代码块中了哈！

//https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js

//def方法是基于Object.defineProperty封装的一层方法，很简单，我会在下面把代码贴出来，免得大家去找了。
import { def } from '../util/index' 

//保存下原生的数组原型对象
const arrayProto = Array.prototype

//进行原型连接，将arrayMethods的原型指向Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // 缓存原生的方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    var args = [],
    len = arguments.length;
    while (len--) args[len] = arguments[len];
    const result = original.apply(this, args) // 原来的数组方法执行结果
    const ob = this.__ob__ // 这个__ob__就是Observe的实例~~~~
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted) // 如果数组有变化，则重新调用observeArray
    // notify change
    ob.dep.notify()  //
    return result
  })
})

这个是关于Observe的代码：

var Observer = function Observer(value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);  //这里会看到在每个对象数据上都会绑定一个Observe的实例，所以上面代码中的this.__ob__就是这个
    if (Array.isArray(value)) { // 这里判断是否是数组类型的数据，如果是的话就走observeArray
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value); //这里就是处理数组类型的数据，如下
    } else {
      this.walk(value);
    }
  };

如下是observeArray的实现：

Observer.prototype.observeArray = function observeArray(items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]); // 这个observe方法如下
    }
  };

在这里我们看下observe这个方法：

function observe(value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

这个是关于def方法的实现,很简单我就不说了哈：

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
}

以上就是关于vue中如何监听数组变化的详细内容，更多关于vue如何监听数组的资料请关注我们其它相关文章！

Vue监听数组变化源码解析

上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在. 这一篇开始考虑数组的问题. 从最简单的入手先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象. 遍历数组,而后对数组中的每个对象调用 observe 方法 // 上一篇中出现的未曾重写的代码,这一篇中不再重复 var Observer = function Observer(value) { this.value = value; this.dep = new Dep();
vue深度监听(监听对象和数组的改变)与立即执行监听实例

1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
Vue父组件监听子组件生命周期

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示: //
Vue开发之watch监听数组、对象、变量操作分析

本文实例讲述了Vue开发之watch监听数组.对象.变量操作.分享给大家供大家参考,具体如下: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch:深拷贝 data() { return { winChips: new Array(11).fill(0) } }, watch: { winCh
vue在App.vue文件中监听路由变化刷新页面操作

在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.
vue 监听 Treeselect 选择项的改变操作

项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值. 我使用了watch 来监听 treeselect 绑定的 model ,如果 model 的值发生变化就触发 currDeptChange 事件. <el-form-item prop="deptId" :label="$t('deviceManage.device.table.deptId')+':'"> <treeselec
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求

网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed(
vue中是怎样监听数组变化的

我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue
vue 手机物理监听键+退出提示代码

我就废话不多说了,大家还是直接看代码吧~ <script> //Toast 这些都是在网上粘的别人的.但是找不到出处了,大佬见谅. function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="width: 60%;min-width: 150px;opaci
关于vue中如何监听数组变化

前言前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.
vue中实现监听数组内部元素

目录 vue监听数组内部元素我们有两种办法解决此问题 vue如何监听数组的变化 vue监听数组内部元素在VUE中,对数组的监听是浅监听,也就是它只能监听到数组的长度或者有无的变化,当我们修改数组中的某一个值时,也就是数组的长度状态并没有改变时,在正常情况下它是无法监听到的,在watch中我们知道可以使用deep属性进行深监听,那么在其他情况下呢? 我们有两种办法解决此问题 1.通过原生的js对数组先进行切割,然后在添加新的内容(也就是我们要修改的内容) array.splice(i, 1,
Vue2中无法监听数组和对象的某些变化问题

目录一.数组 1. 不能监听的情况 2. 替代做法 3. 注意二.对象 1. 不能监听的情况 2. 替代做法三.分析 vue 2 无法监听数组和对象的这些变化的原因 1. 对于数组 2. 对象四.vue 3响应式原理关于vue监听的一些问题对象的监听数组的监听一.数组 1. 不能监听的情况 (1) 直接通过下标赋值 arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 Vue.set(arr, index,
vue中watch监听不到变化的解决

目录 watch监听不到对象内部的变化解决方法: watch的handler方法的两个参数值相同解决方法: 全部代码 watch监听不到对象内部的变化有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro
Vue使用watch监听数组或对象

1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0;
vue中watch监听对象中某个属性的方法

目录 immediate 和 handler deep 深度监听以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne
vue中同时监听多个参数的实现

目录如何同时监听多个参数 data中定义一个对象完整代码 vue事件监听,条件判断事件监听 v-on 条件判断如何同时监听多个参数 vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watch data中定义一个对象 data(){ return{ obj:{ name:'xpf', gender:'male', age:2
Vue中watch监听第一次不触发、深度监听问题

目录 watch监听第一次不触发.深度监听第一次不触发例如 vue watch使用无效问题 watch监听第一次不触发.深度监听第一次不触发 handler:其值是一个回调函数.即监听到变化时应该执行的函数. deep:其值是true或false:确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到.) immediate:其值是true或false:确认是否以当前的初始值执行handler的函数例如我将父组件中的WatchId传递到这个子组件页面我要根据

关于vue中如何监听数组变化

前言

源码部分

从哪开始第一步学习呢

从图开始

看看源码吧

相关推荐

随机推荐