精华内容
下载资源
问答
  • 相信很多读者都有其他框架的学习经验,但学的多了难免会混淆,现在我以对比的方式介绍一下啊vue与其他框架的区别。 与AngularJS的区别 Augular来自Google,是目前最火的框架之一,应用于PC端的复杂交互系统。我们...

    相信很多读者都有其他框架的学习经验,但学的多了难免会混淆,现在我以对比的方式介绍一下啊vue与其他框架的区别。

    与AngularJS的区别

    Augular来自Google,是目前最火的框架之一,应用于PC端的复杂交互系统。我们通常说的AngularJS指的是Angular 2,Angular 1与Angular 2可以认为是两个不同的框架,它构成了AngularJS(框架的第一个版本)的重写。

    相同点

    • 都支持指令 – 内置指令和自定义指令
    • 都支持过滤器 – 内置过滤器和自定义过滤器
    • 都支持双向绑定
    • 都不支持低端浏览器(比如IE6/7/8)

    不同点

    • AngularJs的学习成本较高,比如增加了Dependency Injection特性,而Vue本身提供的API都比较简单、直观。
    • 在性能上,AngularJS依赖对数据做脏检查,所以watch越多越慢。而Vue使用基于依赖追踪的观察并使用异步队列更新,所有数据都是独立更新的。

    脏检查即一种不关心你如何以及何时改变的数据, 只关心在特定的检查阶段数据是否改变的数据监听技术.

    与React的区别

    React是一个用于构建Web应用程序UI组件的JavaScript库。React由Facebook维护,许多领先的科技品牌在其开发环境中使用React。

    相同点

    • React使用特殊的JSX语法,Vue也推崇使用.vue编写,都需要编译后使用
    • 中心思想相同,一切都是组件,组件实例可以嵌套
    • 都提供合理的钩子函数,可以让开发者定制化的处理需求
    • 不内置功能核心包,而是以插件的方式加载
    • 在组件开发中都支持mixins特性

    不同点

    • React依赖Virtual DOM(虚拟DOM),而Vue使用的DOM模板。React的虚拟DOM会作出脏检查。
    • Vue提供了指令、过滤器等,可以非常方便、快捷的操作DOM
    • vue虚拟dom和react虚拟dom不同

    vue虚拟dom和react虚拟dom有什么不同

    virtual DOM不一样,vue会跟踪每一个组件的依赖关系, 不需要重新渲染整个组件树.​​
    而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制。

    Vue

    Vue.js是讨论最多且发展最快的JavaScript框架之一。它由前谷歌员工Evan You创建,他在担任Google员工时曾在Angular工作过。您可以认为它是成功的,因为它能够使用HTML,CSS和JavaScript构建有吸引力的UI。Vue被阿里巴巴,GitLab,百度使用,并受到全球开发人员和设计师的赞赏。

    三者比较

    框架?程序库?有什么不同?

    Angular是一个框架,因为它为您提供了使用完整设置构建应用程序的良好开端。您无需查看库,路由解决方案和结构。你可以简单地开始建设。另一方面,React和Vue比Angular更灵活,更通用。

    使用React,您可以进行多个集成,因为您可以将库与其他优秀工具配对,交换和集成。在这一点上,React开箱即用,因为它提供了无缝集成的灵活性,但是,这样做有更多的机会出错,它需要更多的依赖。

    与这三个框架相比,Vue是最干净的。它可以帮助您在保持代码高效的同时实现内部依赖性和灵活性的完美平衡。它是一个非常简单,直接且易于使用的JavaScript框架,旨在简化Web开发。

    模式

    Angular涉及依赖注入,这是一个对象为另一个对象提供依赖关系的概念。这使代码更清晰,更容易理解。另一方面,有一个MVC模式将项目分成三个不同的组件 - 模型,视图和控制器。React没有任何这样的概念,它只用于构建应用程序的View,而Angular则基于MVC架构。

    表现,哪个更好?

    Virtual DOM模型在性能方面非常有用。React和Vue都有一个Virtual DOM。由于结构精良,Vue可提供出色的性能和内存分配。另一方面,React运作良好,Angular已经在竞争中领先。

    快速比较表格

    在这里插入图片描述
    官方文档参考:https://cn.vuejs.org/v2/guide/comparison.html

    展开全文
  • 认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别

    万次阅读 多人点赞 2016-11-05 10:42:50
    MVX框架模式:MVC+MVP+MVVM1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层目的,让彼此职责分开。View通过Controller来和Model联系,Controller是View和Model协调者,View和Model不直接...

    首先,我们先了解什么是MVX框架模式?

    MVX框架模式:MVC+MVP+MVVM

    1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

    View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。

    用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

    2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

    在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。

    并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。

    MVP模式的框架:Riot,js。

    3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

    View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。

    这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

    MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

    Vue.js是什么?

    看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

    其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。

    Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

    Vue.js的特性如下:

    1.轻量级的框架

    2.双向数据绑定

    3.指令

    4.插件化

    Vue.js与其他框架的区别?

    1.与AngularJS的区别

    相同点:

    都支持指令:内置指令和自定义指令。

    都支持过滤器:内置过滤器和自定义过滤器。

    都支持双向数据绑定。

    都不支持低端浏览器。

    不同点:

    1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

    2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

    Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

    对于庞大的应用来说,这个优化差异还是比较明显的。

    2.与React的区别

    相同点:

    React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

    中心思想相同:一切都是组件,组件实例之间可以嵌套。

    都提供合理的钩子函数,可以让开发者定制化地去处理需求。

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

    在组件开发中都支持mixins的特性。

    不同点:

    React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查

    Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

    如何使用Vue.js?

    1.安装

    (1)script

    如果项目直接通过script加载CDN文件,代码示例如下:

    <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>

    (2)npm

    如果项目给予npm管理依赖,则可以使用npm来安装Vue,执行如下命令:

    $npm i vue --save-dev

    (3)bower

    如果项目基于bower管理依赖,则可以使用bower来安装Vue,执行如下命令:

    $bower i vue --save-dev

    2018.4.24====================好久没写博客。(太多知识需要整理,从今天开始,有时间就写博,分享开发过程中的点滴)附上一个最基本的vue组件页面。

    <template>
      <!--app-actions start-->
      <div class="app-actions row">
        <ul class="btn-list">
          <li v-if="permissions.create" :disabled='quota.totalSecurityGroupsUsed >= quota.maxSecurityGroups'>
            <a href="javascript:;" class="btn btn-primary"
               @click="action_modal = 'Create'"><i class="icon icon-i446 pr5"></i>{{
              $t('access_security.create') }}</a>
          </li>
          <li
            v-if="permissions.edit || permissions.delete">
            <v-dropdown>
              <button type="button" class="btn btn-info btn-icon dropdown-toggle"
                      data-toggle="dropdown">
                <i class="icon icon-i692"></i>
              </button>
              <ul slot="dropdown-menu" class="dropdown-menu">
                <li :class="{'disabled': !acSingle || !menu.edit}"
                    v-if="permissions.edit"><a href="javascript:;"
                                               @click="action_modal = 'Edit'">{{
                  $t('base.edit')}}</a></li>
                <li :class="{'disabled': !acMulti}" v-if="permissions.delete"><a
                  class="danger" href="javascript:;"
                  @click="action_modal = 'Delete'">{{ $t('base.delete')}}</a>
                </li>
              </ul>
            </v-dropdown>
          </li>
          <li>
            <button type="button" class="btn btn-info btn-icon" @click="ajaxData">
              <i class="icon icon-i500"></i></button>
          </li>
        </ul>
        <!--当前页面数据检索-->
        <div class="app-search">
          <input type="text" class="form-control app-search-input" v-model="searchKey" placeholder="{{ $t('base.search_name')}}" maxlength="64">
          <i class="icon icon-i441"></i>
        </div>
      </div>
      <!--app-actions end-->
    
      <!--app-body start-->
      <div class="app-body row">
        <v-grid
          :overall="false"
          :count="COUNT"
          :titles="grid.titles"
          :items="LIST"
          :transname="grid.name"
          :checkeds.sync="checkeds"
          :orderkey.sync="grid.order_key"
          :orderitem="grid.order_item"
          :orderswitch.sync="grid.order_switch"
          :ready="ready"
        >
          <div class="grid-canvas" slot="grid-canvas">
            <div class="grid-row" v-for="security_group in LIST | orderBy grid.order_key grid.order_switch"
                 :class="{'selected': checkeds.indexOf(security_group.id) !== -1}">
              <div class="grid-cell row-key"><input type="checkbox"
                                                    value="{{security_group.id}}"
                                                    v-model="checkeds"></div>
              <div class="grid-cell r0">
                <a v-link="{ name: routeDetail, params: { id:security_group.id , view:detail_view }}">
                  {{security_group.name_cn}}
                </a>
              </div>
              <div class="grid-cell r1">{{security_group.description}}</div>
            </div>
          </div>
        </v-grid>
    
        <!--detailView start-->
        <v-detailview :show.sync="detail.show" :itemdata.sync="detail.item"
                      :backurl="routeGrid">
          <v-tabs slot="detail-body" :active="detail.view" :router="routeDetail"
                  v-bind:classname="['detailTabs']" v-ref:tabs>
            <v-tab :header="$t('volumes.description')" controls="description"
                   v-if="true">
              <c-description :data="detail.item"></c-description>
            </v-tab>
          </v-tabs>
        </v-detailview>
        <!--detailView end-->
      </div>
      <!--app-body end-->
    
      <!--=======================action modal start=============================-->
      <div role="dialog" v-show="action_modal != null" transition="fade"
           class="modal in">
        <component :is="action_modal" transition="zoom"
                   :item="ACTIVE_ITEM"></component>
      </div>
      <!--=======================action modal end=============================-->
    
      <!--=======================action modal start=============================-->
      <div role="dialog" v-show="rules_modal != null" transition="fade" class="modal in">
        <component :is="rules_modal" :item="ACTIVE_ITEM" :direction="direction" transition="zoom"></component>
      </div>
      <!--=======================action modal end=============================-->
    </template>
    <script>
      import { networksAjax } from '../../../ajax.js'
      import { extend,statusFilter,filterSearchKey} from '../../../lib/function.js'
      import vDropdown from '../../../lib/strap/Dropdown.vue'
      import vGrid from '../../../lib/strap/Grid.vue'
      import vDetailview from  '../../../lib/strap/Detailview.vue'
      import vTabs from '../../../lib/strap/Tabsetview.vue'
      import vTab from '../../../lib/strap/Tab.vue'
    
      import Create from './action_create.vue' //弹出层create组件
      import Edit from './action_edit.vue' //弹出层edit组件
      import Delete from './action_delete.vue' //弹出层delete组件
    
      import Createrules from './action_create_rules.vue' //弹出层createrules组件
    
      import cDescription from './detail_security_groups.vue' //弹出层description组件
      export default {
        components: {
          vDropdown,
          vGrid,
          vDetailview,
          vTabs,
          vTab,
    
          Create,
          Edit,
          Delete,
    
          Createrules,
          cDescription
        },
        data(){
          return {
            menu:{//设置菜单选项初始值
              'create':true,
              'edit':true,
              'delete':true
            },
            routeDetail:'security_groups_view', //侧拉路由name
            routeGrid:'access_security', //主列表路由name
            AJAX_API:this.$resource( '', {}, networksAjax),//数据接口
            DATA:[],//数据源
            COUNT:0, //数据条目总数
            searchKey:'', //搜索筛选值
            searchField:['name_cn'],//搜索字段
            action_modal:null,
            rules_modal:null,
            checkeds:[], //已选择数据id
            ready:false, //数据是否已经载入
            //是否多选(toolbar判断用)
            acMulti:false,
            //是否单选(toolbar判断用)
            acSingle:false,
            detail:{
              show:false,//侧拉组件开关
              id:null,//侧拉id
              item:{}, //侧拉显示对象
              view:null,//侧拉显示标签
            },
            quota:{
              totalSecurityGroupsUsed:0,
              maxSecurityGroups:10
            },
            detail_view:'description', //侧拉默认选项卡
            grid:{
              name:'access_security', //当前grid翻译对应值
              titles:['name','description'],//grid列表组件列表标题
              order_item:['name','description'], //传入允许使用排序功能的列的title 例如order_item:['name','size','type'],
              order_key: null,//列表排序字段
              order_switch: null,//列表正反切换
            },
            direction:null,//侧拉详情中-上行下行
            permissions:COS.permissions.resource_console.access_security.security_groups
          }
        },
    
        computed: {
          LIST:{
            get: function(){
              this.DATA.forEach(item => {
                item['name_cn'] = item.name == 'default' ? this.$t('access_security.default') : item.name})
              return filterSearchKey(this.DATA,this.searchField,this.searchKey)
            }
          },
          //根绝LIST的筛选&checkeds选中项目计算
          ACTIVE_ITEM: {
            get: function(){
              let items = []
              const dataList = this.LIST
              const checkeds = this.checkeds;
              for(let n=0; n<dataList.length; n++){
                for(let i=0; i<checkeds.length; i++){
                  if(dataList[n].id == checkeds[i]){
                    items.push(dataList[n])
                  }
                }
              };
              return items;
            }
          }
        },
    
        watch: {
          //剔除本地筛选后的checkeds
          'LIST': function(val) {
            let new_data = [];
            for(let n=0; n<this.checkeds.length; n++){
              for(let i=0; i<val.length; i++){
                if(val[i].id.indexOf(this.checkeds[n]) >= 0){
                  new_data.push(this.checkeds[n])
                }
              }
            }
            this.checkeds = new_data;
          },
          'detail.id':function () {
            if(this.detail.show==true){
              let arr=[];
              for(var k in this.$refs.tabs.renderData){
                arr.push(this.$refs.tabs.renderData[k].controls)
              }
              if(Array.indexOf(arr,this.detail_view)==-1){
                this.detail.view=arr[0]
              }
            }
          },
          //根据选中id获取相应数据对象
          'checkeds': function (items) {
            //多选逻辑
            if(items.length == 0){//无勾选
              this.$router.replace({name:this.routeGrid})//返回主页面
              this.acMulti = false;
              this.acSingle = false;
            }else if(items.length > 1){//多选
              this.$router.replace({name:this.routeGrid})//返回主页面
              this.acMulti = true;
              this.acSingle = false;
            }else{
              this.acMulti = true;
              this.acSingle = true;
            }
          },
          'ACTIVE_ITEM':function(val){
            if(val.length == 1 && val[0].name == 'default'){
              this.menu.edit = false;
            }else{
              this.menu.edit = true;
            }
          },
          //数据载入完成后监测是否展示
          'ready': function(val){
            if(val){this.detailview(this.detail.id,this.detail.view)}
          }
        },
    
        ready() {
            //载入数据
            this.ajaxData()
            this.getQuotas()
        },
    
        methods: {
          //获取列表数据
          ajaxData(){
            this.ready = false;
            this.AJAX_API.security_groups().then((response) => {
              // success callback
              this.DATA = response.data.data
              this.COUNT = response.data.data.length
              this.ready = true
            }, (response) => {
              // error callback
              if(typeof response.data.message =="string"){
                this.$dispatch('notice_msg', {msg:response.data.message,type:'info',duration:5})
              }else if(typeof response.data.message =="object"){
                for(var k in response.data.message){
                  this.$dispatch('notice_msg', {msg:k+' '+response.data.message[k],type:'info',duration:5})
                }
              }
            })
          },
          //根据路由控制detailview显示
          detailview(id,view){
            if(id){
              //根据ID找到对应对象
              for(let i=0; i<this.LIST.length; i++){
                if(this.LIST[i].id == id){
                  this.detail.show = true
                  this.checkeds = []
                  this.checkeds.push(id)
                  this.detail.item = this.LIST[i]
                }
              }
            }else{
              this.detail.show = false
              this.detail.item = {}
            };
          },
    
          getQuotas:function(){
            this.AJAX_API.get_security_groups_quotas().then((response) => {
                // success callback
                if(response.data.code == 0){
                  this.quota = response.data.data
                }
              }, (response) => {
                // error callback
                if(typeof response.data.message =="string"){
                  this.$dispatch('notice_msg', {msg:response.data.message,type:'danger',duration:5})
                }else if(typeof response.data.message =="object"){
                  for(var k in response.data.message){
                    this.$dispatch('notice_msg', {msg:k+' '+response.data.message[k],type:'danger',duration:5})
                  }
                }
              })
          }
        },
    
        events: {
    
          //socketIO更新
          'IO_networks':function (data) {
            if(data.option == 'reload'){
              this.AJAX_API.get({'id':data.resource_id}).then((response) => {
                // success callback
                const DATA = this.DATA;
                for(let i=0; i<DATA.length; i++) {
                  if (DATA[i].id == data.resource_id) {
                    extend(DATA[i],response.data.data,true)
                  }
                }
              }, (response) => {
                // error callback
                if(typeof response.data.message =="string"){
                  this.$dispatch('notice_msg', {msg:response.data.message,type:'danger',duration:5})
                }else if(typeof response.data.message =="object"){
                  for(var k in response.data.message){
                    this.$dispatch('notice_msg', {msg:k+' '+response.data.message[k],type:'danger',duration:5})
                  }
                }
              })
              this.$dispatch('notice_msg', {msg:this.$t('base.volumes') +' "' + data.name + '" ' + this.$t('volumes.status_info.'+ data.state),type:'info',duration:5})
            }else if(data.option == 'delete'){
              const DATA = this.DATA;
              for(let i=0; i<DATA.length; i++) {
                if (DATA[i].id == data.resource_id) {
                  this._delete_update_list(DATA[i].id)
                  this.ajaxData()
                }
              }
              this.$dispatch('notice_msg', {msg:this.$t('base.volumes') +' "' + data.name + '" ' + this.$t('volumes.status_info.'+ data.state),type:'info',duration:5})
            }else{
              const DATA = this.DATA;
              for(let i=0; i<DATA.length; i++) {
                if (DATA[i].id == data.resource_id) {
                  DATA[i].status = data.state;
                }
              }
              this.$dispatch('notice_msg', {msg:this.$t('base.volumes') +' "' + data.name + '" ' + this.$t('volumes.status_info.'+ data.state),type:'info',duration:5})
            }
          }
        },
        //根据路由获取ID/VIEW
        route: {
          data (transition) {
            this.detail.id = transition.to.params.id
            if(transition.to.params.view){
              this.detail.view = transition.to.params.view
            }else{
              this.detail.view = ''
            }
            if(this.ready){
              this.detailview(this.detail.id,this.detail.view)
            }
          }
        },
      }
    
    </script>
    
    
    



    展开全文
  • 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层目的,让彼此职责分开。 View通过Controller来和Model联系,Controller...

    首先,我们先了解什么是MVX框架模式?

    MVX框架模式:MVC+MVP+MVVM

    1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

    View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。

    用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

    2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

    在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。

    并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。

    MVP模式的框架:Riot,js

    3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

    View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。

    这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

    MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

    Vue.js是什么?

    看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

    其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。

    Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

    Vue.js的特性如下:

    1.轻量级的框架

    2.双向数据绑定

    3.指令

    4.插件化

    Vue.js与其他框架的区别?

    1.与angularjs的区别

    相同点:

    都支持指令:内置指令和自定义指令。

    都支持过滤器:内置过滤器和自定义过滤器。

    都支持双向数据绑定。

    都不支持低端浏览器。

    不同点:

    1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

    2.在性能上,angularjs依赖对数据做脏检查,所以Watcher越多越慢。

    Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

    对于庞大的应用来说,这个优化差异还是比较明显的。

    2.与React的区别

    相同点:

    react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

    中心思想相同:一切都是组件,组件实例之间可以嵌套。

    都提供合理的钩子函数,可以让开发者定制化地去处理需求。

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

    在组件开发中都支持mixins的特性。

    不同点:

    React依赖Virtual DOM,而Vue.js使用的是DOM模板。react采用的Virtual DOM会对渲染出来的结果做脏检查。

    Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

    如何使用Vue.js?

    1.安装

    (1)script

    如果项目直接通过script加载CDN文件,代码示例如下:

    <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>

    (2)npm

    如果项目给予npm管理依赖,则可以使用npm来安装Vue,执行如下命令:

    $npm i vue --save-dev

    (3)bower

    如果项目基于bower管理依赖,则可以使用bower来安装Vue,执行如下命令:

    $bower i vue --save-dev

    转载于:https://www.cnblogs.com/CaseyWei/p/9321195.html

    展开全文
  • vue与react的区别

    千次阅读 2018-03-27 19:08:26
    1.创建者等react是Facebook公司创建的js框架,并创新了新的语法,JSX(html in javascript),而vue相对来说更容易学习,且使用模板系统,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。...

    1.创建者等

    react是Facebook公司创建的js框架,并创新了新的语法,JSX(html in javascript),而vue相对来说更容易学习,且使用模板系统,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。

    2.关于虚拟dom

    改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·

    Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

    vue:渲染过程中是跟踪每一个组件的依赖,即更改了哪个组件渲染哪个。

    react:会重新渲染全部子组件。

    传统的diff算法:


    传统算法就是对每个节点一一对比,循环遍历所有的子节点,然后判断子节点的更新状态,分别为remove、add、change。如果before的子节点仍有子节点依旧顺次执行。传统 diff 算法的复杂度为 O(n^3)。

    react的diff算法:



    1. 两个相同组件产生类似的DOM结构,不同的组件产生不同的DOM结构;
    2. 对于同一层次的一组子节点,它们可以通过唯一的id进行区分。

    3.关于构建工具:

    vue:vue-cli

    react:cra(create react app)



    展开全文
  • 前言:最近需要使用 react,以前用过 vue,故来总结两者的区别。 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Composable)的视图组件 3.将注意力集中保持在...
  • 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Composable)视图组件 3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关库 性能方面 #...
  • Vue是一个构建用户界面点渐进式框架与其他重量级框架不同是,vue采用自底向上增量开发设计 vue的核心库"只关注视图层",并且"非常容易学习",非常容易与其他库或...
  • vue和react的区别

    2019-05-31 23:04:44
    不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。 Vue.js(2.0版本)React的其中最大一个相似之处,就是他们都使用了一种叫’Virtual DOM’的...
  • 一、为什么学习vue.js vue.js兼具angular.js和react优点,并且剔除了他们缺点 ... ... 二、vue.js是什么 Vue是一个"MVVM框架(库)"...Vue是一个构建用户界面点渐进式框架与其他重量...
  • vue和react 相似和区别

    千次阅读 2018-03-08 15:03:46
    不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。 Vue.js(2.0版本)React的其中最大一个相似之处,就是他们都使用了一种叫’Virtual DOM’的...
  • 与其他重量级框架不同是,Vue 采用自底向上增量开发设计,其核心库只关注视图层,并且非常容易学习,也易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持库开发复杂...
  • jq.js与vue.js区别

    2021-03-01 14:35:52
    jQery是使用选择器 $ 选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的html的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。...扩展:还有很多其他的MVVM框架,如.
  • vue和react区别

    2018-08-02 18:28:44
    不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。 Vue.js(2.0版本)React的其中最大一个相似之处,就是他们都使用了一种叫’Virtual DOM’的...
  • 与其他重量级框架不同是,Vue 采用自底向上增量开发设计。Vue 核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持库结合使用时,Vue 也...
  • vue jq 对比

    2018-12-14 17:52:00
    这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细。 我算是独自用vue写过一个小型项目,然后维护过一个用react写的项目。至于angular2。。。只跟着写了下官方的例子。 首先...
  • vue入门(一)

    2017-10-24 15:41:38
    Vue.js 是一套构建用户界面的 渐进... vue与其他框架的区别 与AngularJS的区别: vue简单易学,简单来说就是一片html代码配合json再new一个Vue,其指令都是以v-XX开头,适合于移动端开发。 angularjs上手较难,框架大
  • 与其他框架的区别就是渐进式的想法,也就是Progressive——这个词在英文中定义是渐进, 一步一步,不是说你必须一竿子把所有的东西都用上。 这或许是Vue.js受到越来越多关注的一个重要原因:你...
  • Vue.js作为一个后起的前端框架,借鉴了Angular 、React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩。... 与其他框架的区别就是渐进式的想法,也就是Progressive——这个词在英文中定义是渐进...
  • 版权声明:本文版权属于汇智网,转载请声明。...与其他框架的区别就是渐进式的想法,也就是Progressive——这个词在英文中定义是渐进,一步一步,不是说你必须一竿子把所有的东西都用上。 这或许是Vue...

空空如也

空空如也

1 2 3 4 5 6
收藏数 102
精华内容 40
关键字:

vue与其他框架的区别

vue 订阅