开发者社区> 问答> 正文

Vue与Angular以及React的区别?

已解决

Vue与Angular以及React的区别?

展开
收起
pandacats 2019-12-10 14:48:52 757 0
1 条回答
写回答
取消 提交回答
  • 采纳回答

    (版本在不断更新,以下的区别有可能不是很正确。我工作中只用到vue,对angular和react不怎么熟)

    1.与AngularJS的区别

    相同点:

    都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。

    不同点:

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

    2.与React的区别

    相同点:

    React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。

    不同点:

    React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。

    七、vue路由的钩子函数

    首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

    beforeEach主要有3个参数to,from,next:

    to:route即将进入的目标路由对象,

    from:route当前导航正要离开的路由

    next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

    八、vuex是什么?怎么使用?哪种功能场景使用它?

    只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。

    在main.js引入store,注入。新建了一个目录store,….. export 。

    场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

    state

    Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。

    mutations

    mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

    getters

    类似vue的计算属性,主要用来过滤一些数据。

    action

    actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

    const store = new Vuex.Store({ //store实例
    
          state: {
    
             count: 0
    
                 },
    
          mutations: {                
    
             increment (state) {
    
              state.count++
    
             }
    
              },
    
          actions: { 
    
             increment (context) {
    
              context.commit('increment')
    
       }
    
     }
    
    })
    

    modules

    项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

    const moduleA = {
    
      state: { ... },
    
      mutations: { ... },
    
      actions: { ... },
    
      getters: { ... }
    
     }
    
    const moduleB = {
    
      state: { ... },
    
      mutations: { ... },
    
      actions: { ... }
    
     }
    
    const store = new Vuex.Store({
    
      modules: {
    
        a: moduleA,
    
        b: moduleB
    
    })
    
    2019-12-10 14:50:16
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载