当前位置: 首页 > news >正文

Vue核心思想:数据驱动、组件化

1.数据驱动

DOM是数据的一种自然映射。

传统的前端数据交互是用Ajax从服务端获取数据,然后操作DOM来改变视图;或者前端交互要改变数据时,又要再来一次上述步骤,而手动操作DOM是一个繁琐的过程且易出错。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它让开发者省去了操作DOM的过程,只需要改变数据。Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射。 Vue还会对操作进行监听,当视图发生改变时,vue监听到这些变化,从而改变数据,这样就形成了数据的双向绑定。

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

数据响应原理

数据(model)改变驱动视图(view)自动更新。


2064e45a3844353f4705584437161a8dfb46e69e

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。 每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

2.组件化

扩展HTML元素,封装可重用的代码。每一个组件都对应一个ViewModel。页面上每个独立的可视/可交互区域都可以视为一个组件。每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就进维护。页面是组件的容器,组件可以嵌套自由组合形成完整的页面。

Tips

在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?

shim

shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。

polyfill

polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了.

术语polyfill来自于一个家装产品Polyfilla:Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些polyfills会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.es5-shim是一个shim(而不是polyfill)的例子,它在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在Node.js上和在浏览器上有完全相同的表现(译者注:因为它能在Node.js上使用,不光浏览器上,所以它不是polyfill).




原文发布时间为:2018年07月02日
原文作者:blacker2018
本文来源:  掘金  如需转载请联系原作者

相关文章:

  • powershell入门教程-v0.3版
  • BZOJ1820:[JSOI2010]Express Service 快递服务(DP)
  • nginx的proxy_cache缓存配置
  • 打包Scala jar 包的正确步骤
  • docker python 配置
  • scala函数和方法的差别
  • 新CIO:Mark Schwartz认为的领先IT
  • 论文笔记:Variational Capsules for Image Analysis and Synthesis
  • 与 TensorFlow 的初次相遇
  • npm怎么配置下包最神速?
  • Docker折腾记: (1)构建yapi容器,从构建发布到可用
  • 新形式下触电新闻如何打造内容安全领域新标杆
  • 3.保安队的日子(下)我当程序员的那些事1
  • python3+selenium入门04-元素定位
  • RocketMQ概述
  • AWS实战 - 利用IAM对S3做访问控制
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • k8s 面向应用开发者的基础命令
  • Quartz初级教程
  • Redux系列x:源码分析
  • spring cloud gateway 源码解析(4)跨域问题处理
  • SQLServer之创建数据库快照
  • 百度地图API标注+时间轴组件
  • 代理模式
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 硬币翻转问题,区间操作
  • 原生 js 实现移动端 Touch 滑动反弹
  • 湖北分布式智能数据采集方法有哪些?
  • ​html.parser --- 简单的 HTML 和 XHTML 解析器​
  • ​力扣解法汇总946-验证栈序列
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • #if #elif #endif
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #LLM入门|Prompt#3.3_存储_Memory
  • $.ajax,axios,fetch三种ajax请求的区别
  • (52)只出现一次的数字III
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (学习日记)2024.04.04:UCOSIII第三十二节:计数信号量实验
  • (转)linux下的时间函数使用
  • (转)微软牛津计划介绍——屌爆了的自然数据处理解决方案(人脸/语音识别,计算机视觉与语言理解)...
  • 、写入Shellcode到注册表上线
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .Net多线程总结
  • ?
  • @JsonFormat与@DateTimeFormat注解的使用