Vue源码解析之数据响应系统的使用

const data = {
 a: 1
};
/**
* exp[String, Function]: 被观测的字段
* fn[Function]: 被观测对象改变后执行的方法
*/
function watch (exp, fn) {

}

watch('a', () => {
 console.log('a 改变了')
})

Object.defineProperty(data, 'a', {
 set () {
  console.log('设置了 a')
 },
 get () {
  console.log('读取了 a')
 }
})

const dep = [];
Object.defineProperty(data, 'a', {
 set () {
  dep.forEach(fn => fn());
 },
 get () {
  dep.push(fn);
 }
})

watch('a', () => {
 console.log('a 改变了')
})

const data = {
 a: 1
};

const dep = [];
Object.defineProperty(data, 'a', {
 set () {
  dep.forEach(fn => fn());
 },
 get () {
  // Target就是该变量的依赖函数
  dep.push(Target);
 }
})

let Target = null;
function watch (exp, fn) {
 // 将fn赋值给Target
 Target = fn;
 // 读取属性，触发get函数，收集依赖
 data[exp];
}

function walk () {
 for (let key in data) {
  const dep = [];
  const val = data[key];
  Object.defineProperty(data, key, {
   set (newVal) {
    if (newVal === val) return;
    val = newVal;
    dep.forEach(fn => fn());
   },
   get () {
    // Target就是该变量的依赖函数
    dep.push(Target);
    return val;
   }
  })
 }
}

data: {
 a: {
  aa: 1
 }
}

function walk (data) {
 for (let key in data) {
  const dep = [];
  const val = data[key];
  // 如果val是对象，递归调用walk，将其属性转为访问器属性
  if (Object.prototype.toString.call(val) === '[object Object]') {
   walk(val);
  }

  Object.defineProperty(data, key, {
   set (newVal) {
    if (newVal === val) return;
    val = newVal;
    dep.forEach(fn => fn());
   },
   get () {
    // Target就是该变量的依赖函数
    dep.push(Target);
    return val;
   }
  })
 }
}

watch('a.aa', () => {
 console.log('修改了 a.b')
})

function watch (exp, fn) {
 // 将fn赋值给Target
 Target = fn;
 // 读取属性，触发get函数，收集依赖
 data[exp];
}

function watch (exp, fn) {
 // 将fn赋值给Target
 Target = fn;
 
 let obj = data;
 if (/\./.test(exp)) {
  const path = exp.split('.');
  path.forEach(p => obj = obj[p])

  return;
 }


 data[exp];
}

// 函数
vm.$watch(
 function () {
 // 表达式 `this.a + this.b` 每次得出一个不同的结果时
 // 处理函数都会被调用。
 // 这就像监听一个未被定义的计算属性
 return this.a + this.b
 },
 function (newVal, oldVal) {
 // 做点什么
 }
)

function watch (exp, fn) {
 // 将fn赋值给Target
 Target = fn;
 
 // 如果 exp 是函数，直接执行该函数
 if (typeof exp === 'function') {
  exp()
  return
 }

 let obj = data;
 if (/\./.test(exp)) {
  const path = exp.split('.');
  path.forEach(p => obj = obj[p])

  return;
 }


 data[exp];
}

// 创建以Array.prototype为原型的对象
const arrayMethods = Object.create(Array.prototype);
// 缓存Array.prototype
const originMethods = Array.prototype;

mutationMethods.forEach(method => {
 arrayMethods[method] = function (...args) {
  // 调用原来的方法获取结果
  const result = originMethods[method].apply(this, args);
  console.log(`重定义了${method}方法`)
  return result;
 }
})

const arr = [];
arr.__proto__ = arrayMethods;
arr.push(1);

const opts = vm.$options
...
if (opts.data) {
 initData(vm)
} else {
 observe(vm._data = {}, true /* asRootData */)
}

function initData (vm: Component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 "${key}" has already been defined as a data property.`,
   vm
  )
  }
 }
 if (props && hasOwn(props, key)) {
  process.env.NODE_ENV !== 'production' && warn(
  `The data property "${key}" is already declared as a prop. ` +
  `Use prop default value instead.`,
  vm
  )
 } else if (!isReserved(key)) {
  proxy(vm, `_data`, key)
 }
 }
 // observe data
 observe(data, true /* asRootData */)
}

let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 "htmlcode">

export function getData (data: Function, vm: Component): any {
 // #7573 disable dep collection when invoking data getters
 pushTarget()
 try {
 return data.call(vm, vm)
 } catch (e) {
 handleError(e, vm, `data()`)
 return {}
 } finally {
 popTarget()
 }
}



其实该函数就是通过调用data获取到数据对象并返回：data.call(vm, vm). 用try...catch包裹是为了捕获可能出现的错误，如果出错的话调用handleError函数并返回一个空对象。


函数的开头和结尾分别调用了pushTarget和popTarget, 这是为了防止使用 props 数据初始化 data 数据时收集冗余的依赖。


再回到initData函数中，所以现在data和vm._data就是最终的数据对象了。


接下来是一个if判断：




if (!isPlainObject(data)) {
 data = {}
 process.env.NODE_ENV !== 'production' && warn(
  'data functions should return an object:\n' +
  'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  vm
 )
 }



isPlainObject是判断是否是一个纯对象的，如果data不是一个对象，在非生产环境下给出警告信息。


继续往下看：




// proxy data on instance
// 获取data对象的键
const keys = Object.keys(data)
// 获取props，是个对象
const props = vm.$options.props
// 获取methods，是个对象
const methods = vm.$options.methods
let i = keys.length
// 循环遍历data的键
while (i--) {
 const key = keys[i]
 // 如果methods存在，并且methods中存在与data对象相同的键，发出警告。data优先
 if (process.env.NODE_ENV !== 'production') {
  if (methods && hasOwn(methods, key)) {
  warn(
   `Method "${key}" has already been defined as a data property.`,
   vm
  )
  }
 }
 // 如果props存在，并且props中存在与data对象相同的键，发出警告。 props优先
 if (props && hasOwn(props, key)) {
  process.env.NODE_ENV !== 'production' && warn(
  `The data property "${key}" is already declared as a prop. ` +
  `Use prop default value instead.`,
  vm
  )
 } else if (!isReserved(key)) { // isReserved 函数用来检测一个字符串是否以 $ 或者 _ 开头，主要用来判断一个字段的键名是否是保留的
  proxy(vm, `_data`, key)
 }
}
// observe data
observe(data, true /* asRootData */)



while中的两个if条件判断了props和methods中是否有和data对象相同的键，因为这三者中的属性都可以通过实例对象代理访问，如果相同就会出现冲突了。




const vm = new Vue({
 props: { a: { default: 2 } }
 data: { a: 1 },
 methods: {
  a () {
   console.log(3)
  }
 }
})



当调用vm.a的时候，就会产生覆盖现象。为了防止这种情况出现，就在这里做了判断。


再看else if中的内容，当!isReserved(key)成立时，执行proxy(vm,_data, key)。 isReserved函数的作用是判断一个字符串是否以 $ 或者 _ 开头, 因为Vue内部的变量是以$或_开头，防止冲突。如果 key 不是以 $或 _ 开头，那么将执行 proxy 函数




const sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
 sharedPropertyDefinition.get = function proxyGetter () {
 return this[sourceKey][key]
 }
 sharedPropertyDefinition.set = function proxySetter (val) {
 this[sourceKey][key] = val
 }
 Object.defineProperty(target, key, sharedPropertyDefinition)
}




proxy函数通过Object.defineProperty在实例对象vm上定义了与data数据字段相同的访问器属性，代理的值是vm._data上对应的属性值。当访问this.a时，实际访问的是this._data.a的值。


最后一句代码是




// observe data
observe(data, true /* asRootData */)



调用observe将data数据对象转换成响应式的。


observe工厂函数


observe函数定义在core/observer/index.js文件中, 我们找到该函数的定义，一点点来看




if (!isObject(value) || value instanceof VNode) {
 return
}



首先判断如果数据不是一个对象或者是一个VNode实例，直接返回。




let ob: Observer | void


接着定义了ob变量，它是一个Observer实例，可以看到observe函数的最后返回了ob.


下面是一个if...else分支：




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分支，用hasOwn判断了数据对象是否包含__ob__属性，并且判断属性值是否是Observer的实例。如果条件为真的话，就把value.__ob__的值赋给ob。


为什么会有这个判断呢？每个数据对象被观测后都会在该对象上定义一个__ob__属性, 所以这个判断是为了防止重复观测一个对象。


接着是else if分支，这个条件判断有点多，我们一个个来看。
shouldObserve必须为true


该变量也定义在 core/observer/index.js 文件内,


/**
 * In some cases we may want to disable observation inside a component's
 * update computation.
 */
export let shouldObserve: boolean = true

export function toggleObserving (value: boolean) {
 shouldObserve = value
}




这段代码定义了shouldObserve变量，初始化为true。接着定义了toggleObserving函数，该函数接收一个参数，这个参数用来更新shouldObserve的值。shouldObserve为true时可以进行观测，为false时将不会进行观测。
!isServerRendering()必须为true


isServerRendering函数用来判断是否是服务端渲染，只有当不是服务端渲染的时候才会进行观测

(Array.isArray(value) || isPlainObject(value)) 必须为真


只有当数据对象是数组或者纯对象时才进行观测


Object.isExtensible(value)必须为true


被观测的数据对象必须是可扩展的, 普通对象默认就是可扩展当。以下三个方法可以将对象变得不可扩展：
Object.preventExtensions()、 Object.freeze()、Object.seal()


!value._isVue必须为真


Vue实例含有_isVue属性，这个判断是为了防止Vue实例被观测
以上条件满足之后，就会执行代码ob = new Observer(value)，创建一个Observer实例


Observer 构造函数


Observer也定义在core/observer/index.js文件中，它是一个构造函数，用来将数据对象转换成响应式的。




export class Observer {
 value: any;
 dep: Dep;
 vmCount: number; // number of vms that have this object as root $data

 constructor (value: any) {
 this.value = value
 this.dep = new Dep()
 this.vmCount = 0
 def(value, '__ob__', this)
 if (Array.isArray(value)) {
  if (hasProto) {
  protoAugment(value, arrayMethods)
  } else {
  copyAugment(value, arrayMethods, arrayKeys)
  }
  this.observeArray(value)
 } else {
  this.walk(value)
 }
 }

 /**
 * Walk through all properties and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 */
 walk (obj: Object) {
 const keys = Object.keys(obj)
 for (let i = 0; i < keys.length; i++) {
  defineReactive(obj, keys[i])
 }
 }

 /**
 * Observe a list of Array items.
 */
 observeArray (items: Array<any>) {
 for (let i = 0, l = items.length; i < l; i++) {
  observe(items[i])
 }
 }
}




以上是Observer的全部代码，现在我们从constructor开始，来看一下实例化Observer都做了什么。
__ob__ 属性


constructor开始先初始化了几个实例属性




this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)


value就是实例化Observer时传递的参数，现在将它赋给了实例对象的value属性。dep属性指向实例化的Dep实例对象，它就是用来收集依赖的容器。vmCount属性被初始化为0.


接着使用def函数为数据对象添加了__ob__属性，它的值就是当前Observer实例对象。def定义在core/util/lang.js文件中，是对Object.defineProperty的封装。




export function def (obj: Object, key: string, val: any, enumerable"htmlcode">

data = {
 a: 1
}



添加__ob__属性后变成




data = {
 a: 1,
 __ob__: {
  value: data, // data 数据对象本身
  dep: new Dep(), // Dep实例
  vmCount: 0
 }
}



处理纯对象


接下来是一个if...else判断, 来区分数组和对象，因为对数组和对象的处理不同。




if (Array.isArray(value)) {
 if (hasProto) {
  protoAugment(value, arrayMethods)
 } else {
  copyAugment(value, arrayMethods, arrayKeys)
 }
 this.observeArray(value)
} else {
  this.walk(value)
}



我们先来看是对象的情况，也就是执行this.walk(value)


walk函数就定义在constructor的下面




walk (obj: Object) {
 const keys = Object.keys(obj)
 for (let i = 0; i < keys.length; i++) {
  defineReactive(obj, keys[i])
 }
}



该方法就是用for循环遍历了对象的属性，并对每个属性都调用了defineReactive方法。


defineReactive 函数


defineReactive也定义在core/observer/index.js文件中，找到它的定义：




/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
 obj: Object,
 key: string,
 val: any,
 customSetter"htmlcode">

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
 return
}



先通过Object.getOwnPropertyDescriptor获取字段的属性描述对象，再判断该字段是否是可配置的，如果不可配置，直接返回。因为不可配置的属性是不能通过Object.defineProperty改变其属性定义的。


再往下接着看：




// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
 val = obj[key]
}



先保存属性描述对象里面的get和set方法。如果这个属性已经是访问器属性了，那它就存在get或set方法了，下面的操作会使用Object.defineProperty重写get和set方法，为了不影响原来的读写操作，就先缓存setter/getter。


接下来是一个if判断，如果满足条件的话，就读取该属性的值。


再下面是这样一句代码：




let childOb = !shallow && observe(val)


因为属性值val也可能是一个对象，所以调用observe继续观测。但前面有一个条件，只有当shallow为假时才会进行深度观测。shallow是defineReactive的第五个参数，我们在walk中调用该函数时并没有传递该参数，所以这里它的值是undefined。!shallow的是true，所以这里会进行深度观测。


不进行深度观测的我们在initRender函数中见过：




defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
 !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
 !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)



在Vue实例上定义属性$attrs和$listeners时就是非深度观测。


在get中收集依赖


接下来就是使用Object.defineProperty设置访问器属性，先看一下get函数：




get: function reactiveGetter () {
 const value = getter "htmlcode">

if (Dep.target) {
 dep.depend()
 if (childOb) {
  childOb.dep.depend()
  if (Array.isArray(value)) {
   dependArray(value)
  }
 }
}



首先判断Dep.target是否存在，Dep.target就是要收集的依赖，如果存在的话，执行if语句块内的代码。


dep.depend()dep对象的depend方法执行就是收集依赖。


然后判断了childOb是否存在，存在的话执行childOb.dep.depend(). 那么childOb的值是谁呢？


如果我们有个数据对象：




data = {
 a: {
  b: 1
 }
}



经过observe观测之后，添加__ob__属性，变成如下模样：




data = {
 a: {
  b: 1,
  __ob__: { value, dep, vmCount }
 },
 __ob__: { value, dep, vmCount }
}



对于属性a来说，childOb === data.a.__ob__, 所以childOb.dep.depend()就是data.a.__ob__.dep.depend()


在if语句里面又一个if判断：




if (Array.isArray(value)) {
 dependArray(value)
}



如果属性值是数组，调用dependArray函数逐个触发数组元素的依赖收集


在set函数中触发依赖




set: function reactiveSetter (newVal) {
  const value = getter "htmlcode">

const value = getter "htmlcode">

NaN === NaN // false


如果newVal !== newVal,说明新值是NaN；如果value !== value，那么旧值也是NaN。那么新旧值也是相等的，也不需要处理。




/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
 customSetter()
}



在非生产环境下，如果customSetter函数存在，将执行该函数。customSetter是defineReactive的第四个参数，上面我们看initRender的时候有传过这个参数：




defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
  !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)



第四个参数是一个箭头函数，当修改vm.$attrs时，会打印警告信息$attrs是只读的。所以customSetter的作用就是打印辅助信息。




if (getter && !setter) return
if (setter) {
 setter.call(obj, newVal)
} else {
 val = newVal
}



如果存在getter不存在setter的话，直接返回。getter和setter就是属性自身的get和set函数。


下面就是设置属性值。如果setter存在的话，调用setter函数，保证原来的属性设置操作不变。否则用新值替换旧值。

最后是这两句代码：




childOb = !shallow && observe(newVal)
dep.notify()



如果新值也是一个数组或纯对象的话，这个新值是未观测的。所以在需要深度观测的情况下，要调用observe对新值进行观测。最后调用dep.notify()触发依赖。


处理数组


看完了纯对象的处理，再来看一下数组是怎么转换为响应式的。数组有些方法会改变数组本身，我们称之为变异方法，这些方法有：push pop shift unshift reverse sort splice，如何在调用这些方法的时候触发依赖呢？看一下Vue的处理。




if (hasProto) {
 protoAugment(value, arrayMethods)
} else {
 copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)



首先是一个if...else 判断，hasProto定义在core/util/env.js文件中。




// can we use __proto__"htmlcode">

/**
 * Augment a target Object or Array by intercepting
 * the prototype chain using __proto__
 */
function protoAugment (target, src: Object) {
 /* eslint-disable no-proto */
 target.__proto__ = src
 /* eslint-enable no-proto */
}



该方法的作用就是将数组实例的原型指向代理原型。这样当数组实例调用变异方法的时候就能先走代理原型重定义的方法。我们看一下arrayMethods的实现，它定义在core/observer/array.js文件中：




import { def } from '../util/index'

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

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

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
 // cache original method
 const original = arrayProto[method]
 def(arrayMethods, method, function mutator (...args) {
 const result = original.apply(this, args)
 const ob = this.__ob__
 let inserted
 switch (method) {
  case 'push':
  case 'unshift':
  inserted = args
  break
  case 'splice':
  inserted = args.slice(2)
  break
 }
 if (inserted) ob.observeArray(inserted)
 // notify change
 ob.dep.notify()
 return result
 })
})




这是这个文件的全部内容，该文件只做了一件事，就是导出arrayMethods对象。




const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)



arrayMethods是以数组的原型为原型创建的对象。




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



这是定义了数组的变异方法。


接着for循环遍历变异方法，用def在代理原型上定义了与变异方法同名的方法。




methodsToPatch.forEach(function (method) {
 // cache original method
 const original = arrayProto[method]
 def(arrayMethods, method, function mutator (...args) {
 const result = original.apply(this, args)
 const ob = this.__ob__
 let inserted
 switch (method) {
  case 'push':
  case 'unshift':
  inserted = args
  break
  case 'splice':
  inserted = args.slice(2)
  break
 }
 if (inserted) ob.observeArray(inserted)
 // notify change
 ob.dep.notify()
 return result
 })
})



首先缓存了数组原本的变异方法




const original = arrayProto[method]



然后用def在arrayMethods对象上定义了与变异方法同名的函数。函数内首先调用了original原来的函数获取结果




const result = original.apply(this, args)



并在函数末尾返回result。保证了拦截函数的功能与原来方法的功能是一致的。




const ob = this.__ob__
...
ob.dep.notify()



这两句代码就是触发依赖。当变异方法被调用时，数组本身就被改变了，所以要触发依赖。


再看其余的代码：




let inserted
switch (method) {
 case 'push':
 case 'unshift':
  inserted = args
  break
 case 'splice':
  inserted = args.slice(2)
  break
}
if (inserted) ob.observeArray(inserted)



这段代码的作用就是收集新添加的元素，将其变成响应式数据。


push和unshift方法的参数就是要添加的元素，所以inserted = args。splice方法从第三个参数到最后一个参数都是要添加的新元素，所以inserted = args.slice(2)。最后，如果存在新添加的元素，调用observeArray函数对其进行观测。


以上是支持__proto__属性的时候，那不支持的时候呢？调用copyAugment方法，并传递了三个参数。前两个跟protoAugment方法的参数一样，一个是数组实例本身，一个是arrayMethods代理原型，还有一个是arrayKeys，




const arrayKeys = Object.getOwnPropertyNames(arrayMethods)



它的值就是定义在arrayMethods对象上的所有的键，也就是所要拦截的变异方法的名称。函数定义如下：




function copyAugment (target: Object, src: Object, keys: Array<string>) {
 for (let i = 0, l = keys.length; i < l; i++) {
 const key = keys[i]
 def(target, key, src[key]) 
 }
}



这个方法的作用就是在数组实例上定义与变异方法同名的函数，从而实现拦截。


if else代码之后，调用了observeArray方法this.observeArray(value), 并将数组实例作为参数。


observeArray方法的定义如下：




/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
 for (let i = 0, l = items.length; i < l; i++) {
  observe(items[i])
 }
}



循环遍历数组实例，并对数组的每一项再进行观测。这是因为如果数组元素是数组或纯对象的话不进行这一步数组元素就不是响应式的，这是为了实现深度观测。比如：




const vm = new Vue({
 data: {
  a: [[1,2]]
 }
})
vm.a.push(1); // 能够触发响应
vm.a[1].push(1); // 不能触发响应



所以需要递归观测数组元素。


Vue.set($set) 和 Vue.delete($delete) 的实现


我们知道，为对象或数组直接添加或删除元素Vue是拦截不到的。我们需要使用Vue.set、Vue.delete去解决，Vue还在实例对象上定义了$set $delete方便我们使用。其实不管是实例方法还是全局方法它们的指向都是一样的。我们来看以下它们的定义。


$set $delete定义在core/instance/state.js文件中的stateMixin方法中




export function stateMixin (Vue: Class<Component>) {
 ...

 Vue.prototype.$set = set
 Vue.prototype.$delete = del

 ...
}




Vue.set和Vue.delete定义在core/global-api/index.js文件中的initGlobalAPI函数中：




export function initGlobalAPI (Vue: GlobalAPI) {
 ...

 Vue.set = set
 Vue.delete = del

 ...
}




可以看到它们的函数值是相同的。 set和del定义在core/observer/index.js文件中。我们先来看一下set的定义


set


从上到下来看set的函数体，显示这个if判断：




if (process.env.NODE_ENV !== 'production' &&
 (isUndef(target) || isPrimitive(target))
) {
 warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}



isUndef


export function isUndef (v: any): boolean %checks {
 return v === undefined || v === null
}




判断变量是否是未定义，或者值为null。
isPrimitive


export function isPrimitive (value: any): boolean %checks {
 return (
 typeof value === 'string' ||
 typeof value === 'number' ||
 // $flow-disable-line
 typeof value === 'symbol' ||
 typeof value === 'boolean'
 )
}




判断变量是否是原始类型。


所以这个if语句的作用就是，如果target是undefined或者null或者它的类型是原始类型，在非生产环境下打印警告信息。

再看下一个if语句：




if (Array.isArray(target) && isValidArrayIndex(key)) {
 target.length = Math.max(target.length, key)
 target.splice(key, 1, val)
 return val
}



isValidArrayIndex


export function isValidArrayIndex (val: any): boolean {
 const n = parseFloat(String(val))
 return n >= 0 && Math.floor(n) === n && isFinite(val)
}




判断变量是否是有效的数组索引。


如果target是一个数组，并且key是一个有效的数组索引，就执行if语句块内的代码


我们知道splice变异方法是可以触发响应的，target.splice(key, 1, val) 就利用了替换元素的能力，将指定位置元素的值替换为新值。所以数组就是利用splice添加元素的。另外，当要设置的元素的索引大于数组长度时 splice 无效，所以target的length取两者中的最大值。




if (key in target && !(key in Object.prototype)) {
 target[key] = val
 return val
}



这个if条件的意思是该属性已经在target对象上有定义了，那么只要重新设置它的值就行了。因为在纯对象中，已经存在的属性就是响应式的了。




const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
 process.env.NODE_ENV !== 'production' && warn(
  'Avoid adding reactive properties to a Vue instance or its root $data ' +
  'at runtime - declare it upfront in the data option.'
 )
 return val
}



target._isVue

拥有_isVue属性说明这是一个Vue实例‘


(ob && ob.vmCount)

ob就是target.__ob__，ob.vmCount也就是target.__ob__.vmCount。来看一下这段代码：


export function observe (value: any, asRootData: "htmlcode">

function initData (vm: Component) {
 ...

 // observe data
 observe(data, true /* asRootData */)
}




在initData中调用observe的时候传递了第二个参数为true，那根数据对象也就是data。也就是说当使用 Vue.set/$set 函数为根数据对象添加属性时，是不被允许的。


所以当target是Vue实例或者是根数据对象时，在非生产环境会打印警告信息。




if (!ob) {
  target[key] = val
  return val
}



当!ob为true时，说明不存在__ob__属性，那target也就不是响应式的，直接变更属性值就行。




defineReactive(ob.value, key, val)
ob.dep.notify()



这里就是给对象添加新的属性，并保证新添加的属性是响应式的。
ob.dep.notify()触发响应。


del


看完了set，再来看delete操作。




if (process.env.NODE_ENV !== 'production' &&
  (isUndef(target) || isPrimitive(target))
 ) {
  warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}



这个if判断跟set函数的一样。如果target是undefined、null或者原始类型值，在非生产环境下打印警告信息。




if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.splice(key, 1)
  return
}



当target是数组类型并且key是有效的数组索引值时，也是使用splice来进行删除操作，因为该变异方法可以触发拦截操作。




const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== 'production' && warn(
   'Avoid deleting properties on a Vue instance or its root $data ' +
   '- just set it to null.'
  )
  return
}



这一段if判断也是一样的，如果target是Vue实例或者是根数据对象，在非生产环境下打印警告信息。也就是不能删除Vue实例对象的属性，也不能删除根数据对象的属性，因为data本身不是响应式的。




if (!hasOwn(target, key)) {
  return
}



如果target对象上没有key属性，直接返回。




delete target[key]


进行到这里就说明target是一个纯对象，并且有key属性，直接删除该属性。




if (!ob) {
  return
}



如果ob对象不存在，说明target不是响应式的，直接返回。




ob.dep.notify()



如果ob对象存在，说明target是响应式的，触发响应。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：使用vue2.6实现抖音【时间轮盘】屏保效果附源码
            
下一篇：详解微信小程序文件下载--视频和图片