广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >Vue 中怎么实现数据双向绑定
  • 866
分享到

Vue 中怎么实现数据双向绑定

vue 2022-10-19 04:10:06 866人浏览 薄情痞子
摘要

本篇文章给大家分享的是有关 Vue 中怎么实现数据双向绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。MVVM 架构的优点低耦合。视图(Vi

本篇文章给大家分享的是有关 Vue 中怎么实现数据双向绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

MVVM 架构的优点

  • 低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 "View" 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

  • 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。

  • 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

  • 方便测试。界面素来是比较难于测试的,开发中大部分 Bug 来至于逻辑处理,由于 ViewModel 分离了许多逻辑,可以对 ViewModel 构造单元测试。

Vue专注于MVVM实现了数据的双向绑定,双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。大大方便了数据状态的维护与管理

Vue 对于 MVVM 架构的实践

上面我们了解了MVVM的优点,那么下面就让我们来分析一下vue.js对于MVVM的实践,数据双向绑定的原理实现吧,先来看下面这张图

Vue 中怎么实现数据双向绑定

Vue.js使用 Object.defineProperty 中的getter 和 setter来对对象中的属性进行操作,结合了观察者模式来实现数据绑定。

简单分析一下流程:一个 JS 对象作为数据传给Vue 实例时,Vue 会遍历它的属性,并使用Object.defineProperty 将它们转化为 getter/setter,Vue在内部会对它们监听,在属性被访问或修改时及时进行通知

在分析Vue 的双向数据绑定之前,我们先了解上图中各个位置的作用

  • Observer :数据监听器,对Vue的数据对象中所有属性进行监听,一旦属性发生改变,将最新值传给watcher(订阅者)

  • Compile :指令编译器,对每个DOM元素节点指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

  • Dep :消息订阅器,内部有一个维护的数组用来收集订阅者(Watcher),如果数据发生变动,则触发notify 函数,然后调用wacher订阅者的 update 方法

Watcher :订阅者,连接observer 与compile,获取属性变化的通知,并将数据及时更新到视图当中

让我们一步一步来捋Vue中数据双向绑定的步骤,流程大致可以分为两个阶段

一个是初始化阶段,一个是数据更新阶段

初始化阶段

执行new Vue() ,Vue进入初始化阶段 ,此时开始两个操作,一个是数据监听,一个是页面渲染。

一方面 Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能。

另一方面,指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅 Watcher 来更新视图。此时wacher 会将自己添加到消息订阅器中(Dep),初始化完毕。

数据更新阶段

当data数据中有属性发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),随后Dep 开始遍历所有的订阅者,对订阅者Watcher发送通知,并且会调用订阅者的 update 方法,最后,订阅者Watcher收到Dep的数据更新的通知后,也会对视图进行相应的更新。

以上就是 Vue 中怎么实现数据双向绑定,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网VUE频道。

--结束END--

本文标题: Vue 中怎么实现数据双向绑定

本文链接: https://www.lsjlt.com/news/72022.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中怎么实现数据双向绑定
    这篇文章主要介绍了Vue中怎么实现数据双向绑定的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中怎么实现数据双向绑定文章都会有所收获,下面我们一起来看看吧。在我们使用vue的时候,当数据发生了改变,界面也会...
    99+
    2023-07-04
  • Vue 中怎么实现数据双向绑定
    本篇文章给大家分享的是有关 Vue 中怎么实现数据双向绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。MVVM 架构的优点低耦合。视图(Vi...
    99+
    2022-10-19
    vue
  • vue中双向数据绑定怎么实现
    vue中双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,其核心方法是Object.defineProperty()方法。实现双向数据绑定的示例:<!DOCTYPE html><html><h...
    99+
    2022-10-11
    vue
  • vue双向数据绑定怎么实现
    Vue的双向数据绑定是通过v-model指令来实现的。1. v-model是Vue提供的一个指令,用于在表单元素上实现双向数据绑定。...
    99+
    2023-08-09
    vue
  • vue 数据双向绑定怎么实现
    这篇文章给大家分享的是有关vue 数据双向绑定怎么实现的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. 前言实现简易版的数据双向绑定2. 代码实现2.1 目的分析本文要实现的效果如下图所示:本文用到的HTML和...
    99+
    2023-06-06
  • 怎么在vue中实现数据双向绑定
    怎么在vue中实现数据双向绑定?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的...
    99+
    2023-06-14
  • vue实现双向数据绑定
    本文实例为大家分享了vue实现双向数据绑定的具体代码,供大家参考,具体内容如下 vue中数组与对象采用了不同的绑定方式 1.vue对象数据绑定 (1)数据侦测 在js中,我们使用Ob...
    99+
    2022-11-12
    vue双向数据绑定 vue数据绑定
  • Vue 3.0 中怎么实现双向绑定
    本篇文章为大家展示了Vue 3.0 中怎么实现双向绑定,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。双向绑定由两个单向绑定组成:模型 &mdash;>...
    99+
    2022-10-19
    vue
  • vue实现简单数据双向绑定
    本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下 这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue...
    99+
    2022-11-12
    vue数据双向绑定 vue数据绑定 vue双向绑定
  • vue如何实现数据双向绑定
    Vue.js是一个流行的前端框架,它提供了多种方式来实现数据双向绑定。数据双向绑定是Vue.js最重要的特性之一,它使得开发者能够根据数据的变化自动更新视图,同时也能根据视图的变化自动更新数据。因此,Vue.js的数据双向绑定也成为前端面试...
    99+
    2023-05-14
  • MVVMLight怎么实现双向数据绑定
    这篇文章主要介绍“MVVMLight怎么实现双向数据绑定”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“MVVMLight怎么实现双向数据绑定”文章能帮助大家解决问题。第一步:先写一个Model,里面...
    99+
    2023-06-29
  • angular双向数据绑定怎么实现
    Angular双向数据绑定可以通过以下步骤来实现:1. 在HTML模板中使用双大括号({{}})将数据绑定到HTML元素上。例如:{...
    99+
    2023-09-21
    angular
  • 详解用Vue怎么实现数据的双向绑定
    在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据。在本文中,我们将介绍如何用Vue.js实现数据的双向绑定。1. 理解双向绑定首先,我们需要了解双向绑定的原理。在Vue.js中...
    99+
    2023-05-14
    Vue.js
  • vue怎么使用defineProperty实现数据的双向绑定
    这篇文章主要讲解了“vue怎么使用defineProperty实现数据的双向绑定”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么使用defineProperty实现数据的双向绑定”吧...
    99+
    2023-07-04
  • Vue数据的双向绑定如何实现
    本篇内容介绍了“Vue数据的双向绑定如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现组件双向数据绑定我们先来看看抛弃 .sync ...
    99+
    2023-07-04
  • Vue2.0中怎么实现数据的双向绑定
    这篇文章给大家介绍Vue2.0中怎么实现数据的双向绑定,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。实现组件双向数据绑定在上一节中最后的示例使用的是Vue 1.0版本中的 .sync ...
    99+
    2022-10-19
    vue
  • 聊聊Vue中如何实现数据双向绑定
    在我们使用vue的时候,当数据发生了改变,界面也会跟着更新,但这并不是理所当然的,我们修改数据的时候vue是如何监听数据的改变以及当数据发生改变的时候vue如何让界面刷新的?当我们修改数据的时候vue是通过es5中的Object.defin...
    99+
    2022-11-24
    Vue vue.js
  • proxy怎么实现数据的双向绑定
    本篇内容介绍了“proxy怎么实现数据的双向绑定”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!写在前面随着 vue3.x 的消息越来越多,p...
    99+
    2023-06-03
  • VUE-Table中如何绑定Input通过render实现双向绑定数据
    这篇文章将为大家详细讲解有关VUE-Table中如何绑定Input通过render实现双向绑定数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果HTML的Table&...
    99+
    2022-10-19
    vue input render
  • Vue如何实现双向绑定
    这篇文章主要介绍Vue如何实现双向绑定,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!原理当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍...
    99+
    2022-10-19
    vue
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作