【vue.js 3.0】之响应式系统原理

最新推荐文章于 2024-06-19 10:30:15 发布
最新推荐文章于 2024-06-19 10:30:15 发布
阅读量106 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37883657/article/details/115100748
版权

介绍

  • proxy 对象实现属性监听
  • 多层属性嵌套，在访问属性过程中处理下一级属性
  • 默认监听动态添加的属性
  • 默认监听属性的删除操作
  • 默认监听数组索引和 length 属性
  • 可以作为单独的模块使用

核心方法 

  • reactive / ref / toRefs / computed 
  • effect
  • track
  • trigger

 proxy 对象：实现属性监听

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    'use strict'
    // 问题1： set 和 deleteProperty 中需要返回布尔类型的值
    //        在严格模式下，如果返回 false 的话会出现 Type Error 的异常
    // const target = {
    //   foo: 'xxx',
    //   bar: 'yyy'
    // }
    // // Reflect.getPrototypeOf()
    // // Object.getPrototypeOf()
    // const proxy = new Proxy(target, {
    //   get (target, key, receiver) {
    //     // return target[key]
    //     return Reflect.get(target, key, receiver)
    //   },
    //   set (target, key, value, receiver) {
    //     // target[key] = value
    //     return Reflect.set(target, key, value, receiver)
    //   },
    //   deleteProperty (target, key) {
    //     // delete target[key]
    //     return Reflect.deleteProperty(target, key)
    //   }
    // })

    // proxy.foo = 'zzz'
    // // delete proxy.foo


    // 问题2：Proxy 和 Reflect 中使用的 receiver

    // Proxy 中 receiver：Proxy 或者继承 Proxy 的对象
    // Reflect 中 receiver：如果 target 对象中设置了 getter，getter 中的 this 指向 receiver

    const obj = {
      get foo() {
        console.log(this)
        return this.bar
      }
    }

    const proxy = new Proxy(obj, {
      get (target, key, receiver) {
        if (key === 'bar') { 
          return 'value - bar' 
        }
        return Reflect.get(target, key, receiver)
      }
    })
    console.log(proxy.foo)
  </script>
</body>
</html>

 reactive

  • 接受一个参数，判断这参数是否是对象
  • 创建拦截器对象 handle，设置 get / set / deleteProperty
  • 返回 Proxy 对象 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { reactive } from './reactivity/index.js'
    const obj = reactive({
      name: 'zs',
      age: 18
    })
    obj.name = 'lisi'
    delete obj.age
    console.log(obj)
  </script>
</body>
</html>
// index.js

const isObject = val => val !== null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty.call(target, key)

export function reactive (target) {
  if (!isObject(target)) return target

  const handler = {
    get (target, key, receiver) {
      // 收集依赖
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      return convert(result)
    },
    set (target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      let result = true
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // 触发更新
        trigger(target, key)
      }
      return result
    },
    deleteProperty (target, key) {
      const hadKey = hasOwn(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        // 触发更新
        trigger(target, key)
      }
      return result
    }
  }

  return new Proxy(target, handler)
}

effect && track： 收集依赖 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { reactive, effect } from './reactivity/index.js'

    const product = reactive({
      name: 'iPhone',
      price: 5000,
      count: 3
    })
    let total = 0 
    effect(() => {
      total = product.price * product.count
    })
    console.log(total)

    product.price = 4000
    console.log(total)

    product.count = 1
    console.log(total)

  </script>
</body>
</html>

 

const isObject = val => val !== null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty.call(target, key)

export function reactive (target) {
  if (!isObject(target)) return target

  const handler = {
    get (target, key, receiver) {
      // 收集依赖
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      return convert(result)
    },
    set (target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      let result = true
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // 触发更新
        trigger(target, key)
      }
      return result
    },
    deleteProperty (target, key) {
      const hadKey = hasOwn(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        // 触发更新
        trigger(target, key)
      }
      return result
    }
  }

  return new Proxy(target, handler)
}

let activeEffect = null
export function effect (callback) {
  activeEffect = callback
  callback() // 访问响应式对象属性，去收集依赖
  activeEffect = null
}

let targetMap = new WeakMap()

export function track (target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(activeEffect)
}

 

trigger 

export function trigger (target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => {
      effect()
    })
  }
}

ref

  • 参数接收原始值和对象 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { reactive, effect, ref } from './reactivity/index.js'

    const price = ref(5000)
    const count = ref(3)
   
    let total = 0 
    effect(() => {
      total = price.value * count.value
    })
    console.log(total)

    price.value = 4000
    console.log(total)

    count.value = 1
    console.log(total)

  </script>
</body>
</html>
export function ref (raw) {
  // 判断 raw 是否是ref 创建的对象，如果是的话直接返回
  if (isObject(raw) && raw.__v_isRef) {
    return
  }
  let value = convert(raw)
  const r = {
    __v_isRef: true,
    get value () {
      track(r, 'value')
      return value
    },
    set value (newValue) {
      if (newValue !== value) {
        raw = newValue
        value = convert(raw)
        trigger(r, 'value')
      }
    }
  }
  return r
}

reactive vs ref

  • ref 可以把基本数据类型数据，转成响应式对象
  • ref 返回的对象，重新赋值成对象也是响应式的
  • reactive 返回的对象，重新赋值丢失响应式
  • reactive 返回的对象不可以解构
  • 如果参数成员多的话，用 reactive ;如果只有一个参数成员，用 ref

toRefs ：接收一个 reactive 返回的对象，即一个 proxy 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { reactive, effect, toRefs } from './reactivity/index.js'

    function useProduct () {
      const product = reactive({
        name: 'iPhone',
        price: 5000,
        count: 3
      })
      
      return toRefs(product)
    }

    const { price, count } = useProduct()


    let total = 0 
    effect(() => {
      total = price.value * count.value
    })
    console.log(total)

    price.value = 4000
    console.log(total)

    count.value = 1
    console.log(total)

  </script>
</body>
</html>
export function toRefs (proxy) {
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}

  for (const key in proxy) {
    ret[key] = toProxyRef(proxy, key)
  }

  return ret
}

computed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { reactive, effect, computed } from './reactivity/index.js'

    const product = reactive({
      name: 'iPhone',
      price: 5000,
      count: 3
    })
    let total = computed(() => {
      return product.price * product.count
    })
   
    console.log(total.value)

    product.price = 4000
    console.log(total.value)

    product.count = 1
    console.log(total.value)

  </script>
</body>
</html>

 

export function computed (getter) {
  const result = ref()

  effect(() => (result.value = getter()))

  return result
}

完整代码

 

const isObject = val => val !== null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty.call(target, key)

export function reactive (target) {
  if (!isObject(target)) return target

  const handler = {
    get (target, key, receiver) {
      // 收集依赖
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      return convert(result)
    },
    set (target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      let result = true
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // 触发更新
        trigger(target, key)
      }
      return result
    },
    deleteProperty (target, key) {
      const hadKey = hasOwn(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        // 触发更新
        trigger(target, key)
      }
      return result
    }
  }

  return new Proxy(target, handler)
}

let activeEffect = null
export function effect (callback) {
  activeEffect = callback
  callback() // 访问响应式对象属性，去收集依赖
  activeEffect = null
}

let targetMap = new WeakMap()

export function track (target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(activeEffect)
}

export function trigger (target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => {
      effect()
    })
  }
}

export function ref (raw) {
  // 判断 raw 是否是ref 创建的对象，如果是的话直接返回
  if (isObject(raw) && raw.__v_isRef) {
    return
  }
  let value = convert(raw)
  const r = {
    __v_isRef: true,
    get value () {
      track(r, 'value')
      return value
    },
    set value (newValue) {
      if (newValue !== value) {
        raw = newValue
        value = convert(raw)
        trigger(r, 'value')
      }
    }
  }
  return r
}

export function toRefs (proxy) {
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}

  for (const key in proxy) {
    ret[key] = toProxyRef(proxy, key)
  }

  return ret
}

function toProxyRef (proxy, key) {
  const r = {
    __v_isRef: true,
    get value () {
      return proxy[key]
    },
    set value (newValue) {
      proxy[key] = newValue
    }
  }
  return r
}

export function computed (getter) {
  const result = ref()

  effect(() => (result.value = getter()))

  return result
}

 

Daisy__yangyang
关注
专栏目录
Vue.js 3.0 响应式系统的实现原理？
liuhao9999的博客
03-22 168
1. reactive 设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。创建拦截器handerler，设置get/set/deleteproperty。 get 收集依赖（track）； 如果当前 key 的值是对象，则为当前 key 的对 象创建拦截器 handler, 设置 get/set/deleteProperty； 如果当前的 key 的值不是对象，则返回当前 key 的值。 set 设置的新值和老值不相等
vue3setup语法糖下父子组件传值
柑橘乌云_
03-01 220
【代码】vue3setup语法糖下父子组件传值。
学习Vue3 第七章（认识Reactive全家桶）
热门推荐
qq1195566313的博客
02-04 2万+
reactive 用来绑定复杂的数据类型 例如 对象 数组 reactive 源码约束了我们的类型 他是不可以绑定普通的数据类型这样是不允许 会给我们报错 import { reactive} from 'vue' let person = reactive('sad') 绑定普通的数据类型 我们可以 使用昨天讲到ref 你如果用ref去绑定对象 或者 数组 等复杂的数据类型 我们看源码里面其实也是 去调用reactive 使用reactive 去修改值无须.value .
vue 3.0 reactive等api详解
秋来九月八
04-11 1042
文章目录ReactiveFlags reactive标记的类型介绍reactivereadonlyisProxyisReactiveisReadonlytoRawmarkRawshallowReactiveshallowReadonly ReactiveFlags reactive标记的类型介绍 这些是在 vue/reactivity 文件中定义的一个枚举对象，你通过CDN 引用的 Vue源码中是没有这部分代码的,你可以把他们理解为标记。 export const enum ReactiveFlags
3分钟带你深入浅出了解Vue.js 3.0的响应式系统原理
前端高薪进击手记
07-30 728
所以通过这种结构，我们可以存储目标对象，目标对象的的属性，以及属性对一个的Effect函数。从上面的Proxy对象的创建我们可以看到，创建时除了要被代理的目标对象以外，我们还需要传递第二个参数，它是一个对象，我们可以叫做处理器或者监听器。Proxy或者继承Proxy的对象，它是当前创建的proxy对象或者继承自当前proxy的子对象。，在这里代表的是当前的Proxy对象或者继承Proxy的对象。Vue.js3.0中的源码也是使用的这种方式来操作对象的成员的。，方法的作用是一样的，只是表达语义的问题。....
前端工程化：基于Vue.js 3.0的设计与实践
最新发布
努力是为了站在万人之中，成为别人的光
06-19 1万+
前端工程化是现代Web开发的重要趋势，旨在通过标准化、模块化和自动化的手段，提高开发效率、代码质量和项目可维护性。Vue.js 3.0，作为一款现代的前端框架，以其性能优异、易用性强和灵活性高的特点，成为前端工程化实践中的重要工具。本文将探讨基于Vue.js 3.0的前端工程化设计与实践，涵盖项目结构、组件化开发、状态管理、性能优化、自动化测试和持续集成等方面。
Vue.js3.0
溪
06-22 1369
提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。setup() {},template:// 或者插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。换言之：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。​可用于登录验证。
Vue.js 3.0响应式系统原理
weixin_38255079的博客
05-06 95
Vue.js 3.0响应式系统原理 Vue.js 响应式回顾 Proxy 对象实现属性监听 多层属性嵌套，在访问属性过程中处理下一级属性 默认监听动态添加的属性 默认监听属性的删除操作 默认监听数组索引和length 属性 可以作为单独的模块使用 核心方法 ref | toRefs | reactive | computed effect track trigger Proxy 对象回顾 如果 target 中设置了getter, getter中的this指向 receive
Vue.js 3.0 响应式系统的实现原理
qq_35469739的博客
09-23 577
Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的： 1、reactive: 接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理 创建拦截器对象 handler, 设置 get/set/deleteProperty get 收集依赖（track） 返回当前 key 的值。 如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty 如果当前的 key 的值不是
Vue.js 框架源码与进阶 - Vue.js 3.0 介绍
每天进步一点点
08-09 1550
相对于 Options API 这样做的好处：查看某个逻辑时只需关注具体的函数即可，当前的逻辑代码都封装在函数内部，不像 Options API 时获取鼠标位置的逻辑代码分散在不同的位置，查看这部分代码还需要上下拖动滚动条。在性能方面 Vue.js 3.x 又大幅度提升，使用代理对象 Proxy 重写了响应式的代码并且对编译器做了优化，重写了虚拟 DOM，从而让渲染和 Update 的性能都有了大幅度的提升。Vue 3.x 在构建时与 Vue 2.x 类似都构建了不同的版本。......
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
- **Ref和Reactivity**：Vue 3的响应式系统基于Proxy，使用ref和reactive函数创建响应式对象，简化了数据绑定和响应式追踪。 - **Suspense**：Suspense组件用于处理异步组件加载，提供了一种优雅的方式来处理组件...
Vue.js3.0核心源码解析
11-12
总的来说，Vue.js 3.0的核心源码解析涵盖了Vue3.0的全新设计理念，包括Composition API、TypeScript的使用、Proxy驱动的响应式系统、模板语法的增强以及性能优化等多个方面。通过深入学习这些内容，开发者能够更好地...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue.js 3.0 是一款流行的...总之，掌握Vue.js 3.0 API的关键在于理解并熟练运用Composition API、响应式系统以及新的生命周期和组件特性。这份中文文档和相关资源将为开发者提供全面的学习路径，加速掌握Vue 3的精髓。
将打包好的vue项目部署到nginx上
weixin_37883657的博客
07-20 1900
目录 1、安装 nginx （我的虚拟机系统是 centos7） 2、配置 nginx 3、nginx 其他命令 准备环境： 购买一个虚拟服务器：https://www.ucloud.cn/site/active/lagou.html； 准备好一个vue项目：我的项目资源（https://gitee.com/daisy_yangyang/fed-e-task-04-02） 在虚拟机上安装 nginx 1、安装 nginx （我的虚拟机系统是 centos7） （1）下载本地下...
Hash 和 History 模式
weixin_37883657的博客
04-08 1497
Hash和History模式的区别 首先需要强调的是不管哪种模式都是客户端路由的实现方式，也就是当路径放生变化之后不会向服务器发送请求，是用js监视路径的变化的变化，然后根据不同的地址渲染不同的内容如果需要服务端内容的话，需要使用Ajax发送请求。 表现形式的区别 -Hash模式 https://music.136.com/#/user?id=10029这种模式的地址中带有#号，#号后面就是路由地址可以使用？携带路由参数，官方文档中说这种模式很丑，路径中带...
【vue.js 3.0】之 Composition API
weixin_37883657的博客
03-22 913
一、新增 createApp, reactive, onMounted, onUnmounted, toRefs，用这些方法封装函数 引入 import {createApp, reactive, onMounted, onUnmounted, toRefs} from './node_modules/vue/dist/vue.esm-browser.js' createApp：创建 app reactive：实现响应式 setup：Composition API的入口 生命周期钩...
【大前端】NuxtJS基础教程
weixin_37883657的博客
01-14 667
Nuxt 介绍 一个机遇 Vue.js 生态的第三方开元服务端渲染应用框架 它可以帮我们轻松的使用 Vue.js 技术栈构建同构应用 官网：https://zh.nuxtjs.org/ GitHub 仓库：https://github.com/nuxt.nuxt.js 初始化NuxtJS项目 Nuxt.js 的使用方式 初始项目 官方文档：https://zh.nuxtjs.org/gguide/installation 方式一：使用 create-nuxt-app 方...
大前端【Nuxt 发布部署-打包】
weixin_37883657的博客
01-20 502
打包 Nuxt.js 应用 最简单的部署方式 配置 Host + Port 压缩发布包 把发布包传到服务器 解压 安装依赖 启动服务 使用PM2启动Node服务 自动化部署介绍 自动化提交部署 代码修改后 ...
【Vue.js + Vuex + TypeScript 实战项目开发与项目优化】
weixin_37883657的博客
03-31 488
创建项目：使用 Vue CLI 创建项目 安装 Vue CLI：npm i -g @vue/cli vue create edu-boss-fed cd edu-boss-fed npm run serve 加入Git版本管理 创建远程仓库 将本地仓库推到线上 如果没有本地仓库： git init# 创建本地仓库 git add .# 将问件添加到暂存区 git commit -m "提交日志" #提交历史记录 git remote add or...
Vue.js 3.0响应式原理深度解析
"Vue.js面试题集合，涵盖了Vue 3.0响应式系统的基本原理，强调了响应式的惰性特性和性能优化策略。" 在Vue.js框架中，响应式系统是核心部分，它使得数据的变化能够自动更新视图。Vue 3.0引入了重大改进，提高了性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值