Vue中的数据驱动解释

目录
  • Vue中数据驱动
  • 数据驱动解释
  • Vue数据驱动
    • 简单说说defineProperty

Vue中数据驱动

使用过Vue框架的小伙伴知道在Vue中有这么一个玩意：v-model。 这个玩意就用到了Vue中的数据驱动（数据双向绑定）。

那么，什么是数据驱动呢？

数据驱动解释

数据驱动是vue.js最大的特点。在vue.js中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。

再通俗一点就是，你在这里改变了一下数据，在页面其他使用该数据的地方也会随之发生改变，而我们开发者只是在这里改变了一下数据，并没有直接操作DOM去改变其他地方的数据。

那Vue是怎么实现的这一效果呢？

Vue数据驱动

其实这个原理有点像那个中间人，举个例子吧，你的领导有一天改动一条通知（数据发生了改变）：今天不上班，然后被某个人听见了（监听），这个人就把领导的消息传递给下面的程序员，下面的程序员一听到这个消息，马上就准备收拾东西回家休息了（页面的元素随之改变）。

大概就是下面这张图：

那现在摆在我们面前的就有两个问题，这两个箭头是如何实现的呢？

首先我们看看数据驱动是如何监听数据发生变化的？

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

这是vue文档里面的话，意思就是vue为data里面的属性（也就是我们的数据），都添加了getter/setter。这样就可以监听到数据的变化了。是不是还有有点蒙？没关系，其实就是利用defineProperty方法来实现监听的。

简单说说defineProperty

可能有小伙伴不太熟悉这个方法，我在这简单的提一下：

  • 语法：Object.defineProperty(obj,property,descriptor)
  • 参数：obj 绑定属性的目标对象 property 绑定的属性名 descriptor 属性描述（配置项）

下面我列出一些常见的属性配置项：

  • value:设置属性的默认值
  • writable:设置属性是否可以被修改
  • enumerable：设置属性是否可以被遍历
  • configurable：设置属性是否可以被编辑（包括删除等等）
  • get：获取属性值
  • set：设置属性值

其中set与get就是我们要用到的属性：

举个例子：

 let data = {
     a:1;
 };
 Object.defineProperty(data,a,{
     get:()=>{
         console.log('获取数据啦');
     },
     set:(value)=>{
         console.log('设置新数据啦',value);
     }
 })

通过这个方法就可以实现vue中数据驱动对数据的监听，vue如何对视图进行更新呢？这就用到了vue中的虚拟DOM。我们下集聊聊这个Vue中的虚拟DOM。

以上就是Vue中的数据驱动解释的详细内容，更多关于Vue 数据驱动的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解VueJS 数据驱动和依赖追踪分析

    详解VueJS 数据驱动和依赖追踪分析

    之前关于 Vue 数据绑定原理的一点分析,最近需要回顾,就顺便发到随笔上了 在之前实现一个自己的Mvvm中,用 setter 来观测model,将界面上所有的 viewModel 绑定到 model 上. 当model改变,更新所有的viewModel,将新值渲染到界面上 .同时监听界面上通过v-model 绑定的所有 input,并通过 addEventListener事件将新值更新到 model 上,以此来完成双向绑定 . 但是那段程序除了用来理解 defineProperty,其它一文不值

  • Vue数据驱动表单渲染,轻松搞定form表单

    Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成

  • 浅谈vuejs实现数据驱动视图原理

    浅谈vuejs实现数据驱动视图原理

    什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元素的文本进行是和否的切换.在jquery刀耕火种的年代中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修改该dom对象的文案值. 而对于vuejs实现这个功能的流程,只需要在button元素上指明事件,同时声明对应文案的属性,点击

  • 详解Vue数据驱动原理

    详解Vue数据驱动原理

    前言 Vue区别于传统的JS库,例如JQuery,其中一个最大的特点就是不用手动去操作DOM,只需要对数据进行变更之后,视图也会随之更新. 比如你想修改div#app里的内容: /// JQuery <div id="app"></div> <script> $('#app').text('lxb') </script> <template> <div id="app">{{ message }

  • Vue中的数据驱动解释

    目录 Vue中数据驱动 数据驱动解释 Vue数据驱动 简单说说defineProperty Vue中数据驱动 使用过Vue框架的小伙伴知道在Vue中有这么一个玩意:v-model. 这个玩意就用到了Vue中的数据驱动(数据双向绑定). 那么,什么是数据驱动呢? 数据驱动解释 数据驱动是vue.js最大的特点.在vue.js中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 再通俗一点就是,你在这里改变了一下数据,在页面其他使用该数据的地方也会随之

  • 简单理解Vue中的nextTick方法

    简单理解Vue中的nextTick方法

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q

  • 一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick . 一.示例 先来一个示例了解下关于Vue中的DOM更新以及 nextTick 的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if=&quo

  • vue中组件通信的八种方式（值得收藏！）

    vue中组件通信的八种方式（值得收藏！）

    前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

  • 在Vue中使用echarts的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • Vue中之nextTick函数源码分析详解

    1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&

  • 在vue中封装可复用的组件方法

    本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • vue中的router-view组件的使用教程

    开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view> <template> <div class="navbar"> &l

  • Vue中使用sass实现换肤功能

    先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样

随机推荐