[学习交流] 【上海校区】Vue3 响应式原理 reactive_Proxy

本帖最后由没名字i 于 2019-11-22 10:32 编辑

Test

[HTML] 纯文本查看 复制代码

<!-- # new packages\vue\index.html -->
  <div id="app"></div>
  
  <!-- 引入 vue.global.js -->
  <script src="./dist/vue.global.js"></script>
  <script>
    // reactive 响应式
    const { createApp, reactive, computed, effect } = Vue
    // 组件定义
    const XnComponent = {
      template: `
        <button @click="increment">Count is {{ state.count }}, double is {{ state.double }}</button>
      `,
      // 数据处理
      setup(){
        const state = reactive({
          count: 0,
          double: computed(() => state.count * 2)
        })
        function increment(){
          state.count++
        }
        effect(() => {
          // 副作用
          console.log('数字修改了', state.count)
        })
        return {
          state,
          increment,
        }
      },
    }
    // 创建app 挂载组件 XnComponent 到 #app
    createApp().mount(XnComponent, '#app')
  </script>

Vue3 响应式原理 Proxy
test Proxy: MDN

监听(代理)数组报错(Reflect处理)/ 二次触发和多次触发 get/set 问题

代理对象对象嵌套问题, 不会触发深层次的 set 问题

[JavaScript] 纯文本查看 复制代码

///new Proxy(obj, handler)

// Object 类型
// let obj = {name: 'xn213'}
let obj = {name: 'xn213', location: {city: '北京'}}

// Array 类型
// let obj = [1, 2, 3]
let xn = new Proxy(obj, {
  get(target, key){
    console.log('获取值:', key)
    // return target[key]
    return Reflect.get(target, key, )
  },
  set(target, key, val){
    console.log('修改值:', key, val)
    // target[key] = val
    // return true // 这里return true 可简单解决数组报错的问题
    return Reflect.set(target, key, val)
  }
})
// 对象
// xn.name = 'xn2113'
// console.log(xn.name) // xn2113

// 1. 对象嵌套不触发

// 修改 location 的 city 不会触发city set(){}
// // 获取值: location
// // 获取值: location
// // 杭州
xn.location.city = '杭州'
console.log(o.location.city) // 杭州

// 2. 数组多次触发

// xn.push(4)
/** push从后面添加, 会触发两次
* 获取值 push
* 获取值 length
* 修改值 3 4
* 修改值 length 4
*/

// xn.unshift(4)
/** unshift 从前面添加, 就会触发不止两次
* 获取值 unshift
* 获取值 length
* 获取值 2
* 修改值 3 3
* 获取值 1
* 修改值 2 2
* 获取值 0
* 修改值 1 1
* 修改值 0 4
* 修改值 length 4
*/
手写 reactive()
// 设置两个缓存旧查新新查旧

[JavaScript] 纯文本查看 复制代码

let toProxy = new WeakMap() // 根据原始数据查询响应后的数据
let toRaw = new WeakMap() // 根据响应后的数据查询原始数据

// 定义 handler对象 > baseHandler
const baseHandler = {
  set(target, key){
    // 收集依赖 后返回数据
    track(target, key)
  },
  set(target, key, val){
    // 触发更新 后返回数据
    trigger(target, key, info)
  }
}

// 定义 reactive
function reactive(target){
  // 查询缓存
  ...
  // 响应式
  observed = new Proxy(target, baseHandler)
  // 设置缓存
  ...
  // 返回(观测到的)响应后的对象
  return observed
}

[JavaScript] 纯文本查看 复制代码

// 收集依赖
function track(target, key){}

// 触发更新
function trigger(target, key, info){}
复制代码↓
function effect(fn, options={}){}
复制代码↓
function createReactiveEffect(fn, options){}
复制代码↓
function computed(fn){}
复制代码simple little demo 完整: xn-vue3.js
demo.html
  <div id="app"></div>
  <button id="btn">点我, 又长大了...</button>
  <script src="./xn-vue3.js"></script>
  <script>
    const root = document.querySelector('#app')
    const btn = document.querySelector('#btn')

    const obj = reactive({
      name: '本猿',
      age: '213'
    })
    
    let double = computed(() => obj.age * 2)
    
    effect(() => {
      root.innerHTML = `
        <h1>${obj.name}今年${obj.age}岁了, 乘以2是${double.value}</h1>
      `
    })
    
    btn.addEventListener('click', () => {
      obj.age++
    }, false)
  </script>
复制代码xn-vue3.js
// 设置两个缓存
let toProxy = new WeakMap() // 根据原始数据查询响应后的数据
let toRaw = new WeakMap() // 根据响应后的数据查询原始数据

const isObject = val => val !== null && typeof val === 'object'

// handler 对象，其属性是当执行一个操作时定义代理的行为的函数
const baseHandler = {
  get(target, key){
    const res = Reflect.get(target, key)
    // 收集依赖
    track(target, key)
    // 递归查找
    // 这里暂作简单判断, 可以严谨用isObject 工具
    // return typeof res == 'object' ? reactive(res) : res
    return isObject(res) ? reactive(res) : res
  },
  set(target, key, val){
    const info = {oldValue: target[key], newValue: val}
    const res = Reflect.set(target, key, val)
    // 触发更新
    trigger(target, key, info)
    return res
  }
}

function reactive(target){
  // 查询缓存
  let observed = toProxy.get(target)
  if(observed){
    return observed
  }
  if(toRaw.get(target)){
    return target
  }
  // 响应式
  observed = new Proxy(target, baseHandler)
  // 设置缓存
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  return observed
}

let effectStack = []
let targetMap = new WeakMap() // 存储 effect

// {
//   target: {
//     age: [] (set),
//     name: [effect]
//   }
// }

function trigger(target, key, info){
  // 触发更新
  const depsMap = targetMap.get(target)

  if(depsMap === undefined){
    return
  }
  const effects = new Set()
  const computedRunners = new Set()
  if(key){
    let deps = depsMap.get(key)
    deps.forEach(effect => {
      if(effect.computed){
        computedRunners.add(effect)
      }else{
        effects.add(effect)
      }
    })
  }
  // const run = effect => effect()
  effects.forEach(effect => effect())
  computedRunners.forEach(effect => effect())
}

function track(target, key){
  let effect = effectStack[effectStack.length - 1]
  if(effect){
    let depsMap = targetMap.get(target)
    if(depsMap === undefined){
      depsMap = new Map()
      targetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if(dep === undefined){
      dep = new Set()
      depsMap.set(key, dep)
    }
    if(!dep.has(effect)){
      dep.add(effect)
      effect.deps.push(dep)
    }
  }
}

function effect(fn, options={}){
  let e = createReactiveEffect(fn, options)
  // 没有考虑 computed
  e()
  return e
}

// 高阶函数
function createReactiveEffect(fn, options){
  const effect = function effect(...args){
    return run(effect, fn, args)
  }
  effect.deps = []
  effect.computed = options.computed
  effect.lazy = options.lazy
  return effect
}

function run(effect, fn, args){
  if(effectStack.indexOf(effect) === -1){
    try {
      effectStack.push(effect)
      return fn(...args)
    }
    finally {
      effectStack.pop() // 清空
    }
  }
}

function computed(fn){
  // 首次不运行computed
  const runner = effect(fn, {computed: true, lazy: true})
  return {
    effect: runner,
    get value(){
      return runner()
    }
  }
}

链接：https://juejin.im/post/5dd5bfc1f265da47cb0e6b81

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】Vue3 响应式原理 reactive_Proxy

0 个回复