Vue和angularjs 心得

为什么要选用Vue?Vue与angularjs 1x具有哪些优点? 之前一直在学习使用angularJs 1x,之后公司使用Vue,只能在学习Vue了。这里主要说明使用这两个的心得还有一些坑。 一、两者的构成 Angua...

为什么要选用VueVueangularjs 1x具有哪些优点?

之前一直在学习使用angularJs 1x,之后公司使用Vue,只能在学习Vue了。这里主要说明使用这两个的心得还有一些坑。

一、两者的构成

AngualrJs

1. MVVM(Model+veiw+veiw-model)

2. 构成:依赖注入Controller 、视图view 、模块Module、服务Service、工厂 Factory、过滤 filter以及指令。

3. 路由主要有两个,自带路由ng-Routeui-router

4. 组件定义1.5以下可用directive1.6可用component这两者相差不大如使用推荐后者。

5. Ajax封装($http)

6. Jquery不友好

Vue

1. MVVM(Model+veiw+veiw-model)

2. 构成:vue热衷对页面的直接开发(页面组件化),过滤 filter、指令等。

3. 路由vue-router

4. Ajax插件(vue-resource,axios)

5. Jquery 友好

这两者都采用双向数据绑定模式,热衷对页面数据的直接操作,

Angaulrjs 双向数据绑定采用的是脏值检查,没定义一个值都会创建一个$watch,档作用于下的一个值发生改变是,其内置的$digest将会遍历所有的$watch,如果有变化则更新,没变化则停止。当数据变化十分频繁时,脏检测对浏览器性能的消耗将会很大,官方注明的最大检测脏值为2000个数据。

Vue 则是采用数据劫持结合发布者-订阅者模式的方式简单的说observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持,以便利用其中的settergetter,然后通知订阅者,订阅者会触发它的update方法,对视图进行更新。

二、使用两者的心得

AngualrJs

优点:

1. 像极了后台模式,对于一个高后台的我来说更容易接受。

2. 过滤器、服务、组件的使用是前端更加简单和明了

3. 指令的使用可直接对页面操作

4. 子页面继承父页面的$scope,可以直接定义全局属性

缺点:

1. 当一个项目越来越大时,相对的数据承载能力就会越来越弱,其数据有时都会有延迟。

2. 对于新手不友好,主要表现在页面上下级$scope继承上面,如果事先不明确页面关系,很容易造成数据的展示不出来

3. JQuery不友好。

4. 没有像element-Ui那样的技术支持,大部分都要自己二次封装组件,开发难度大。

Vue

优点

1. 简单、容易上手、Api明确。

2. 大部分组件element-Ui都给封装好了,开发难度大大缩短。

3. 支持过滤器,可对公用的js进行封装。

4. 组件化,调用页面更加明确,不会造成数据混乱。

缺点

暂时没发现

三、总结

两个框架都有让我有所收获,Angularjs教会了我双向数据绑定的正确使用方法以及组件的如何开发应用,Vue让开发难度越来越低,越来越简单。如果让我重新选的话,我想直接选Vue

附:最近发现vue也可以动态绑定值,感兴趣的童鞋可以试一下,以下是代码。

data() {
  return {
    pages:{}
  }
}

methods:{

getPage:function(val){

_this.pages[val]=!this.pages[val]

}

}

<template>

<div @click="hide">

<li class="submenu"  >
  <a  v-on:click="getPage('project')" v-bind:class="{'project':'actives'}[page]">
    <i class="icon icon-list"></i>
  <span>第四级</span>
    <span v-bind:class="{true:'down-top '}[pages.project]">
      <i class="el-icon-arrow-down" ></i>
    </span>
</a>
  <transition name="fade">
  <ul v-if="pages['project']" ><!-- <ul v-if="pages[project]" > 循环-->
    <li  >
      <a>你好</a>
    </li>
     </ul>
  </transition>
</li>

 

</div>

</template>

  • 发表于 2019-02-18 09:15
  • 阅读 ( 153 )
  • 分类:vue

1 条评论

请先 登录 后评论
不写代码的码农
西松

3 篇文章

作家榜 »

  1. 威猛的小站长 99 文章
  2. Jonny 65 文章
  3. 江南烟雨 33 文章
  4. - Nightmare 33 文章
  5. doublechina 31 文章
  6. HJ社区-肖峰 29 文章
  7. 伪摄影 20 文章
  8. Alan 14 文章