Vue3 响应式实现雏形

最新推荐文章于 2023-03-10 01:00:45 发布

Pop–

最新推荐文章于 2023-03-10 01:00:45 发布

阅读量125

点赞数

分类专栏： Vue.js 文章标签： html

本文链接：https://blog.csdn.net/weixin_45026839/article/details/120358184

版权

Vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

实现原理：
1.通过Proxy（代理）：拦截对象中任意属性的变化：包括属性值得读写，属性的添加，属性的删除等
2.通过Reflect (反射) ：对被源对象的属性进行操作

 <!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>Document</title>
</head>
<body>
  <script>
    // 源数据
    let person = {
      name : '方敬',
      age:18
    }

    // 模拟 Vue3中实现响应式 Proxy 代理 reflect 反射
    const  p = new Proxy(person,{
      // 拦截读取p的某个属性时调用
      get(target,prop){
        return Reflect.get(target,prop)
      },
      // 拦截设置属性值或者添加新属性
      set(target,prop,value){
        return Reflect.set(target,prop,value)
      },
      // 拦截删除属性
      deleteProperty(target,prop){
        return Reflect.get(target,prop)
      }
    })
  </script>
</body>
</html>

测试

优惠劵

Pop–

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3 响应式实现雏形

实现原理：1.通过Proxy（代理）：拦截对象中任意属性的变化：包括属性值得读写，属性的添加，属性的删除等2.通过Reflect (反射) ：对被源对象的属性进行操作 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name.
复制链接

扫一扫