为什么要选用Vue?Vue与angularjs 1x具有哪些优点?
之前一直在学习使用angularJs 1x,之后公司使用Vue,只能在学习Vue了。这里主要说明使用这两个的心得还有一些坑。
一、两者的构成
AngualrJs
1. MVVM(Model+veiw+veiw-model)。
2. 构成:依赖注入Controller 、视图view 、模块Module、服务Service、工厂 Factory、过滤 filter以及指令。
3. 路由主要有两个,自带路由ng-Route和ui-router。
4. 组件定义1.5以下可用directive,1.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()实现数据劫持,以便利用其中的setter和getter,然后通知订阅者,订阅者会触发它的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>
5 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!