Vue源码学习：手写Vue（三）—— proxy

最新推荐文章于 2024-03-05 18:09:37 发布

9级浪

最新推荐文章于 2024-03-05 18:09:37 发布

阅读量258

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/xliang111/article/details/106282931

版权

我们希望能通过hvue的实例访问我$data中的属性（如：this.message），这时我们可以通知代码现实。

1、为HVue类添加proxyData方法

// hvue.js
class HVue {
  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal
      }
    })
  }
}

2、在HVue类observe方法中，添加this.proxyData(key)

// hvue.js
class HVue {
  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal
      }
    })
  }
}

到这里我们可以测试一下了

// index.html
<body>
  <script src="./hvue.js"></script>
  <script>
    const app = new HVue({
      data: {
        message: 'hvue',
        foo: {bar: ''}
      }
    })
    app.$data.message = 'new message'
    app.$data.foo.bar = 'new bar'
    app.message = 'again update message'
  </script>
</body>

在这里插入图片描述
看了三行日志，说明通过HVue实例，也能设置和访问$data的属性了

优惠劵

9级浪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue源码学习：手写Vue（三）—— proxy

我们希望能通过hvue的实例访问我$data中的属性（如：this.message），这时我们可以通知代码现实。1、为HVue类添加proxyData方法// hvue.jsclass HVue { proxyData(key) { Object.defineProperty(this, key, { get() { return this.$data[key]; }, set(newVal) { this.$data[k
复制链接

扫一扫