js简单实现vue中的双向绑定

最新推荐文章于 2024-04-18 22:48:34 发布

mondayes

最新推荐文章于 2024-04-18 22:48:34 发布

阅读量323

点赞数

分类专栏： javascript vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/tdl2793958525/article/details/104726927

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

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

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。

通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

js简单实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向绑定</title>
</head>

<body>
  <div id="app">
    <input type="text" id="text">
    <p id="show"></p>
  </div>

  <script>
    var obj = {}
    Object.defineProperty(obj, 'txt', {
      get: function () {
        return obj
      },
      set: function (newValue) {
        document.querySelector('#text').value = newValue
        document.querySelector('#show').innerHTML = newValue
      }
    })
    document.addEventListener('keyup', function (e) {
      obj.txt = e.target.value
    })
  </script>
</body>

</html>

效果

mondayes

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简单实现vue中的双向绑定

Vue实现数据双向绑定的原理vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。js简单实现<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫