vue3.0 响应式代理和vue2区别

迈不过友情╰ 2021-07-24 14:39 469阅读 0赞

vue3中:
    	通过Proxy(代理):拦截对data任意属性的任意(13种)操作,包括属性值的读写,属性的添加,属性的删除等...
    	通过Reflect(反射):动态对被代理对象的相应属性进行特定的操作
    
    vue2中响应式的缺点:
    	对象直接新添加的属性或删除已有属性,界面不会自动更新,vue3中不存在
    	对象直接新添加的属性或删除已有属性,界面不会自动更新,vue3中不存在

代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>玉树凌风美少年,揽镜自顾夜不眠</title>
    </head>
    <body>
      <script>
        const user={ 
          name:'jeff',
          age:20,
          wife:{ 
            name:'keira',
            age:30
          }
        }
        //target:目标对象即对象,property:属性名或Symbol,value:新属性,receiver:通常是proxy本身,但handler的set方法也有可能在原型链上,或以其他方式被间接地调用(因此不一定是proxy本身)
        const proxyUser=new Proxy(user,{ 
          get(target, property,receiver){ 
            console.log('get劫持')
            return Reflect.get(target,property);
          },
          set(target, property, value, receiver){ 
            console.log('set劫持')
            return Reflect.set(target, property, value, receiver)
          }
        })
    
        console.log(proxyUser.name);
        proxyUser.wife.name='赵'	//只能劫持第一层,第二层劫持需要循环遍历,参考vue2中的循环遍历原理
        console.log(proxyUser.wife.name)
    
      </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，469人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue响应式原理

响应式原理 * 概述 * 如何追踪变化 * 检测变化的注意事项 * 声明响应式属性 * 异步更新队列概述现在是时候深入一下了！Vu...

小灰灰/ 2024年04月17日 05:49/ 0 赞/ 67 阅读

相关 Vue数据响应式

[原文链接：https://www.jianshu.com/p/4394009f53b9][https_www.jianshu.com_p_4394009f53b9] Vue

爱被打了一巴掌/ 2023年06月24日 09:25/ 0 赞/ 16 阅读

相关 Vue响应式原理

一、简介 > Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简

ゞ浴缸里的玫瑰/ 2023年06月22日 13:47/ 0 赞/ 24 阅读

相关 vue2数据响应式的缺陷

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.

红太狼/ 2023年01月20日 06:58/ 0 赞/ 188 阅读

相关 vue响应式原理

//响应式原理 let obj = { name: 'yangedong', age: 12 } O

我不是女神ヾ/ 2022年12月29日 09:45/ 0 赞/ 231 阅读

相关 Vue--响应式

原文网址：[Vue--响应式\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [vue中遇到的坑 --- 变化检测问题（数组相关）

╰半夏微凉°/ 2022年12月23日 03:53/ 0 赞/ 231 阅读

相关 Vue2和Vue3响应式原理对比剖析

响应式原理实现逻辑 1.监听对象数组变化 2.设置拦截，读取的时候进行依赖收集，设置的时候进行派发更新操作 Vue2响应式原理简化 1.对象响应化：递归遍历每

Dear 丶/ 2022年12月09日 02:45/ 0 赞/ 222 阅读

相关 vue2.0与vue3的响应式

vue2的响应式核心：对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更

布满荆棘的人生/ 2022年09月04日 08:57/ 0 赞/ 174 阅读

相关 vue响应式原理

vue的响应式，数据模型仅仅是普通的Javascript对象。当你修改它们时，视图会进行更新那么如何追踪变化：当把普通的js对象传给vue实例的data选项，Vue将遍

布满荆棘的人生/ 2021年09月30日 10:02/ 0 赞/ 395 阅读

相关 vue3.0 响应式代理和vue2区别

vue3中: 通过Proxy(代理):拦截对data任意属性的任意(13种)操作,包括属性值的读写,属性的添加,属性的删除等... 通过Reflec

迈不过友情╰/ 2021年07月24日 14:39/ 0 赞/ 470 阅读