react和vue哪个比较好(Vue仿今日头条实例详解)

%title插图%num

react和vue哪个比较好

React和 Vue 以及是经常上 PK 台被进行比较的前端框架,我这边从以下几个方面对两者做一个比较,如果其中有理解不当的大家也可以随时纠正。

学习曲线

React陡峭的学习曲线是一直被诟病的一。Vue 标榜的是一个渐进式的JavaScript框架,大分发这普遍会认为Vue 的学习曲线低于React,并且相较于React有更丰富的中文支持(主要是VUE发这是中国人,导致了很多我国的程序员会关注此框架)。但是,随着学习内容的深入,当需要发复杂的 Web 应用程序时,花哨灵活的指令和逻辑反而会让人觉得 Vue 比 React 更难掌控。简单来说,React是一个陡坡比较难上手,Vue是一个缓坡很容易上手,但是最终的高度两者差不多。

技术社区

React 是近十年的源项目,因此它拥有成熟的技术社区支持。Vue尽管这几年势头很猛,但是要想建立一套完善的生态系统还需要一些时间来打磨。

灵活性

这也是争议最大的地方。React 专注于 UI,所以在构建 UI 组件时可以从它那里获得很好的支持。Vue 作为一个渐进式框架,只允许使用最基本的功能来构建应用程序,但同时也提供了一些箱即用的东西:如,用于状态管理的 Vuex、用于应用程序 URL 管理的 Vue Router、Vue 服务器端渲染。

Vue 剥离了许多元素,相比之下 React 更加面。但如果您正在寻找一种精简、新颖、简单易学、样板代码少、高性能、灵活且完整的前端框架,Vue 更加适合;当然,如果您打算使用低版本 jQuery 代码,Vue 也同样支持。

React 的灵活性则更多依赖于其背后强大的技术社区,在 Facebook 的强力支撑下( Facebook 的 React 团队包括了 10 名专职发人员),提供了更多工具、UI 库和教程。

综上所述,我个人觉得在没有实际应用场景的况下,很难比较出孰优孰劣,没有最好的框架,只有最适合的框架。如果是短期小项目,建议使用 Vue 可以快速敏捷发(上手快,控件占用小,性能较好)。如果是移动端跨平台的应用推荐 React( React Native 已经比较成熟而 Vue 的 Weex 仍在不断发)。

vue是什么软件

vue官网说:Vue.js(读音 /vju?/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 1、易用 已经会了 HTML、CSS、JavaScript,即可阅读指南开始构建应用! 2、灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。 3、高效 虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。 (1) 提供一种方便的工具,使得开发效率得到保证 (2) 保证最小化的DOM操作,使得执行效率得到保证 扩展资料 1、Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。 2、Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 3、Vue可以做从简单到复杂的前端单页应用,随处可见的Web前端都可以用Vue来开发。而且Vue上手速度快、功能强大,且提供了非常好用的脚手架vue-cli,很简单就可以构建并让自己的项目跑起来。 参考资料 百度百科-Vue.js

Vue仿今日头条实例详解

前言

vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了

因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在 Easy Mock 自己生成API
也可直接登陆我这项目的Easy Mock账号密码:

账号: vue-toutiao
密码: 123456

如果你想修改接口,请copy一份在修改

如果你想后台接口也自己开发的话。可以阅读我这篇博客 Vue + Node + Mongodb 开发一个完整博客流程

技术栈:

vue + webpack + vuex + axios

结构:

build: webpack配置 config: 项目配置参数 src assets: 静态资源文件,存放图片啥的 components: 常用组件。例如 弹窗 等等。。。 directive: 常用指令封装 router: 路由表 store: 状态管理 vuex styles: 样式文件 utils: 常用工具类封装 views: 视图页面 static: 静态文件: 存放 favicon.ico 等等 此项目用到了 DllPlugin 进行打包处理,所有启动该项目时记得,先执行一次该脚本命令生成配置

效果演示:

几个常用的知识点

1. 路由懒加载

{ path: '/development', name: 'development', component: (resolve) => { require(['../views/development.vue'], resolve) } }

const _import_ = file => () => import('views/' + file + '.vue') { path: '/development', name: 'development', component: _import_('development') }

2. 登陆拦截

通过路由的 beforeEach 钩子函数来判断是否需要登陆

// 如:系统设置需要登陆 { path: '/system', name: '系统设置', meta: { login: true }, component: _import_('System/index') } router.beforeEach((to, from, next) => { if (to.meta.login) { //判断前往的界面是否需要登陆 if (store.state.user.user.name) { // 是否已经登陆 next() }else{ Vue.prototype.$alert('请先登录!') .then( () => { store.state.user.isLogin = true }) } }else{ if (to.meta.page) store.state.app.pageLoading = true next() } })

3. 动画切换

通过检测设置在 Router上的animate属性 来判断它做什么样的切换动画

Router.prototype.animate = 0 // 获取每个路由meta上面的slide 来判断它做什么动画 { path: '/system', name: '系统设置', meta: { slide: 1 }, component: _import_('System/index') } watch: { $route (to, from) { /* 0: 不做动画 1: 左切换 2: 右切换 3: 上切换 4: 下切换 ... */ let animate = this.$router.animate || to.meta.slide if (!animate) { this.animate = '' }else{ this.animate = animate === 1 ? 'slide-left' : animate === 2 ? 'slide-right' : animate === 3 ? 'slide-top' : animate === 4 ? 'slide-bottom' : '' } this.$router.animate = 0 } }

4. 视频播放

因为在IOS上 无法隐藏video的controls ,所以我们可以隐藏video,通过绘制canvas来达到播放视频的效果

5. icon采用的是 阿里巴巴矢量图

6. mock.js

7. Easy Mock

代码实例:https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao

vuetify会适配移动端吗?

vuetify会适配移动端的。