Vue3初探响应式原理|原理篇

const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue

// 鼠标位置侦听 
function useMouse() {
      // 数据响应化
      const state = reactive({ x: 0, y: 0 })

      const update = e => {
            state.x = e.pageX
            state.y = e.pageY 
      }
      onMounted(() => { 
              window.addEventListener('mousemove', update)
      })

      onUnmounted(() => {
         window.removeEventListener('mousemove', update) 
      })

     // 转换所有key为响应式数据
    return toRefs(state)
}

// 事件监测
function useTime() {
    const state = reactive({ time: new Date() })
    onMounted(() => {
          setInterval(() => { state.time = new Date()
     }, 1000) })
    return toRefs(state)
}

// 逻辑组合
const MyComp = {
      template: `
      <div>x: {{ x }} y: {{ y }}</div> <p>time: {{time}}</p>
      `, setup() {
      // 使用鼠标逻辑
      const { x, y } = useMouse() // 使用时间逻辑
      const { time } = useTime() // 返回使用
      return { x, y, time }
   } 
}
createApp().mount(MyComp, '#app')

// 1.对象响应化:遍历每个key，定义getter、setter
// 2.数组响应化:覆盖数组原型方法，额外增加通知逻辑 
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)

;['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
    arrayProto[method] = function() {
       originalProto[method].apply(this, arguments)
      notifyUpdate()
    }
} )

function observe(obj) {
  if (typeof obj !== 'object' || obj == null) {
return
}
// 增加数组类型判断，若是数组则覆盖其原型 
if (Array.isArray(obj)) {
    Object.setPrototypeOf(obj, arrayProto) 
} else {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      defineReactive(obj, key, obj[key])
    }
  } 
}

function defineReactive(obj, key, val) { 
   observe(val) // 解决嵌套对象问题
   Object.defineProperty(obj, key, { 
     get() {
        return val 
    },
    set(newVal) {
      if (newVal !== val) {
         observe(newVal) // 新值是对象的情况 val = newVal
         notifyUpdate()
      } 
   }
}) 
}

function notifyUpdate() { 
    console.log('页面更新!')
}

function reactive(obj) {
  if (typeof obj !== 'object' && obj != null) {
      return obj 
}

// Proxy相当于在对象外层加拦截
// http://es6.ruanyifeng.com/#docs/proxy 
const observed = new Proxy(obj, {
   get(target, key, receiver) {
   // Reflect用于执行对象默认操作，更规范、更友好
   // Proxy和Object的方法Reflect都有对应
   // http://es6.ruanyifeng.com/#docs/reflect 
    const res = Reflect.get(target, key, receiver) console.log(`获取${key}:${res}`)
      return res
    },
    set(target, key, value, receiver) {
      const res = Reflect.set(target, key, value, receiver) console.log(`设置${key}:${value}`)
      return res
    },
    deleteProperty(target, key) {
      const res = Reflect.deleteProperty(target, key) 
      console.log(`删除${key}:${res}`)
      return res
   } 
  })
  return observed
}