Vue框架原理及简单应用(二)

简介: Vue框架原理及简单应用(二)

三、VUE组件库


1、vue组件库


若vue2.0作为前端框架 可以选择饿了么推出的Element组件

https://github.com/mengfanxiao/element.git


vue、React、Angular1对比


a、性能 对比


Angular1中,在scope作用域中每一次数据变化,会触发watcher的重新计算,angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。在digest流程里面,会从rootscope开始遍历, 检查所有的watcher。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次


Vue则没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,数据的变化都是的,除非数据之间有明确的依赖关系


vue开发团队建立了一个简单的对比性能的项目

负责渲染10000个列表项100次。Vue官方将每一个参照项目都分别运行 20 次并取最好的结果结果如下图:


image.png


由此可见,Vue的性能是远好于Angular1,并且稍微优于React的。


b、社区拓展对比


Angular1的背后是Google,所以社区基础是不需要担心的,从Tutorial到StackOverflow的问题数量都可以反映出生态系统很完整。Angular1之后的2.0版本几乎是一个推翻重做的框架,对于使用了1.X版本的项目,想要平滑的升级过渡到2.0版本应该是非常困难的。现在Angular2的线上应用数量还不算太多,主流编码还是以1.X版本居多。这个版本化巨大的差异也间接影响到了开发者对于angular的信心。


Vue和React都有强大的社区支持。React有状态管理库Flux、ReduxVue,相应的,Vue有vuex。Vue 和 React 都提供了强大的路由库来应对大型应用。然而Vue的路由库和状态管理库都是由官方维护支持的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。此外,Vue 提供了Vue-cli 脚手架,包括了Webpack,Browserify,甚至路由库,能让你非常容易地构建项目


c、学习陡峭度对比


在指令与组件方面,Vue中将指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元,有自己的视图和数据逻辑。在 Angular1 中两者有不少相混的地方。在API与框架设计方面,angular1都比vue要复杂的多。就个人感觉而言,angular1和React的学习曲线会相对陡峭一些,而vue的编码方式会更趋近于前端开发者的编程习惯。


d、渲染能力对比


ReactNative能使你用相同的组件模型编写有本地渲染能力的 APP(iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。为了弥补这方面的不足,在2016年9月举办的JSConf2016期间,vue.js的作者尤雨溪宣布加盟Weex团队担任技术顾问,双方将进行更紧密的合作,共建开发生态圈。Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。在此之后,在 Weex 的帮助下,使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。


e、vue的缺点


vue的影响力相比于angular和react还差的很远


2、vue全家桶及项目架构


Vue有著名的全家桶系列,包含了

vue-router(http://router.vuejs.org),

vuex(http://vuex.vuejs.org),

vue-resource(https://github.com/pagekit/vue-resource)。

再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。


a、vue-router路由


推荐使用npm工具来安装vue-router

npm install vue-router


导入模块


import Vue from’vue’

importRouter from’vue-router’

Vue.use(Router); // 需要import Vue和Router,不然会报错undefined


导入自定义模块(组件)


import Goods from ‘@/components/goods/goods’;


通过const router= new VueRouter()来定义一个路由,并传入对应的配置,包括路径path和组件components。


image.png


在使用new Vue来创建和挂载vue根实例的时候,


image.png


记得要通过 router配置参数注入路由,即在router中export出来的路由对象,从而让整个应用都有路由功能。


image.png


b、vuex状态管理


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。


它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化


Vuex 的四个核心概念分别是


  • The state tree:Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

  • Getters:用来从 store 获取 Vue 组件数据。

  • Mutators:事件处理器用来驱动状态的变化。


  • Actions:可以给组件使用的函数,以此用来驱动事件处理器 mutations

 Vuex和简单的全局对象是不同的,当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会高效的更新。并且,改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化,一定伴随着mutation的提交


vuex例子:


image.png


通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更


image.png


c、Vue-resource


Vue-resource有体积小,支持IE9以上的浏览器,支持promise特性的特点


npm install vue-resource


image.png


vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:


· get(url,[options])

· head(url,[options])

· delete(url,[options])

· jsonp(url,[options])

· post(url,[body], [options])

· put(url, [body],[options])

· patch(url,[body], [options])


3、vue项目的大概结构


image.png


  • components/文件夹用来存放Vue 组件。个人建议,把每一个组件中使用到的image图片放置到对应的组件子文件目录下,便于统一的管理


  • vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations)


  • router/文件夹存放的是跟vue-router相关的路由配置项


  • build/文件是 webpack 的打包编译配置文件


  • static/文件夹存放一些静态的、较少变动的image或者css文件


  • config/文件夹存放的是一些配置项,比如服务器访问的端口配置等


  • dist/该文件夹一开始是不存在,在我们的项目经过 build 之后才会产出


  • App.vue根组件,所有的子组件都将在这里被引用


  • index.html整个项目的入口文件,将会引用我们的根组件 App.vue


  • main.js入口文件的 js 逻辑,在webpack 打包之后将被注入到 index.html 中


4、vue中less的应用


image.png


在vue项目中一样可以使用less预编译,只是需要使用npm安装less-loader插件。安装完成后,在vue中的css模块进行简单的配置,这样就可以直接使用less来编写样式表了。在打包编译的时候,会自动生成对应的css样式。


a、计算属性


购物车结算场景,用户选中商品的总金额是根据商品数量、选中商品种类数

和商品单价来变化的


image.png


image.png


只需要使用{{totalPrice}}这个计算属性就可以来表示最终的商品总额


不需要关注这个变量的数值变化,totalPrice这个变量的逻辑写在对应的computed计算属性中

计算属性是基于它的依赖进行缓存的


计算属性只有在它的相关依赖发生变化时才会重新计算求值


在本例中,只有当选择商品的价格price和数量count发生变化时,这个计算属性totalPrice才会重新计算新的值。这就意味着,只要totalPrice这个值没有发生变化,多次访问该计算属性会立即返回之前的计算结果,而不必再次执行计算


b、模版语法


允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据


所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析


Vue的模版语法包括了使用双大括号插入文本、使用v-html插入纯HTML内容、使用v-bind插入对象、类似angular的v-if、v-show、v-for指令、以及过滤器等等


c、组件化


组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用。


组件实例的作用域是孤立的。


这意味着不能在子组件的模板内直接引用父组件的数据。


要让子组件使用父组件的数据,我们需要通过子组件的props选项。


如本例所示,子组件star要显式的使用props选项声明它期待获得的数据。

在这里就是指的“size”和“score”两个变量。


我们可以通过父级给子组件star传入大小和数值这两个对象,来实现对子组件的定制化。


image.png


image.png


d、过渡效果


Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,可以用简单的几行代码实现酷炫的过渡效果。


Vue 提供了 transition 的封装组件,在使用v-if、v-show等方法使得transition内部dom元素发生变化时,可以给任何元素和组件添加 entering/leaving 过渡。


当v-show中内容发生变化时,transition组件中的元素会发生状态的改变,在应用了transition封装后,Vue会自动识别目标元素是否应用了CSS过渡效果动画,如果有,会在合适的时机添加 entering/leaving的class来实现该过渡效果。


需要将想实现过渡效果的元素放在transition标签中包裹,通过name=“slide-fade”来声明过渡效果名称,并在对应的vue文件中添加过渡效果的css样式,这样就可以简单的完成该元素的过渡效果


image.png


image.png

相关文章
|
12天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
118 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
555 0
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
254 1
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
108 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
241 1
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
765 4
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
544 77
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍

热门文章

最新文章