Vue简介_vue简介_橘猫吃不胖~的博客-csdn博客-程序员宅基地

技术标签: Vue  前端  vue.js  javascript  

1 概述

Vue.js 可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API 简洁。

Vue用于构建用户界面的渐进式框架,渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

双向数据绑定:vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。这也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。

组件化:Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

视图、数据和结构的分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

虚拟DOM:用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿,而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

2 Vue热加载

因为vue的双向数据绑定特性以及技术的成形,实现了项目的热加载,改完页面代码能立即在浏览器方面显示效果,提高开发效率。

3 Vue的双向数据绑定的原理

Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
在这里插入图片描述
Observer数据监听器:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。

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

Watcher订阅者: 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。

Dep消息订阅器:内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_46612221/article/details/123558814

智能推荐

索引+事务_唯一键索引冲突是inster时产生的还是commit的时候-程序员宅基地

文章浏览阅读296次。这里写目录标题事务的ACID特性数据库的事务是什么?隔离性(Isolation)概念说明脏读可重复读不可重复读:一个事务A,不同时刻读同一数据可能不一样幻读:事务A,B同时Insert,B先提交,A没有察觉InnoDB支持的事务隔离级别MySQL 中执行事务1.读未提交:不加锁2.读提交:解决update/inerst引入的脏读,无法做到可重复读3.可重复读:解决update引入的不可重复读,不能解决Insert引入的幻读总结:MySQL 中是如何实现事务隔离的:可重复读可重复读——多版本——针对一条事务可_唯一键索引冲突是inster时产生的还是commit的时候

QT5.11 for mac使用教程_qt for mac生成的.app应用怎么变成非.app应用-程序员宅基地

文章浏览阅读2.8k次。qt介绍 qt是一套完整到跨平台解决方案古老但高效。主要是用c++语言 qt 有自己的sdk以及编辑器,就像vs一样。到官网下载最新到qt版本。安装打包一篇比较解决问题的打包文章 还有这个 1,将依赖库添加到导出到releaseapp中。也就是说releaseapp默认没有依赖库。 命令: ./Qt安装目录/clang_64/bin/macdeployqt re..._qt for mac生成的.app应用怎么变成非.app应用

[导入]《中国式青春》原始硬盘版[今何在]-程序员宅基地

文章浏览阅读76次。没有人会想到,地球的命运,会因为十二个小时而改变。当氪星球面临毁灭,他们把这个孩子装入太空舱,送向宇宙。这小小的太空舱在宇宙中漂流,穿越一个又一个星云,那在宇宙中飘动了万年的光流风暴和物质云把这个孩子他推向他的终点,太阳系——地球——北美洲——美国——堪萨斯州——莫维尔小镇。如果一切都没有偏差,如果每一颗恒星的引力都恰到好处,他会变成美国英雄、传奇的超人。但是,宇宙间一颗计算外的只有三万之分一立方..._中国式青春今何在下载

MFC3 基本对话框的使用(三) 滑块与进度条_setticfreq-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏16次。要求:将滑块与编辑框、进度条相连接。调整滑块位置同时显示滑块当前对应数值,达到设定要求时改变进度条的进度。一、界面设计滑块是slider control,进度条是progress control对于三个滑块,修改属性:对于三个示例编辑框,修改属性:二、添加变量三、初始化滑块和进度条在Dlg.cpp中找到初始化函数BOOL COOPEx3Dlg::OnI..._setticfreq

240320俄罗斯方块java,JAVA游戏编程之三----j2me 手机游戏入门开发--俄罗斯方块_2-程序员宅基地

文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏

在线电影院售票平台(源码+开题报告)-程序员宅基地

文章浏览阅读779次,点赞14次,收藏19次。然后,实现系统的数据管理和服务功能,包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外,随着在线视频平台的兴起,越来越多的人选择在线观看电影,这对传统电影院产生了巨大的冲击。研究意义: 开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题,提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台,同时也为电影院和电影制作方提供有效的工具。

随便推点

Apache Lucene 8.0.0 发布,Java 全文搜索引擎-程序员宅基地

文章浏览阅读239次。开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> Lucene PMC 宣布推出 Ap..._lucene 8.0.0

java趣事_【趣事】Java程序员最年轻,C++程序员最年老-程序员宅基地

文章浏览阅读87次。原标题:【趣事】Java程序员最年轻,C++程序员最年老说起我们对编程世界现有的刻板印象,你一定听说过类似于没有人喜欢用Java编码或者使用C ++都是老人家,等等这样的话。为了分析这些刻板印象背后的真相,Trestle Technology的数据工程师写了一个工具。不知道你有没有听说过微软的Project Oxford,它的Face API可以检测图像中的人脸,并检测这个人是否在笑,他/她的性别..._胡须程序

用什么软件测试内存条稳定,使用内存条检测工具监测内存稳定性,内存条检测工具有哪些...-程序员宅基地

文章浏览阅读1.2w次。内存从某种意义上来说对于电脑的运行会产生着基础性的影响,所以我们需要经常的检测一下我们电脑的稳定性,那么下载一款内存条监测工具对我们来说就非常的有必要了,现在的内存条检测工具有很多,那么我们应该如何选择一款合适的内存条监测工具呢,接下来就为大家介绍一下。【鲁大师】这是一款综合的电脑检测软件,不仅仅可以对我们电脑内存当中的内存进行检测,还可以对我们的电脑系统的方方面面都进行监测,比如说我们的内存占比..._怎么测试内存稳定性

Harmonyos 自定义下拉列表框(select)_harmonyos 下拉列表-程序员宅基地

文章浏览阅读7.8k次。自定义一个下拉列表框,当这个功能有效时,点击可弹出下拉框,选中某个选项后,在左边功能名称下面显示选项值,右边的箭头替换成自定义图标,例如手法功能;当功能无效时,置灰,如力度功能;具体示例如下:代码如下:index.hml<!--手法无效时--><div class="fun-grid-item" if="{{manualInvalid}}"> <div class="grid-item-parent-ver._harmonyos 下拉列表

VBA入门到进阶常用知识代码总结44_msofalse-程序员宅基地

文章浏览阅读1k次。第44集 图片与图形处理198、 Shape对象的类型和属性该对象代表工作表或图形工作表上的所有图形,它是sheets和chart的子对象(属性)。Sheet1.ShapesSub t2()On Error Resume NextDim ms As Shapek = 1For Each ms In Sheet1.Shapesk = k + 1Cells(k, 1) = ms.Na..._msofalse

公司个人年终工作总结【10篇】_csdn 公司 年终终结-程序员宅基地

文章浏览阅读1.2k次。公司个人年终工作总结1 20__年即将过去,在公司领导的悉心关怀下和同事们的帮助指导下,结合我自身的努力,在工作、学习等各方面都取得了长足的进步,尤其是在保险理赔专业知识和技能培养方面的成熟,使我成为一名合格的车险查勘定损员。随着工作岗位的调整,我已经成长为为一名能够独立工作、业务熟练的前台工作人员。现将一年来的工作情况向公司领导总结汇报如下: 一、加强理论学习,注重个人素质提高 加强自身业务学习,争做理赔标兵。在日常的工作学习中,我坚持学习更多的保险知识和业务技能,在老同志的“传帮带”下,不断加强个_csdn 公司 年终终结

推荐文章

热门文章

相关标签