精华内容
下载资源
问答
  • 简单描述 vue 和其他框架的区别

    千次阅读 2021-06-17 13:15:19
    现在vue已经是前端主流的框架了,采用MVVM模式,虚拟dom,diff算法,数据双向绑定,提供响应式组件化的视图组件。将注意力集中保持在核心库。体积小,性能好,生态系统庞大,发展也很不错。相对应的还有React,...

    现在vue已经是前端主流的框架了,采用MVVM模式,虚拟dom,diff算法,数据双向绑定,提供响应式和组件化的视图组件。将注意力集中保持在核心库。体积小,性能好,生态系统庞大,发展也很不错。相对应的还有React,Angular,Riot,Ember等框架,那么为什么要推荐使用vue呢,他较于其他框架优点是什么呢? 更强大的React跟他有什么区别呢?

    vue

    vue的优点:

    Vue学习简单, API简单,模式拥抱传统的web,入手快,适合快速开发

    社区 和官网都在更新发展相对于的功能,React的JSX,Angular的TS等都可以支持,Angular的watcher慢等问题在vue中都得到了相应的解决

    性能更好,体积更小

    构建工具webpack等有默认配置,可以让你专注于应用,但同时又很灵活,可以根据你的需求配置

    基于依赖追踪的观察系统并且异步队列更新,所有数据变化都是独立触发的,除非他们之间有明确的依赖关系

    组件指令,生命周期,数据流都更清楚

    在普通js对象上建立响应,提供自动化计算属性

    和React比较

    某个组件状态发生变化时,以该组件为根,重新渲染整个组件子树,(而vue会自动追踪)

    css 也在JSX中,vue的模板形式比jsx读写起来更自然,提高开发效率,因为你更熟悉传统的web写法。而且vue的v-on等修饰符的功能React需要很多代码实现

    React 学习更陡峭,vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的,而React则给社区维护,生态系统相对分散,但是React的生态更繁荣。

    和Angular.js比较

    复杂性: VUE在api与设计上更简单,可以快速学习并投入开发

    灵活性和模块化:Vue有vuecli可以快速构建。配置默认,不需要花费太多的时间在配置上,你可以专注于应用本身。同时提供了根据实际需求调整每个工具配置的灵活性,

    数据绑定:Vue在不同组件内强制使用单向数据流,这使得数据流更加清晰易懂

    指令和组件:vue的指令和组件分的更清晰

    需要重量级别的polyfills来帮助,性能下降

    浏览器本身不支持这些功能

    computed方法不灵活

    vue只能支持到IE9,(但是他可以支持到IE6)

    发展缓慢,略显老旧,系统缺少完备的生命周期事件方法

    接口设计理念不同

    vue在普通js对象上建立响应,提供自动化计算属性,(而Ember是在Ember对象上手工为计算属性声明依赖)

    vue的模板语法可以用全功能的js表达式,(而handlebars的语法和帮助函数很受限)

    性能上,vue比ember好很多,vue能自动批量更新,(而Ember需手动管理)

    vue性能更好(riot使用遍历DOM树)

    vue有更多的成熟工具支持比如webpack,(riot构建靠社区)

    大白话就是:

    vue 和其他框架相比较

    React:规模上学习曲线陡峭,性能上需手动实现方法避免不必要的子组件的渲染,HTML上要使用JSX 不如传统的HTML,CSS入手快,甚至现在css都要在jsx中。对新手或者想要快速开发一个项目的人员不友好,还要去学习JSX,想把原来项目迁移成新库的话也不是很友好。而且vue中的v-on等指令在react中需要大量代码实现。React的跨平台很强大,但是vue现在也有和Weex合作,vue也支持JSX快速构建项目等React有的功能。

    Angular1:API复杂,灵活度不如VUE,指令组件划分不清晰,watcher多时性能越来越差

    Angular2:学习成本大,必须要用TS,体积要比vue大,中小型项目不需要,不能快速的开发项目,要先学习

    Rnockout 发展缓慢

    Ember需要手动

    Riot 构建工具不行

    Polymer需要额外的工具,computed方法不灵活

    下面是各个框架详细的介绍

    一、React

    1. 运行时性能

    Vue应用中, 组件的依赖是在渲染过程中自动追踪的,所以系统精准的知道哪个组件确实需要被重新渲染,而React对于不必要重渲染的子组件时需要手动实现shouldComponentUpdate方法

    2. HTML&&css

    css也用JSX处理,并不是每个开发者都喜欢,vue也支持JSX,迁移的话vue更贴合传统的写法,这样新人参与更快

    3. 规模

    React 学习更陡峭,vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的,而React则给社区维护,生态系统相对分散,但是React的生态更繁荣。

    React的create-react-app 有一些局限性

    4. 原生渲染

    React Native 能同时跨多平台开发。vue 在和weex(阿里)合作,但成熟度不如weex

    5. MobX

    Mbox+react 月等于Vue

    6. Preact 和其他类React库

    类 React 的库们往往尽可能地与 React 共享 API和生态。但生态更小。因为这些库无法 100% 兼容 React生态中的全部,部分工具和辅助库也可能无法使用。或者即使看上去能工作,但也有可能随时发生不兼容,除非你用的这个类 React 库官方与 React 保持严格一致。

    二、AngularJS(Angular1)

    2009年诞生的JS框架,后被谷歌收购。核心功能:MVC,模块化,自动化双向数据绑定,语义化标签,依赖注入等。是以一个js文件形式发布的,可以通过script标签添加到网页中,vue早起开发的灵感来源

    1.指令和组件

    每件事情都是指令来做的,组件只是一种特殊的指令.vue 中指令和组件分的更清楚,指令只封装DOM操作,而组件代表一个自给自足的独立单元

    2.灵活性

    Angular必须遵守指定的规则,灵活性差

    3.复杂性

    API和设计比VUE复杂一些

    4.运行时性能

    watcher越多,就越慢,因为作用域内每一次变化,所有的watch都要重新计算。并且如果一些watcher触发另一个更新,脏检查循环可能要运行多次,要用深奥的技术,解决脏检查循环的问题,有时没有简单的办法来优化有大量watcher的作用域

    三、Angular(Angular2)

    1.TS

    必须用TypeScript开发,在中小型项目中,TS并不是所有人都想用的。而Vue可以用也可以不用

    2.运行时性能

    运行时候性能都很快

    3.体积

    虽然体积在使用了tree-shanking和AOT后已经减小了许多, 但是还是比vue大

    4.灵活性

    Vue更灵活

    5.学习曲线

    学习曲线陡峭,API很大,要理解很多概念才能有效的工作。

    设计目标是针对大型的复杂应用,但是这样对一些经验不丰富的开发者非常的不友好

    以下都是一些小众的框架

    四、Polymer.js:

    谷歌2013年发布的一个新的webUI框架。和vue比较相似,vue的灵感来源之一

    缺点

    - computed方法的实现不灵活

    - 基于web components 标准之上,需要重量级的polyfills来帮助工作,那么性能就会下降

    - 浏览器本身不支持这些功能,而vue支持IE9的情况下不需要依赖polyfills来工作

    复制代码

    五、Knockout.js

    微软出版的MVVM模型领域内的先驱,兼容IE6,核心功能:属性监控和依赖追踪,声明式绑定, 模板机制

    缺点:

    - 发展缓慢

    - 缺少完备的生命周期事件

    复制代码

    六、Riot.js

    MVP(模型-视图-呈现)开源客户端框架,特点体积小,不足1kb,但可以构建大规模的web应用程序,现在是Riot3.8版本,已经趋于稳定,可以用在生产环境

    缺点:

    - 国内相关资料很少,所以更适合定制化比较高的项目

    - 微型场景更适合Riot,不想要太多的外部依赖,又需要组件化,数据驱动等现代化框架的能力

    - 好用的Riot构建工具并不多

    复制代码

    七、Ember.js

    是一个MVC模式的开源的js客户端框架,2011年12月发布,属于社区开发者,文档很友好,ember-cli快速构建,提供了大量的约定,只要按照约定,就会变得非常高效

    缺点:

    - 学习成本大,而且并不灵活

    - 页面渲染慢

    - 框架体积大

    复制代码

    展开全文
  • 区别:1、vue中的数据由data属性在Vue对象中进行管理,...一、Vue和React框架的不同点模板jsx、状态管理、组件嵌套条件渲染、列表渲染、组件间的通信传值、路由管理1、模板jsxvue:Vue.js 把html,css,js组合...

    区别:1、vue中的数据由data属性在Vue对象中进行管理,react中的数据由state属性管理;2、vue通过slot插槽进行嵌套传递,react通过“props.children”的方式将标签内的部分传递给子组件。

    a46106e296c096f2b9bc5df07ba75e49.png

    一、Vue和React框架的不同点模板和jsx、状态管理、组件嵌套条件渲染、列表渲染、组件间的通信传值、路由管理

    1、模板和jsx

    vue:Vue.js 把html,css,js组合到一起,用各自的处理方式,使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

    d09572888a4955f6059d94a2631f581e.png

    react:HTML 语言直接写在 JavaScript 语言之中,不加任何引号,简单说这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。

    473a0077f1069d08ce42079f10018d07.png

    2、状态管理

    vue:数据由data属性在Vue对象中进行管理。

    react:数据由state属性管理,但不能直接改变state的状态,需要通过setState()去更新。

    273ebd47531e2269d2c08879d97f71b0.png

    3、组件嵌套

    vue:通过slot插槽进行嵌套传递

    父组件嵌套子组件wrap

    89ffbb5f73ee07337d82165b612f0fcc.png

    子组件wrap

    bf9a3078cc86ae195aa4ee8a59d92d52.png

    渲染结果

    ad3b416ccbae25fd5120c3740789b39f.png

    react:通过props.children的方式将标签内的部分传递给子组件

    父组件嵌套子组件wrap

    11a1c2c86fac555aaae02e4571befe8e.png

    子组件wrap

    5951e5070e9b96b54e3c31c2065923f7.png

    4、条件渲染和列表渲染

    vue条件渲染:v-if、v-show条件渲染一组数。

    vue列表渲染:v-for一组数进行列表渲染。

    f65f5c479922ad730150264e02750c29.png

    react条件渲染:使用逻辑运算&& || 、三目运算符来创建表示当前状态的元素。

    react列表渲染:通过使用{}在JSX内构建一个元素集合,使用map()方法循遍历数组。

    759418d9d5f18b6d85cc98bddf62b1d3.png

    5、组件间的通信传值

    vue:

    父传子:通过父组件绑定自定义属性(或通过v-bind绑定动态属性),子组件使用 props 选项时显式的声明props,以便它可以从父组件接收到期望的数据。

    子传父:通过父组件绑定自定义事件,子组件通过this.emit('自定义事件',value)传值。

    非父子:可以使用一个空的 Vue 实例绑定在Vue实例的原型上作为一个事件总线中心(vue.prototype.eventBus = new Vue()),用emit触发事件,on监听事件。

    父组件one

    b2053ce1611f7ed9965762bb9483c942.png

    子组件one-one

    9a87ca4a6923522dd9a21e1570718e98.png

    react:

    父传子:通props属性进行传递。

    子传父:父组件定义事件,子组件触发父组件中的事件时,通过实参的形式来改变父组件中的数据来通信。

    非父子:嵌套不深的非父子组件可以使共同父组件,嵌套的深可以用redux共享状态。

    父组件

    176b135e5cf5a03ed9922855e0f6a163.png

    子组件

    4cc3e63705431620ab1cf073e09a633f.png

    6、路由管理

    vue-router是全局配置方式,vue-router任何路由组件都会被渲染到位置。

    11fb6e9bb8114824208bc95343f30fb9.png

    0a9e01313a1024020368a3112c2567c8.png

    react-router是全局组件方式,react-router子组件作为children被传入父组件。

    ace3890435aec59acb90b3c15238c754.png

    二、Vue和React框架的相同点

    组件化:React与Vue都鼓励将你的应用分拆成一个个功能明确的模块,这样的组件化使得结构清晰且易复用。

    虚拟Dom:为高效渲染页面,减少性能的消耗,都采取了Virtual Dom。

    配套框架:两个框架都专注于UI层,其他的功能如路由、状态管理(vuex,redux)等都交由同伴框架进行处理。

    构建工具:React可以使用Create React App (CRA),而Vue对应的则是vue-cli。

    更多编程相关知识,请访问:编程教学!!

    展开全文
  • Vue框架和MVVM框架

    2020-12-27 18:20:59
    Vue框架简单案例Mvvm框架MVC框架动态显示信息 简单案例 双向绑定的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <...

    简单案例

    双向绑定的功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue测试</title>
        <script src="bower_components/vue/dist/vue.js"></script>
    </head>
    <body>
    <!--试图-->
    <div id="app">
    <h>VueDemo</h>
    <p  v-text="message">这是一个演示</p>
    <input type="text" v-model="desc">
    <button type="button"  v-on:click="hello">演示</button>
    </div>
    </body>
    <script>
        let app =  new Vue({
            el:"#app",
            data:{
                message:"HelloWorld",
                desc:"Hello Vue"
            },
            methods:{
                hello:function () {
                        console.log("HelloVue");
                        this.message=this.desc;
                }
            }
        })
    </script>
    </html>
    

    Mvvm框架

    • Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信 *
      在这里插入图片描述

    MVC框架

    1. MVC的定义:MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架,我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。

    动态显示信息

    在这里插入图片描述

    展开全文
  • 首先我是用cmd管理员运行的方式创建的vue框架(我的笔记本得需要管理员才能成功,不能直接打开cmd) 1、打开cmd,找到你想创建vue框架的路径 2、手动配置vue,前两个直接安装了,第三个是手动配置 3、我是这样配置...

    首先我是用cmd管理员运行的方式创建的vue框架(我的笔记本得需要管理员才能成功,不能直接打开cmd)
    1、打开cmd,找到你想创建vue框架的路径在这里插入图片描述
    2、手动配置vue,前两个直接安装了,第三个是手动配置
    在这里插入图片描述
    3、我是这样配置的,留了几个常用的(空格是选中或者取消的键,进行下一步是回车键(enter在这里插入图片描述
    4、这样配置 ,直接安装在这里插入图片描述
    5、安装成功的时候是这个样子在这里插入图片描述
    注意:尤其手动配置完以后会出现很多错误,我是断断续续花了两天才搞定
    vue手动配置错误大全

    展开全文
  • vue对比与其他框架

    2021-06-28 05:27:27
    3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是 JavaScript比抖朋要插支一圈不者地语法的扩展。React开发不一定使用 JSX ,但我们建议使用它。5.组件−通过 React构建组件,使得代码更加容易得到复用,...
  • 1. ElementElement,一套为开发者、设计师产品经理准备的基于 Vue 2.0 的桌面端组件库2. iView一套基于 Vue.js 的高质量UI 组件库3. vue-element-adminvue-element-admin是基于 Vue2.0,配合使用 Element UI 组件...
  • 推荐 9 个 VUE3 UI 框架

    2021-09-06 15:01:54
    本文推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。Ant Design Vue官方网站:https://2x.an...
  • 本文推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。Ant Design Vue官方网站:https://2x.an...
  • 基于Vue前端UI框架比较 ...就目前来说用户数量社区活跃度没有vue2高,有一定的学习成本(包括学习ts) 各个UI框架的比较 根据目前市场常用的框架进行初步筛选,入选了4款框架,分别为element-ui, ant-desi
  • 什么是Vue.js框架

    2021-05-08 16:03:03
    前文我们大家分享的是Vue.js简易安装快速入门,本文我们主要大家分享Vue.js框架是什么,为什么要选择它?这篇文章为大家介绍目前前端技术使用的趋势,以及Vue.js的优点适用场景等,具有一定的参考价值,感...
  • Vue是一种用于构建用户界面的渐进式框架,它可以与各种框架或工具结合使用,如果是做PC端应用,选择ElementUI框架最好,做App移动端开发选择AUI或ionIc框架最好。Vue介绍:Vue是一套用于构建用户界面的渐进式框架。...
  • 本文推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。Ant Design Vue官方网站:https://2x.an...
  • vue.js可以什么UI框架搭配使用?下面本篇文章给大家介绍一下vue项目常用的ui框架。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。基于vue的移动端UI框架1.vonic >>>>>>>...
  • 要说目前比较流行的框架,那一定要首选Vue.js。今天给大家来推荐几个基于Vue后端管理的框架。使用这些框架能够发现我们常用的路由、状态,交互等等。这样我们只需要反复用这个代码,再加上自己少量逻辑能轻松完成...
  • 先了解什么是MVX框架模式?MVX框架模式:MVC+MVP+...View通过Controller来Model联系,Controller是ViewModel的协调者,ViewModel不直接联系,基本联系都是单向的。用户通User过控制器Controller来操作模板Mode...
  • vue前端UI框架

    2021-02-25 17:06:29
    vue前端UI框架有:Element、iview、vuetify、vue-strap、cube-ui、buefy、vue-beauty、at-ui、Vue-Blu、vue-storefront、Vux、Mint UI、Vant等等。 相关推荐:《vue.js教程》 vue前端UI框架 一:Element 官网地址:...
  • 少侠,我看你骨骼惊奇 是万中无一的前端开发奇才 弘扬中国编程文化的重任就交给你了 我这里有本《Vue.js框架与Web前端开发从入门到精通》 作者:舒志强(博主本人)
  • vue前端UI框架有:Element、iview、vuetify、vue-strap、cube-ui、buefy、vue-beauty、at-ui、Vue-Blu、vue-storefront、Vux、Mint UI、Vant等等。 相关推荐:《vue.js教程》 vue前端UI框架 一:Element 官网地址:...
  • html和vue框架

    2021-06-10 11:34:30
    Vue框架Element的事件传递broadcastdispatch方法分析前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ......
  • 代码框架——Name.vue 文件目录框架 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 ...
  • Vue3.0后台管理框架

    2021-03-23 10:41:50
    Vue3.0后台管理框架 下载链接: 下载地址 ( https://download.csdn.net/download/qq_38380311/16052343 ) 1.框架目录 2.登录页面 3. 主体页面
  • Vue框架

    千次阅读 2021-02-15 08:39:30
    vue框架是一个渐进式前端框架,可以提高前端开发效率。 渐进式:可以选择性的使用该框架的一个或一些组件,这些组件的使用不需要将框架全部组件都应用;而且 用了这些组件也不要求你的系统全部都使用该框架。 Vue是...
  • vue框架学习入门

    2021-07-25 23:27:38
    vue框架学习起步vue指令axios组件 一套基于js开发的构建用户界面的渐进式框架,简化了Dom操作,响应式数据驱动。 文档网址 Vue.js (vuejs.org) 引入方法 开发环境版本,包含了有帮助的命令行警告,适合学习使用 &...
  • React与当时流行的jQuery,Backbone.jsAngular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML...
  • 前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,项目工期比较紧,页面要美观好看,如果自己封装组件的话用时比较长,使用第三方框架成了不错的选择,在这里我总结了一下常用的vue UI框架,希望对大家...
  • Ant Design of Vue ElementUI iView Vuetify(基于Material Design) BootstrapVue (基于Bootstrap) Vue-element-admin (后台管理系统,搭建中后台项目 cms) Vite (基于下一代,最新浏览器的模块开发,Esbuild 是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 154,102
精华内容 61,640
关键字:

vue和其他框架

vue 订阅