Vue实现双向数据绑定的原理：Proxy实现

一起荡起双桨

已于 2022-07-16 11:06:09 修改

阅读量162

点赞数

分类专栏： VUE 文章标签： vue js

于 2021-06-27 11:21:11 首次发布

本文链接：https://blog.csdn.net/weixin_43595755/article/details/118269808

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实现双向数据绑定的原理：Proxy代理实现

<!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>
    <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <div v-bind="title"></div>
  </body>
  <script>
    function View() {
      let proxy = new Proxy(
        {},
        {
          get(obj, property) {},
          set(obj, property, value) {
            obj[property] = value;
            document
              .querySelectorAll(
                `[v-model="${property}"],[v-bind="${property}"]`
              )
              .forEach((el) => {
                el.innerHTML = value;
                el.value = value;
              });
          },
        }
      );
      this.run = function () {
        const els = document.querySelectorAll("[v-model]");
        els.forEach((item) => {
          item.addEventListener("keyup", function () {
            proxy[this.getAttribute("v-model")] = this.value;
          });
        });
      };
    }
    let view = new View().run();
  </script>
</html>

效果如下：
在这里插入图片描述

一起荡起双桨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实现双向数据绑定的原理：Proxy实现

Vue实现双向数据绑定的原理：Proxy实现<!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=
复制链接

扫一扫

专栏目录