文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Object.assign触发watch原理示例解析

2022-11-13 19:20

关注

为什么可以用Object.assign触发$watch

Object.assign,这个api在简单拷贝可枚举对象的属性值时经常用到。这里介绍一个在vue2中Object.assign的用法,这个用法在官网文档 有详细介绍:

watch: {
	someObject(nvalue, ovalue) {
		...
	}
}
// 为对象添加新属性
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

而且要注意的是如果像下面这样添加上去的新属性无法触发更新:

this.someObject = Object.assign(this.someObject, { a: 1, b: 2 })

问题是为什么前面那种写法会有效?

先看vue2文档

在vue2的文档中有详细说明,在组件的依赖收集过程中,所有property 在被访问和修改时会通知变更,对于对象来说,Vue 无法检测 property 的添加或移除。

一般情况下,在vue中,如果要对data对象中实例添加根级别property,我们可以这样操作:

Vue.set(someObject, 'name', value)

或者这样操作

this.$set(this.someObject,'name',2)

但是如果我们要对一个对象添加多个属性,同时还要保持对象的响应性,这种情况下就要用到开篇提到的方法。

在mdn 上,对 Object.assign 有这一句解释:该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。对这句,我们用下面的例子a来理解。

var obj = {};
var c = null
Object.defineProperty(obj, 'c', {
  set:function(x){
    console.log('c被赋值:',x);
    c=x
  },
  get:function(){
    console.log('c被取出:',c)
    return c
  }
})
obj.c=3  //c被赋值: 3
obj.c  //c被取出:  3
obj = Object.assign(obj, {c: 'wer23e'}) // 触发了set!
obj = Object.assign(obj, {a: 'wer23e'}) // 由于事先未用defineProperty定义a,所以无法监听
// 由于目标对象未定义属性,无法监听
obj = Object.assign({},obj, {a: 'wer23e',c: 'dfrr23e'}) 

通过这段代码可以理解上面说的“Object.assign会使用目标对象的[[Set]]”,同时,这段代码也演示了vue2中响应原理,因为vue2中所有需要响应的属性都是用 Object.defineProperty 进行响应绑定,这样所有的访问和修改动作都会被追踪到。

但是对于没有事先被 Object.defineProperty定义的属性,比如添加一个属性就无法监听到了。在上面的示例中,即使我用文档提到的用法 obj = Object.assign({},obj, {a: 'wer23e',c: 'dfrr23e'}) 仍然无法触发c属性的 set。走到这一步,是不是得看watch源码了?其实不必!

用Object.assign触发watch原理

针对这个问题,watch的源码不必看,但是 Object.assign 的源码必须要看,

if (typeof Object.assign !== 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target === null || target === undefined) {
        throw new TypeError('Cannot convert undefined or null to object');
      }
      var to = Object(target);
      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];
        if (nextSource !== null && nextSource !== undefined) {
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

其实就是把 assign 方法中的参数的可枚举属性全部复制到此方法的第一参数上去。回头再去理解下例子a, obj = Object.assign({},obj, {a: 'wer23e',c: 'dfrr23e'}) 无法触发c属性的 set 函数是因为,obj引用关系已经被改变了,不再是原来那个对象,也就没有了对应的属性监控,但是为什么官方文档会建议这么用呢?

接下来,我写了个小demo,来帮你理解,你可以试下效果

<template>
 <div style="width: 100px; height: 50px; position: absolute; top: 100px" @click="clickme()"> 点我啊 {{ test.a }}</div>
</template>
<script>
export default {
	data() {
		test: { a: 3 },
	},
	watch: {
    test(n, o) {
      debugger
      console.log(n)
    }
  },
	methods: {
		clickme() {
      debugger
      this.test = Object.assign(this.test, { a: 1 })
      debugger
      this.test = Object.assign(this.test, { a: 1, b: 2 })
      debugger
      this.test = Object.assign({}, this.test, { a: 1, b: 2 })
    },	
}
}
</script>

可以看到,确实,最后一种Object.assign方法会触发test对象监听。前面两种写法,只能触发对象的属性更新响应,如果给obj对象添加属性,就无法监测到obj的变化。到这一步,其实如果要彻底弄清楚,最好还是看下 watch 源码。我在仔细分析了后,才发现其实跟watch源码没有什么关系,所以本文就不展开分析了,这是另一篇文章的事了。

如果看不明白 watch 源码也没关系,其实简单解释就是,用obj = Object.assign({},obj, {a: 'wer23e',c: 'dfrr23e'}) 这种方式,改变了obj的引用关系,也就是obj的值变了,所以如果你在watch函数中监听了obj,obj是变化了的,只不过obj的值是一个 Object 对象而已,所以会触发obj对象的响应。

参考资料:

cn.vuejs.org/v2/guide/re…

developer.mozilla.org/zh-CN/docs/…

https://www.jb51.net/article/265630.htm

https://www.jb51.net/article/266683.htm

以上就是Object.assign触发watch原理示例解析的详细内容,更多关于Object.assign触发watch的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯