Vue源码学习之响应式是如何实现的

目录
  • 前言
  • 一、一个响应式系统的关键要素
    • 1、如何监听数据变化
    • 2、如何进行依赖收集——实现 Dep 类
    • 3、数据变化时如何更新——实现 Watcher 类
  • 二、虚拟 DOM 和 diff
    • 1、虚拟 DOM 是什么?
    • 2、diff 算法——新旧节点对比
  • 三、nextTick
  • 四、总结

前言

作为前端开发,我们的日常工作就是将数据渲染到页面➕处理用户交互。在 Vue 中,数据变化时页面会重新渲染,比如我们在页面上显示一个数字,旁边有一个点击按钮,每次点击一下按钮,页面上所显示的数字会加一,这要怎么去实现呢?
按照原生 JS 的逻辑想一想,我们应该做三件事:监听点击事件,在事件处理函数中修改数据,然后手动去修改 DOM 重新渲染,这和我们使用 Vue 的最大区别在于多了一步【手动去修改DOM重新渲染】,这一步看起来简单,但我们得考虑几个问题:

  • 需要修改哪个 DOM ?
  • 数据每变化一次就需要去修改一次 DOM 吗?
  • 怎么去保证修改 DOM 的性能?

所以要实现一个响应式系统并不简单🍳,来结合 Vue 源码学习一下 Vue 中优秀的思想叭~

一、一个响应式系统的关键要素

1、如何监听数据变化

显然通过监听所有用户交互事件来获取数据变化是非常繁琐的,且有些数据的变动也不一定是用户触发的,那Vue是怎么监听数据变化的呢?—— Object.defineProperty

Object.defineProperty 方法为什么能监听数据变化?该方法可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,先来看一下它的语法:

Object.defineProperty(obj, prop, descriptor)
// obj是传入的对象,prop是要定义或修改的属性,descriptor是属性描述符

这里比较核心的是 descriptor,它有很多可选键值。这里我们最关心的是 get 和 set,其中 get 是一个给属性提供的 getter 方法,当我们访问了该属性的时候会触发 getter 方法;set 是一个给属性提供的 setter 方法,当我们对该属性做修改的时候会触发 setter 方法。

简言之,一旦一个数据对象拥有了 getter 和 setter,我们就可以轻松监听它的变化了,并可将其称之为响应式对象。具体怎么做呢?

function observe(data) {
  if (isObject(data)) {
    Object.keys(data).forEach(key => {
      defineReactive(data, key)
    })
  }
}

function defineReactive(obj, prop) {
  let val = obj[prop]
  let dep = new Dep() // 用来收集依赖
  Object.defineProperty(obj, prop, {
    get() {
      // 访问对象属性了,说明依赖当前对象属性,把依赖收集起来
      dep.depend()
      return val
    }
    set(newVal) {
      if (newVal === val) return
      // 数据被修改了,该通知相关人员更新相应的视图了
      val = newVal
      dep.notify()
    }
  })
  // 深层监听
  if (isObject(val)) {
    observe(val)
  }
  return obj
}

这里我们需要一个 Dep 类(dependency)来做依赖收集🎭

PS:Object.defineProperty 只能监听已存在的属性,对于新增的属性就无能为力了,同时无法监听数组的变化(Vue2中通过重写数组原型上的方法解决这一问题),所以在 Vue3 中将其换成了功能更强大的Proxy。

2、如何进行依赖收集——实现 Dep 类

基于构造函数实现:

function Dep() {
  // 用deps数组来存储各项依赖
  this.deps = []
}
// Dep.target用来记录正在运行的watcher实例,这是一个全局唯一的 Watcher
// 这是一个非常巧妙的设计,因为JS是单线程的,在同一时间只能有一个全局的 Watcher 被计算
Dep.target = null

// 在原型上定义depend方法,每个实例都能访问
Dep.prototype.depend = function() {
  if (Dep.target) {
    this.deps.push(Dep.target)
  }
}
// 在原型上定义notify方法,用于通知watcher更新
Dep.prototype.notify = function() {
  this.deps.forEach(watcher => {
    watcher.update()
  })
}
// Vue中会有嵌套的逻辑,比如组件嵌套,所以利用栈来记录嵌套的watcher
// 栈,先入后出
const targetStack = []
function pushTarget(_target) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}
function popTarget() {
  Dep.target = targetStack.pop()
}

这里主要理解原型上的两个方法:depend 和 notify,一个用于添加依赖,一个用于通知更新。我们说收集“依赖”,那 this.deps 数组里到底存的是啥东西啊?Vue 设置了 Watcher 的概念用作依赖表示,即 this.deps 里收集的是一个个 Watcher。

3、数据变化时如何更新——实现 Watcher 类

Watcher,在Vue中有三种类型,分别用于页面渲染以及computed和watch这两个API,为了区分,将不同用处的 Watcher 分别称为 renderWatcher、computedWatcher 和 watchWatcher。

用 class 实现一下:

class Watcher {
  constructor(expOrFn) {
    // 这里传入参数不是函数时需要解析,parsePath略
    this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn)
    this.get()
  }
  // class中定义函数不需要写function
  get() {
    // 执行到这时,this是当前的watcher实例,也是Dep.target
    pushTarget(this)
    this.value = this.getter()
    popTarget()
  }
  update() {
    this.get()
  }
}

到这里,一个简单的响应式系统就成形了,总结来说:Object.defineProperty 让我们能够知道谁访问了数据以及什么时候数据发生变化,Dep 可以记录都有哪些 DOM 和某个数据有关,Watcher 可以在数据变化的时候通知 DOM 去更新。
Watcher 和 Dep 是一个非常经典的观察者设计模式的实现。

二、虚拟 DOM 和 diff

1、虚拟 DOM 是什么?

虚拟 DOM 是用 JS 中的对象来表示真实的DOM,如果有数据变动,先在虚拟 DOM 上改动,最后再去改动真实的DOM,good idea!💡

关于虚拟 DOM 的优势,还是听尤大的:

在我看来 Virtual DOM 真正的价值从来都不是性能,而是它 1) 为函数式的 UI 编程方式打开了大门;2) 可以渲染到 DOM 以外的 backend。

举个例子:

<template>
  <div id="app" class="container">
    <h1>HELLO WORLD!</h1>
  </div>
</template>
// 对应的vnode
{
  tag: 'div',
  props: { id: 'app', class: 'container' },
  children: { tag: 'h1', children: 'HELLO WORLD!' }
}

我们可以这样去定义:

function VNode(tag, data, childern, text, elm) {
  this.tag = tag
  this.data = data
  this.childern = childern
  this.text = text
  this.elm = elm // 对真实节点的引用
}

2、diff 算法——新旧节点对比

数据变化时,会触发渲染 watcher 的回调,更新视图。Vue 源码中在更新视图时用 patch 方法比较新旧节点的异同。

(1)判断新旧节点是不是相同节点

function sameVNode()
function sameVnode(a, b) {
  return a.key === b.key &&
  ( a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
 }

(2)若新旧节点不同

替换旧节点:创建新节点 -->  删除旧节点

(3)若新旧节点相同

  • 都没有子节点,好说
  • 一个有子节点一个没有,好说,要么删除个子节点要么新增个子节点
  • 都有子节点,这可就有点复杂了,执行updateChildren:
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm
  // 以上是新旧Vnode的首尾指针、新旧Vnode的首尾节点

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 如果不满足这个while条件,表示新旧Vnode至少有一个已经遍历了一遍了,就退出循环
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 比较旧的开头和新的开头是否是相同节点
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 比较旧的结尾和新的结尾是否是相同节点
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 比较旧的开头和新的结尾是否是相同节点
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      // 比较旧的结尾和新的开头是否是相同节点
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 设置key和不设置key的区别:
      // 不设key,newCh和oldCh只会进行头尾两端的相互比较,设key后,除了头尾两端的比较外,还会从用key生成的对象oldKeyToIdx中查找匹配的节点,所以为节点设置key可以更高效的利用dom。
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      // 抽取出oldVnode序列的带有key的节点放在map中,然后再遍历新的vnode序列
      // 判断该vnode的key是否在map中,若在则找到该key对应的oldVnode,如果此oldVnode与遍历到的vnode是sameVnode的话,则复用dom并移动dom节点位置
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

这里主要的逻辑是:新节点的头和尾与旧节点的头和尾分别比较,看是不是相同节点,如果是就直接patchVnode;否则的话,用一个 Map 存储旧节点的 key,然后遍历新节点的 key 看它们是不是在旧节点中存在,相同 key 那就复用;这里时间复杂度是O(n),空间复杂度也是O(n),用空间换时间~

diff 算法主要是为了减少更新量,找到最小差异部分 DOM ,只更新差异部分。

三、nextTick

所谓 nextTick,即下一个 tick,那 tick 是什么呢?

我们知道 JS 执行是单线程的,它处理异步逻辑是基于事件循环,主要分为以下几步:

  1. 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack);
  2. 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件;
  3. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行;
  4. 主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick,而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务(task)。 规范中规定 task 分为两大类,分别是 macro task 和 micro task,并且每个 macro task 结束后,都要清空所有的 micro task。

for (macroTask of macroTaskQueue) {
  // 1. Handle current MACRO-TASK
  handleMacroTask()
  // 2. Handle all MICRO-TASK
  for (microTask of microTaskQueue) {
    handleMicroTask(microTask)
  }
}

在浏览器环境中,常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate、setInterval;常见的 micro task 有 MutationObsever 和 Promise.then。

我们知道数据的变化到 DOM 的重新渲染是一个异步过程,发生在下一个 tick。比如我们平时在开发的过程中,从服务端接口去获取数据的时候,数据做了修改,如果我们的某些方法去依赖了数据修改后的 DOM 变化,我们就必须在 nextTick 后执行。比如下面的伪代码:

getData(res).then(() => {
  this.xxx = res.data
  this.$nextTick(() => { // 这里我们可以获取变化后的 DOM })
})

四、总结

到此这篇关于Vue源码学习之响应式是如何实现的文章就介绍到这了,更多相关Vue响应式实现内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3.0数据响应式原理详解

    基于Vue3.0发布在GitHub上的第一版源码(2019.10.05)整理 预备知识 ES6 Proxy,整个响应式系统的基础. 新的composition-API的基本使用,目前还没有中文文档,可以先通过这个仓库(composition-api-rfc)了解,里面也有对应的在线文档. 先把Vue3.0跑起来 先把vue-next仓库的代码clone下来,安装依赖然后构建一下,vue的package下的dist目录下找到构建的脚本,引入脚本即可. 下面一个简单计数器的DEMO: <!DOCTY

  • 浅谈Vue响应式(数组变异方法)

    前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的

  • 浅谈Vue的响应式原理

    一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实例的vm对象 Model层:在Vue中是data.computed.methods等中的数据 在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新 2.Vue的响应式原理 Vue响应式底层实现方法是 Object.defineProperty() 方法,该方法中存在一个getter和s

  • Vue如何实现响应式系统

    前言 最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助.有什么问题欢迎指出,大家共同进步. 什么是响应式系统 一句话概括:数据变更驱动视图更新.这样我们就可以以"数据驱动"的思维来编写我们的代码,更多的关注业务,而不是dom操作.其实Vue响应式的实现是一个变化追踪和变化应用的过程. vue响应式原理 以数据劫持方式,拦截数据变化:以依赖收集方式,触发视图更新.利用es5 Object.defineProperty拦截数据的set

  • Vue响应式添加、修改数组和对象的值

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状

  • Vue响应式原理详解

    Vue 嘴显著的特性之一便是响应式系统(reactivity system),模型层(model)只是普通JavaScript对象,修改它则更新视图(view). Vue 响应式系统的底层细节 如何追踪变化 把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象的所有属性,并使用Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty是仅ES5支持,并无法shim的特性,这也就是为什么Vu

  • 浅谈Vue 数据响应式原理

    前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程. 本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray(). 改造数据 我们先来尝试写一个函数

  • 谈谈对vue响应式数据更新的误解

    对于刚接触vue的同学会经常遇到数据更新了但是模板没有更新的问题,下面将结合vue的响应式特性以及异步更新机制分析常见的错误: 异步更新带来的数据响应式误解 异步数据的处理基本是一定会遇到的,处理不好就会遇到数据不更新的问题,但有一种情况是在未正确处理的情况下也能正常更新,这就会造成一种误解,详情如下所示: 模板 <div id="app"> <h2>{{dataObj.text}}</h2> </div> js new Vue({ el

  • Vue.js每天必学之内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题.下面我们开始深挖 Vue.js 响应系统的底层细节. 如何追踪变化 把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.这是 ES5 特性,不能打补丁

  • Vue源码学习之响应式是如何实现的

    目录 前言 一.一个响应式系统的关键要素 1.如何监听数据变化 2.如何进行依赖收集--实现 Dep 类 3.数据变化时如何更新--实现 Watcher 类 二.虚拟 DOM 和 diff 1.虚拟 DOM 是什么? 2.diff 算法--新旧节点对比 三.nextTick 四.总结 前言 作为前端开发,我们的日常工作就是将数据渲染到页面➕处理用户交互.在 Vue 中,数据变化时页面会重新渲染,比如我们在页面上显示一个数字,旁边有一个点击按钮,每次点击一下按钮,页面上所显示的数字会加一,这要怎么

  • 详解Vue源码学习之双向绑定

    原理 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器. 上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProperty实现对数据改变的监听.Vue主要使用了观

  • Vue源码学习之数据初始化

    目录 初始化数据 创建Vue实例 构造函数扩展方法 初始化状态 调用initData方法对数据进行代理 初始化数据 环境搭建:菜鸟学Vue源码第一步之rollup环境搭建步 响应式数据的核心就是,数据变化了可以监听到数据变化了,数据的取值和更改值可以监测到,首先第一步需要创建一个Vue实例 创建Vue实例 //dist/index.html //用Vue创造一个实例 const vm = new Vue({ data(){ return { name:'i东东', age:18 } } }) 创

  • Vue源码学习记录之手写vm.$mount方法

    目录 一.概述 二.使用方式 三.完整版vm.$mount的实现原理 四.只包含运行时版本的vm.$mount的实现原理 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.概述 在我们开发中,经常要用到Vue.extend创建出Vue的子类来构造函数,通过new 得到子类的实例,然后通过$mount挂载到节点,如代码: <div id="mount-point"></div> <!-- 创建构造器 --> var Profile =

  • 源码分析Vue3响应式核心之effect

    目录 一.effect用法 1.基本用法 2.lazy属性为true 3.options中包含onTrack 二.源码分析 1.effect方法的实现 2.ReactiveEffect函数源码 三.依赖收集相关 1.如何触发依赖收集 2.track源码 3.trackEffects(dep, eventInfo)源码解读 四.触发依赖 1.trigger依赖更新 2.triggerEffects(deps[0], eventInfo) 3.triggerEffect(effect, debugg

  • vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数. 在MDN上查看有关Object.defineProperty的解释. 我们先从最简单的开始: let a = {'b': 1}; Object.defineProperty(a, 'b', { enumerable: false, configur

  • Vue源码学习之关于对Array的数据侦听实现

    摘要 我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持.但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的. 但是Vue作者使用了一个方式来实现Array类型的监测: 拦截器. 核心思想 通过创建一个拦截器来覆盖数组本身的原型对象Array.prototype. 拦截器 通过查看Vue源码路径vue/src/core/observer/array.js. /** * Vue对数组的变化侦测 * 思想: 通过一个拦截器来覆盖

  • Vue源码学习之初始化模块init.js解析

    我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是使用了JavaScript原型继承的原理,在Vue的原型上面增加属性和方法.我们继续跟着this._init(options)走,这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法.首先来从宏观看看这个init文件,可以看出主要是导出了两个函数:i

  • 详解Vue源码学习之callHook钩子函数

    Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount

  • vue源码学习之Object.defineProperty 对数组监听

    上一篇中,我们介绍了一下defineProperty 对对象的监听,这一篇我们看下defineProperty 对数组的监听 数组的变化 先让我们了解下Object.defineProperty()对数组变化的跟踪情况: var a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(

随机推荐