2024年前端最新Vue双向数据绑定原理(面试必问)_vue双向绑定面试怎么说，前端开发社招面试经验

于 2024-05-13 18:02:56 发布
阅读量1k 收藏 16
点赞数 13
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang688699/article/details/138813360
版权

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<div id="app">
        
    </div>
    <script>
        var flag = document.createDocumentFragment(),
            span = document.createElement('span'),
            textNode = document.createTextNode('hello world');
        span.appendChild(textNode);
        flag.appendChild(span);
        document.querySelector('#app').appendChild(flag)
    </script>

这样，我们就可以得到下面的DOM树：

使用文档片段的好处在于：在文档片段上进行操作DOM，而不会影响到真实的DOM，操作完成之后，我们就可以添加到真实DOM上，这样的效率比直接在正式DOM上修改要高很多 。

vue进行编译时，就是将挂载目标的所有子节点劫持到DocumentFragment中，经过一番处理之后，再将DocumentFragment整体返回插入挂载目标。

如下所示 ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
    <div id="app">
        <input type="text" id="a">
        <span id="b"></span>
    </div>

    <script>
        var dom = nodeToFragment(document.getElementById('app'));
        console.log(dom);

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

        document.getElementById('app').appendChild(dom);
    </script>

</body>
</html>

即首先获取到div，然后通过documentFragment劫持，接着再把这个文档片段添加到div上去。

五、初始化数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text">
        {{ text }}
    </div>
        
    <script>
        function compile(node, vm) {
            var reg = /{{(.*)}}/;

            // 节点类型为元素
            if (node.nodeType === 1) {
                var attr = node.attributes;
                // 解析属性
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].nodeName == 'v-model') {
                        var name = attr[i].nodeValue; // 获取v-model绑定的属性名
                        node.value = vm.data[name]; // 将data的值赋值给该node
                        node.removeAttribute('v-model');
                    }
                }
            }

            // 节点类型为text
            if (node.nodeType === 3) {
                if (reg.test(node.nodeValue)) {
                    var name = RegExp.$1; // 获取匹配到的字符串
                    name = name.trim();
                    node.nodeValue = vm.data[name]; // 将data的值赋值给该node
                }
            }
        }

        function nodeToFragment(node, vm) {
            var flag = document.createDocumentFragment();
            var child;

            while (child = node.firstChild) {
                compile(child, vm);
                flag.appendChild(child); // 将子节点劫持到文档片段中
            }
            
            return flag;
        }

        function Vue(options) {
            this.data = options.data;
            var id = options.el;
            var dom = nodeToFragment(document.getElementById(id), this);
            // 编译完成后，将dom返回到app中。
            document.getElementById(id).appendChild(dom);
        }

        var vm  = new Vue({
            el: 'app',
            data: {
                text: 'hello world'
            }
        });


    </script>

</body>
</html>

以上的代码实现而立任务一，我们可以看到，hello world 已经呈现在了输入框和文本节点中了。

六、响应式的数据绑定

我们再来看看任务二的实现思路： 当我们在输入框输入数据的时候，首先触发的时input事件（或者keyup、change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。 我们会利用defineProperty将data中的text设置为vm的访问器属性，因此给vm.text赋值，就会触发set方法。 在set方法中主要做两件事情，第一是更新属性的值，第二留在任务三种说。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text">
        {{ text }}
    </div>
        
    <script>
        function compile(node, vm) {
            var reg = /{{(.*)}}/;

            // 节点类型为元素
            if (node.nodeType === 1) {
                var attr = node.attributes;
                // 解析属性
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].nodeName == 'v-model') {
                        var name = attr[i].nodeValue; // 获取v-model绑定的属性名
                        node.addEventListener('input', function (e) {
                            // 给相应的data属性赋值，进而触发属性的set方法
                            vm[name] = e.target.value;
                        })


                        node.value = vm[name]; // 将data的值赋值给该node
                        node.removeAttribute('v-model');
                    }
                }
            }

            // 节点类型为text
            if (node.nodeType === 3) {
                if (reg.test(node.nodeValue)) {
                    var name = RegExp.$1; // 获取匹配到的字符串
                    name = name.trim();
                    node.nodeValue = vm[name]; // 将data的值赋值给该node
                }
            }
        }

        function nodeToFragment(node, vm) {
            var flag = document.createDocumentFragment();
            var child;

            while (child = node.firstChild) {
                compile(child, vm);
                flag.appendChild(child); // 将子节点劫持到文档片段中
            }
            
            return flag;
        }

        function Vue(options) {
            this.data = options.data;
            var data = this.data;

            observe(data, this);

            var id = options.el;
            var dom = nodeToFragment(document.getElementById(id), this);
            // 编译完成后，将dom返回到app中。
            document.getElementById(id).appendChild(dom);
        }

        var vm  = new Vue({
            el: 'app',
            data: {
                text: 'hello world'
            }
        });



        function defineReactive(obj, key, val) {
            // 响应式的数据绑定
            Object.defineProperty(obj, key, {
                get: function () {
                    return val;
                },
                set: function (newVal) {
                    if (newVal === val) {
                        return; 
                    } else {
                        val = newVal;
                        console.log(val); // 方便看效果
                    }
                }
            });
        }

        function observe (obj, vm) {
            Object.keys(obj).forEach(function (key) {
                defineReactive(vm, key, obj[key]);
            });
        }


    </script>

</body>
</html>

以上，任务二也就完成了，text属性值会和输入框的内容同步变化。

七、 订阅/发布模式（subscribe & publish）

text属性变化了，set方法触发了，但是文本节点的内容没有变化。 如何才能让同样绑定到text的文本节点也同步变化呢？ 这里又有一个知识点： 订阅发布模式。

订阅发布模式又称为观察者模式，定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有的观察者对象。

发布者发出通知 =>主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作。

// 一个发布者 publisher，功能就是负责发布消息 - publish
        var pub = {
            publish: function () {
                dep.notify();
            }
        }

        // 多个订阅者 subscribers， 在发布者发布消息之后执行函数
        var sub1 = { 
            update: function () {
                console.log(1);
            }
        }
        var sub2 = { 
            update: function () {
                console.log(2);
            }
        }
        var sub3 = { 
            update: function () {
                console.log(3);
            }
        }

        // 一个主题对象
        function Dep() {
            this.subs = [sub1, sub2, sub3];
        }
        Dep.prototype.notify = function () {
            this.subs.forEach(function (sub) {
                sub.update();
            });
        }


        // 发布者发布消息， 主题对象执行notify方法，进而触发订阅者执行Update方法
        var dep = new Dep();
        pub.publish();

不难看出，这里的思路还是很简单的： 发布者负责发布消息、 订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。

所以，当set方法触发后做的第二件事情就是作为发布者发出通知： “我是属性text，我变了”。 文本节点作为订阅者，在接收到消息之后执行相应的更新动作。

八、 双向绑定的实现

回顾一下，每当new一个Vue，主要做了两件事情：第一是监听数据：observe(data)，第二是编译HTML：nodeToFragment(id)

在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。

在编译HTML的过程中，会为每一个与数据绑定相关的节点生成一个订阅者 watcher，watcher会将自己添加到相应属性的dep中。

我们已经实现了： 修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的set方法。

接下来我们要实现的是： 发出通知 dep.notify() => 触发订阅者update方法 => 更新视图。

这里的关键逻辑是： 如何将watcher添加到关联属性的dep中。

function compile(node, vm) {
            var reg = /{{(.*)}}/;

            // 节点类型为元素
            if (node.nodeType === 1) {
                var attr = node.attributes;
                // 解析属性
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].nodeName == 'v-model') {
                        var name = attr[i].nodeValue; // 获取v-model绑定的属性名
                        node.addEventListener('input', function (e) {
                            // 给相应的data属性赋值，进而触发属性的set方法
                            vm[name] = e.target.value;
                        })


                        node.value = vm[name]; // 将data的值赋值给该node
                        node.removeAttribute('v-model');
                    }
                }
            }

            // 节点类型为text
            if (node.nodeType === 3) {
                if (reg.test(node.nodeValue)) {
                    var name = RegExp.$1; // 获取匹配到的字符串
                    name = name.trim();
                    // node.nodeValue = vm[name]; // 将data的值赋值给该node

                    new Watcher(vm, node, name);
                }
            }
        }

在编译HTML的过程中，为每个和data关联的节点生成一个Watcher。那么Watcher函数中发生了什么呢？

function Watcher(vm, node, name) {
            Dep.target = this;
            this.name = name;
            this.node = node;
            this.vm = vm;
            this.update();
            Dep.target = null;
        }

        Watcher.prototype = {
            update: function () {
                this.get();
                this.node.nodeValue = this.value;
            },

            // 获取data中的属性值
            get: function () {
                this.value = this.vm[this.name]; // 触发相应属性的get
            }
        }

首先，将自己赋值给了一个全局变量 Dep.target;

其次，执行了update方法，进而执行了 get 方法，get方法读取了vm的访问器属性， 从而触发了访问器属性的get方法，get方法将该watcher添加到对应访问器属性的dep中；

再次，获取顺序性的值， 然后更新视图。

最后将Dep.target设置为空。 因为他是全局变量，也是watcher和dep关联的唯一桥梁，任何时候，都必须保证Dep.target只有一个值。

最终如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text"> <br>
        {{ text }} <br>
        {{ text }}
    </div>
        
    <script>
        function observe(obj, vm) {
            Object.keys(obj).forEach(function (key) {
                defineReactive(vm, key, obj[key]);
            });
        }


        function defineReactive(obj, key, val) {

            var dep = new Dep();

            // 响应式的数据绑定
            Object.defineProperty(obj, key, {
                get: function () {
                    // 添加订阅者watcher到主题对象Dep
                    if (Dep.target) {
                        dep.addSub(Dep.target);
                    }
                    return val;
                },
                set: function (newVal) {
                    if (newVal === val) {
                        return; 
                    } else {
                        val = newVal;
                        // 作为发布者发出通知
                        dep.notify()                        
                    }
                }
            });
        }
        
        function nodeToFragment(node, vm) {
            var flag = document.createDocumentFragment();
            var child;

            while (child = node.firstChild) {
                compile(child, vm);
                flag.appendChild(child); // 将子节点劫持到文档片段中
            }
            
            return flag;
        }

        function compile(node, vm) {
            var reg = /{{(.*)}}/;

            // 节点类型为元素
            if (node.nodeType === 1) {
                var attr = node.attributes;


### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/02c2bd77563bcf03637d4ba97cf657f6.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/15da90f20584b6c1e02565e76474cdc0.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**



; // 将子节点劫持到文档片段中
            }
            
            return flag;
        }

        function compile(node, vm) {
            var reg = /{{(.*)}}/;

            // 节点类型为元素
            if (node.nodeType === 1) {
                var attr = node.attributes;


### 最后

[外链图片转存中...(img-bTPWcCSg-1715594552418)]

[外链图片转存中...(img-d3sUPDNb-1715594552419)]

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
wang688699
关注
  • 13
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 给div内赋值_vue中的双向数据绑定详解
weixin_39790168的博客
12-23 4940
前言什么是数据双向绑定？vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定...
vue双向数据绑定原理探究(附demo)
08-31
Vue.js 的双向数据绑定是其核心特性之一，它使得数据模型和用户界面之间能保持同步，极大地简化了开发过程。本文将深入探讨 Vue 双向数据绑定的原理，以及通过一个小 demo 来演示其实现方式。 首先，我们要理解双向...
vue双向数据绑定原理
weixin_50304773的博客
09-16 137
vue双向数据绑定原理 1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变； 2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法； 3.介绍一下Object.defineProperty()方法 （1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） p
前端面试题——Vue的双向绑定
omroji的博客
02-04 1707
双向绑定机制是Vue中最重要的机制之一，甚至可以说是Vue框架的根基，它将数据与视图模板相分离，使得数据处理和页面渲染更为高效，同时它也是前端面试题中的常客，接下来让我们来了解什么是双向绑定以及其实现原理。vue的双向绑定，即数据与视图的响应式设计。具体表现为：View 的改变能实时让Model发生变化，而 Model 的变化也能实时更新 View。而单项数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)。
前端面试Vue双向绑定原理
weixin_42331246的博客
11-15 236
https://juejin.im/post/5dcb548e51882557296f901f
前端面试题：vue 的双向数据绑定原理，v-model的源码
jiang7701037的博客
08-21 2880
一、双向绑定： 在vue中，使用指令v-model来实现双向绑定，双向绑定的意思是：表单改变，数据也改变，数据改变，表单也改变，以下为示意图： 二、示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&g...
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
使用Vue如何写一个双向数据绑定(面试常见)
08-27
Vue是一款流行的前端框架，它提供了强大的双向数据绑定功能，allowing developers to create interactive and dynamic user interfaces. 在本文中，我们将详细介绍如何使用Vue实现双向数据绑定，并提供一个简单的...
前端面试汇总-vue双向绑定原理精美桌面.png
10-27
web前端面试题汇总-精美桌面-vue双向绑定原理，把面试题设置成桌面，每天打开电脑就学习一遍，加强记忆。会不断更新，不断上传！
VUE双向绑定
qq_48834760的博客
05-24 663
前端碎碎念之vue双向绑定 本文章会详细介绍vue2和vue3的双向绑定 文章目录前端碎碎念之vue双向绑定一、如何实现vue2的双向绑定1.原理2.vue2的双向数据绑定缺点：3.解决方案：二、vue3数据双向绑定1.原理2.优点三、如何实现依赖收集（vue2为例）1.dep2.watcher 一、如何实现vue2的双向绑定 1.原理 其实vue2的双向绑定很简单，还记得ES5里面的Object.defineProperty( )这个方法吗？可以用这个方法来监听一个对象的属性，比如是否可以删除，是否可
前端面试 vue 部分 (2)——Vue是如何实现双向绑定的
weixin_39310325的博客
08-04 624
数据的双向绑定 当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定 Vue.js 是采用 Object.defineProperty 的 getter 和 setter ，并结合 观察者模式 来实现数据绑定的。 当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，并用Object.def.
Vue基础知识总结 6：vue双向绑定原理
学Java，找哪吒
10-02 1万+
需求分析： 通过输入框，双向绑定文本框显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :number1="num1" :number2="num2"/> &lt
前端三大框架的数据绑定
weixin_47049504的博客
04-29 527
什么是绑定语法 让HTML中的内容也可随程序中的变量改变而自动改变！——也就是给HTML中添加变量功能。 一. Vue.js 1. 文本插值 {{ }}Mustache标签 <span>Hello　{{ name }}</span> 原理： (1). 首次加载页面内容时，会用data中同名变量的初始值代替{{变量名}}位置 (2). 当data中同名变量在new Vue(...
【微信小程序学习】数据绑定、事件绑定，前端开发避坑指南
最新发布
2401_83946261的博客
04-02 412
2.Vue（1）data中初始化数据（2）修改数据：this.key = value（3）数据流 Vue是单向数据流：model—>viewVue实现了双向数据绑定 v-model二、事件绑定======1、事件分类（1) 冒泡事件（a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
vue双向绑定原理
热门推荐
我是一颗草，哪里荒凉往哪里长
03-07 4万+
** Vue双向绑定的原理 再讲双向双向绑定之前我们需要来了解下MVVM模式 MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。 View：视图层（UI 用户界面） ViewModel：业务逻辑层（一切 js 可视为业务逻辑，也就是前端的日常工作） Model：数据层（存储数据及对数据的处理如增删改查） MVVM 将数据双向绑定（data-binding）作为核心思想，Vie
Vue -- 双向数据绑定原理
muzidigbig的博客
03-27 5304
Vue的双向数据绑定原理先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过来劫持各个属性的，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化。
vue2面试题：什么是双向数据绑定
laowang357的博客
01-23 655
把Model绑定到View上为单向绑定，双向绑定就是在单向绑定的基础上，用户更新了view后model也会随之更新。
Vue基本原理和双向绑定原理
m0_60899441的博客
01-30 272
这样的方式数组或者对象都可以进行监测，像声明一个数组a:[1,2,3,4,5,6],我们可以通过下标直接修改胡数据也可以触发set，但是当数组中的元素数量可多的时候，就需要给每个元素都加上set,get,这样必然会对性能产生影响，所以这种方式只适合和劫持对象。每个组件实例都会有一个watcher程序实例，他会在组件渲染的过程中国把属性记录为依赖 之后当setter调用的时候会通知watcher重新计算 从而使它关联的组件实现更新。当一个Vue实例被创建的时候，Vue会遍历data中的属性。
前端面试题 精选Vue面试题及答案
03-25
前端面试题 精选Vue面试题及答案

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值