原生JS实现数据双向绑定

最新推荐文章于 2023-06-06 16:10:07 发布

小何何何

最新推荐文章于 2023-06-06 16:10:07 发布

阅读量660

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Hec990/article/details/114971325

版权

本文介绍了MVVM模式，重点探讨了Vue中的双向绑定原理，并详细阐述了如何使用原生JS实现数据双向绑定。通过观察者模式，实现了模型与视图的实时同步，核心原理涉及到了Object.defineProperty的get和set方法。

摘要由CSDN通过智能技术生成

MVVM模式

在这里插入图片描述
MVVM 对应 3个组成部分，Model（模型）、View（视图）和 ViewModel（视图模型）

View 是用户在屏幕上看到的结构、布局和外观。
ViewModel是一个绑定器，能和 View 层和 Model 层进行通信。
Model则是数据和逻辑。

当View视图发生变化，会通过ViewModel绑定器反应到Model视图模型，Model也会跟着变化。反则Model视图模型变化，View视图也会随着变化。

一、Vue中的双向绑定

<!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>Vue中的数据双向绑定</title>
  </head>
  <body>
    <div id="app">
      <h1>数据响应式</h1>
      <div>
        <div v-text="myText"></div>
        <div v-text="myBox"></div>
        <input type="text" v-model="myText" />
        <input type="text" v-model="myBox" />
      </div>
    </div>
    
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
      const app = new Vue({
    
        el