007-双向绑定原理

最新推荐文章于 2025-04-11 11:30:39 发布

原创

最新推荐文章于 2025-04-11 11:30:39 发布 · 795 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

双向绑定原理

双向绑定
思考：
一句话描述原理
DocuemntFragment（碎片化文档）
Object.defineProperty（数据劫持）
发布订阅者模式
Vue 双向绑定图示
Vue 双向绑定完整实现代码

双向绑定

vue中 data定义的数据会添加双向绑定的功能，即数据更新后，页面内容会同步更新；页面内容更新后，数据也会同步更新。

思考：

初始化，如何将 data 中的数据更新到DOM模板中？ - 碎片化文档
页面更新，如何更新数据？ - input事件监听
数据变了更新页面，那如何知道数据变了呢？ - 数据劫持，Object.defineProperty()
已知数据变了（发布者），如何更新跟这个数据相关的页面内容 { {}}、属性绑定、v-model（订阅者）呢？ - 发布订阅者模式

一句话描述原理

Vue 数据双向绑定是通过数据劫持结合发布订阅者模式的方式来实现的。使用 DocuemntFragment（碎片化文档）获取所有子节点，将 v-model { {}} 类似语法的值进行填充，监听页面元素的 input 事件，当 val 变更时，更新 data 中的数据，给 data 通过 object.defineProperty 添加响应监听，当 val 变化时，会触发 set 方法，通过发布订阅模式，触发订阅者的更新方法，更新视图。

DocuemntFragment（碎片化文档）

在这里插入图片描述

function nodeToFragment(node){
   
   
    var fragment = document.createDocumentFragment();
    var child = null;
    while(child = node.firstChild){
   
   
        fragment.appendChild(child)
        
    }
    return fragment
}

Object.defineProperty（数据劫持）

在这里插入图片描述

var obj = {
   
   };  // 定义一个空对象
Object.defineProperty(obj, 'val', {
   
    // 定义要修改对象的属性
    get: function () {
   
   
        console.log('获取对象的值')
    },
    set: function (newVal) {
   
    
        console.log('设置对象的值：最新的值是'+newVal);
    }
});
obj.hello = 'hello world'

js通过Object.defineProperty方法简单的实现双向绑定：

<!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" id=

最低0.47元/天解锁文章