vue数据双向绑定原理

最新推荐文章于 2025-02-12 10:38:17 发布

致可乐

最新推荐文章于 2025-02-12 10:38:17 发布

阅读量239

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/ling_xy/article/details/119300222

版权

笔记专栏收录该内容

51 篇文章

订阅专栏

本文探讨了Vue框架中的数据双向绑定概念，通过v-model实现表单数据与后台数据的同步更新。解释了MVVM模式在数据双向绑定中的作用，并简述了基于发布订阅模式的高级JS实现方式。此外，还提供了创建简单版Vue实例的步骤，帮助读者深入理解这一机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.数据双向绑定

v-bind属性绑定值是单向数据绑定（只修改前台数据，后台不变）

v-model 表单数据绑定是数据双向绑定

<template>
  <!-- 表单元素的vlaue绑定 -->
  <input type="text" :value="value" />
  <input type="text" v-model="value" />
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      value:'请输入...',
    }
  },
  watch:{    //监听（value值发生变化）
    value(nowValue, oldValue) {
      console.log(nowValue, oldValue);
    },
  }
}
</script>

在这里插入图片描述
第二个输入时，会触发监听
说明后台value值被修改（即数据双向）

2.数据双向绑定原理 MVVM

原生js 高级写的：发布和订阅模式做的数据双向，也就是说数据和视图同步
（整个vue.js都是js设计模式写的）

设计模式：三层结构  

MVC：  model(数据层)    view(视图层)   contral(控制器层  逻辑管理层)   

MVVM： model(数据层)   view(视图层)  viewmodel(数据监听层)

在这里插入图片描述

3.简单版的数据双向绑定原理

<!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>
    <div id="app">
        <input type="text" id="ipt">
        <h3 id="txt"></h3>
    </div>
    <script>
        //模拟数据模块
        var msg="hello world!";

        //建立对象 作为接收器
        var obj={};
         Object.defineProperty(obj,'value',{
             //设置get  set  访问器
             get(){
                 return this._value;
             },
             set(val){
                 this._value=val;
                 ipt.value=val;
                 txt.innerText=val;
             }
         });
         obj.value=msg;

         //监听文本框输入
         ipt.addEventListener("input",function(){
             obj.value=this.value;
             console.log(obj.value);
         })
    </script>
</body>
</html>

4.举例

引入CDN，创建一个网页版简单版vue实例。
index.html:

<!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>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        let vue=new Vue({
            el:"#app",
            data:{
                msg:"消息",
            }
        });
        console.log(vue);

		//对象的属性发生变化  可以通过getter setter访问器拦截数据变化
        //原生js Objec.defineProperty()  修改、设置属性相关配置
    </script>
</body>
</html>

在这里插入图片描述

自己来模拟创建一个简单版vue实例

1.创建observer.js：

//创建observer监听器对象 监听属性的变化
function observer(data){
    if(!data|typeof data!=="object"){
        return;
    }
    Object.keys(data).forEach(function(key){
        console.log(key);
    });
}
var obj={
    name:'小明',
    list:{
        name:'',
    }
}
observer(obj);

index.html：

<!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 src="js/observer.js"></script>
</body>
</html>