• Vue3 响应式原理

     响应式原理

    Vue2 使用的是 Object.defineProperty  Vue3 使用的是 Proxy

    2.0的不足

    对象只能劫持 设置好的数据，新增的数据需要Vue.Set(xxx)  数组只能操作七种方法，修改某一项值无法劫持。数组的length修改也无法劫持

    reactive和effect的实现

    1. export const reactive = <T extends object>(target:T) => {
    2.     return new Proxy(target,{
    3.         get (target,key,receiver) {
    4.           const res  = Reflect.get(target,key,receiver) as object
    5.  
    6.  
    7.           return res
    8.         },
    9.         set (target,key,value,receiver) {
    10.            const res = Reflect.set(target,key,value,receiver)
    11.  
    12.  
    13.            return res
    14.         }
    15.     })
    16. }

     Vue3 的响应式原理依赖了 Proxy 这个核心 API，通过 Proxy 可以劫持对象的某些操作。

    effect track trigger

    实现effect 副作用函数

    1. let activeEffect;
    2. export const effect = (fn:Function) => {
    3.      const _effect = function () {
    4.         activeEffect = _effect;
    5.         fn()
    6.      }
    7.      _effect()
    8. }

     使用一个全局变量 active 收集当前副作用函数，并且初始化的时候调用一下

    实现track

    1. const targetMap = new WeakMap()
    2. export const track = (target,key) =>{
    3.    let depsMap = targetMap.get(target)
    4.    if(!depsMap){
    5.        depsMap = new Map()
    6.        targetMap.set(target,depsMap)
    7.    }
    8.    let deps = depsMap.get(key)
    9.    if(!deps){
    10.       deps = new Set()
    11.       depsMap.set(key,deps)
    12.    }
    13.  
    14.    deps.add(activeEffect)
    15. }

    执行完成成后我们得到一个如下的数据结构 

    实现trigger

    1. export const trigger = (target,key) => {
    2.    const depsMap = targetMap.get(target)
    3.    const deps = depsMap.get(key)
    4.    deps.forEach(effect=>effect())
    5. }

     当我们进行赋值的时候会调用 set 然后 触发收集的副作用函数

    1. import {track,trigger} from './effect'
    2.  
    3.  
    4. export const reactive = <T extends object>(target:T) => {
    5.     return new Proxy(target,{
    6.         get (target,key,receiver) {
    7.           const res  = Reflect.get(target,key,receiver) as object
    8.  
    9.           track(target,key)
    10.  
    11.           return res
    12.         },
    13.         set (target,key,value,receiver) {
    14.            const res = Reflect.set(target,key,value,receiver)
    15.  
    16.            trigger(target,key)
    17.  
    18.            return res
    19.         }
    20.     })
    21. }

     给 reactive 添加这两个方法

    测试代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.  
    13.     <div id="app">
    14.  
    15.     </div>
    16.  
    17.     <script type="module">
    18.         import { reactive } from './reactive.js'
    19.         import { effect } from './effect.js'
    20.         const user = reactive({
    21.             name: "小满",
    22.             age: 18
    23.         })
    24.         effect(() => {
    25.             document.querySelector('#app').innerText = `${user.name} - ${user.age}`
    26.         })
    27.  
    28.         setTimeout(()=>{
    29.             user.name = '大满很吊'
    30.             setTimeout(()=>{
    31.                 user.age = '23'
    32.             },1000)
    33.         },2000)
    34.  
    35.     </script>
    36. </body>
    37.  
    38. </html>

    递归实现reactive

    1. import { track, trigger } from './effect'
    2.  
    3. const isObject = (target) => target != null && typeof target == 'object'
    4.  
    5. export const reactive = <T extends object>(target: T) => {
    6.     return new Proxy(target, {
    7.         get(target, key, receiver) {
    8.             const res = Reflect.get(target, key, receiver) as object
    9.  
    10.             track(target, key)
    11.  
    12.             if (isObject(res)) {
    13.                 return reactive(res)
    14.             }
    15.  
    16.             return res
    17.         },
    18.         set(target, key, value, receiver) {
    19.             const res = Reflect.set(target, key, value, receiver)
    20.  
    21.             trigger(target, key)
    22.  
    23.             return res
    24.         }
    25.     })
    26. }
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.  
    13.     <div id="app">
    14.  
    15.     </div>
    16.  
    17.     <script type="module">
    18.         import { reactive } from './reactive.js'
    19.         import { effect } from './effect.js'
    20.         const user = reactive({
    21.             name: "小满",
    22.             age: 18,
    23.             foo:{
    24.                 bar:{
    25.                     sss:123
    26.                 }
    27.             }
    28.         })
    29.         effect(() => {
    30.             document.querySelector('#app').innerText = `${user.name} - ${user.age}-${user.foo.bar.sss}`
    31.         })
    32.  
    33.         setTimeout(()=>{
    34.             user.name = '大满很吊'
    35.             setTimeout(()=>{
    36.                 user.age = '23'
    37.                 setTimeout(()=>{
    38.                     user.foo.bar.sss = 66666666
    39.                 },1000)
    40.             },1000)
    41.         },2000)
    42.  
    43.     </script>
    44. </body>
    45.  
    46. </html>

     

  • 相关阅读:
    maven仓库-阿里镜像-下载问题
    企业公众号怎么做内容？这四个阶段要做好
    C++虚函数的vptr与vtable
    MySQL游标
    web自动化测试 —— cypress测试框架
    vue父组件如何向子组件传递数据？
    【C++】类和对象（中）
    OA项目之会议通知（查询&是否参会&反馈详情）
    Codeforces Round 905 (Div. 3)ABCDEF
    SEO方案尝试--Nuxtjs项目基础配置
  • 原文地址：https://blog.csdn.net/qq1195566313/article/details/127563892