手抄Vue（七）—— 无题

学习Vue的笔记已经写到了第七篇，但其实直到现在我都一直是在浏览器控制台里写代码和测试的，因为原先只是想稍微了解一下原理记记笔记，但后来了解得越多愈发觉得自己知道的越少，深深感受到了自己学识的疏浅和视野的狭隘。所以想把前面写的整理一下，并在此基础上争取多写一些。

我在本地建了一个项目，把已经有的思路重新写了一遍，大体上还和之前差不多，只是在一些方法的实现和变量的命名上可能会有微小的差异。

项目暂时是这样：

structure.png

core/index.js

import {observe, myWatch} from './observer'
import set from './set'

let data = {
  name: 'James Harden',
  team: 'Houston Rockets',
  teammate: {
    name: 'chris paul',
    team: {
      now: 'rockets',
      before: 'clippers'
    }
  },
  stars: ['kobe', 'jordan', 'wade']
}

function render() {
  document.body.innerText = `The last season's MVP is ${data.name}, he's from ${data.team}, he has a teammate ${data.teammate.name}, ${data.teammate.name} was played for ${data.teammate.team.before}, he is ${data.age} this year`
}

observe(data)

set(data, 'age', 40)

myWatch(render, render)

core/observer.js

import { isPlainObj } from '../shared/util'

class Observer {
  constructor (value) {
    if (Array.isArray(value)) { // 数组
      value.__proto__ = arrayMethods
      this.observeArray(value)
    } else { // 对象
      this.walk(value)
    }
  }

  walk (obj) { // 逐一观察对象中的属性
    const keys = Object.keys(obj)
    keys.forEach((key) => {
      defineReactive(obj, key)
    })
  }

  observeArray (arr) { // 深度观测数组
    arr.forEach(item => {
      observe(item)
    })
  }
}

// 收集依赖的篮子
let basket

// 将某一属性定义为响应式属性
export function defineReactive (obj, key, val) {
  const deps = []

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && !property.configurable) { // 如果指定的属性不在该对象上 会返回undefined
    return
  }

  const getter = property && property.get // 缓存原来的getter和setter
  const setter = property && property.set

  let value = obj[key]
  if (arguments.length === 3) {
    value = val
  }
  observe(value) // 实现深度观测

  Object.defineProperty(obj, key, {
    get () {
      if (getter) {
        value = getter.call(obj)
      }
      deps.push(basket)
      return value
    },
    set (newVal) {
      if (getter) {
        value = getter.call(obj)
      }
      if (newVal === value || (newVal !== newVal && value !== value)) { // 新旧值相等的话什么也不做
        return
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        value = newVal
      }
      observe(newVal) // 新值可能是对象 继续观察新值
      deps.forEach((fn) => {
        fn()
      })
    }
  })
}

// 观察某一对象 将它转为响应式的
export function observe (target) {
  if (Array.isArray(target) || isPlainObj(target)) {
    return new Observer(target)
  }
}

// 要代理的变异方法集合
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    arrayProto[method].apply(this, args)
    console.log(`我捕获了数组的${method}方法`)
  }
})

export function myWatch (exp, depFn) {
  basket = depFn
  if (typeof exp === 'function') {
    exp()
    return
  }
  if (/\./.test(exp)) {
    let helpData = data
    exp.split('.').forEach((path) => {
      helpData = helpData[path]
    })
    return
  }
  data[exp]
}

core/set.js

import { isUndef, isPrimitive, isValidArrayIndex } from '../shared/util'
import { defineReactive } from './observer'

export default function set (target, key, val) {
  if (isUndef(target)) {
    console.error('不能给 undefined 和 null 设置响应式属性！')
    return
  }
  if (isPrimitive(target)) {
    console.error('不能给原始类型的值设置响应式属性！')
    return
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return
  }
  defineReactive(target, key, val)
  return val
}

core/delete.js

import { isValidArrayIndex, hasOwn } from '../shared/util'

export default function del (obj, key) {
  if (Array.isArray(obj) && isValidArrayIndex(key)) {
    obj.splice(key, 1)
    return
  }
  if (!hasOwn(obj, key)) {
    return
  }
  delete obj[key]
  // TODO 删除完属性之后触发依赖
}

shared/util.js

// 判断是否为纯对象
export function isPlainObj (value) {
  return Object.prototype.toString.call(value) === '[object Object]'
}

// 判断是否为undefined或null
export function isUndef (value) {
  return value === undefined || value === null
}

// 是否为原始值
export function isPrimitive (value) {
  return ['string', 'number', 'boolean', 'symbol'].indexOf(typeof value) !== -1
}

// 是否为有效的数组索引 >=0 有限值 整数
export function isValidArrayIndex (value) {
  return value >= 0 && isFinite(value) && Math.floor(value) == value
}

// 判断是否为对象自身属性
export function hasOwn (obj, key) {
  return Object.prototype.hasOwnProperty.call(obj, key)
}