今天接到通知，公司项目从angular改为使用vue ，两个框架其实各有千秋吧，Angular相对来说体积大一些，是vue的好几倍，之前我也写过angular和vue的数据双向绑定的区别，一个是脏数据检查机制，一个是数据劫持，采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
那就趁着公司需要开发，将vue重新学习一边，加深印象，便于接下来的开发也是极好的。
下图是我网上找来的一张图片，关于angular，react，vue三者的区别

相同点： ng-show和ng-if都可以用来控制元素是否显示。当值为true时，表示显示该元素；当值为false时，表示隐藏该元素。
不同点：
ng-show在页面进行渲染的时候，已经将该元素加载，如果值为false，元素需要隐藏的话，在Chrome浏览器中可以查看出，渲染出来的元素仅仅是加了一个ng-hide的class，以此来控制元素的显示与否。
此时通过dom的类似getElementById的方法可以获取到元素。

ng-if 在页面渲染的时候，如果值为false，是不会将元素加载出来的，如果值发生了改变为true，则通过操作dom的方式动态添加元素。注意：在这个时候，如果通过document，或者Jquery等方式获取元素进行操作的话，可能是获取不到的。
此时通过dom的类似getElementById的方法不可以获取到元素。

v-show , v-if :其实与ng-show和ng-if类似的，v-show = false是就相当于加了个display:none

v-if = false则相当于页面没有此元素，当在为true时，页面会重新渲染div。
此外v-if 后还有 v-else 和 v-else-if 条件渲染，这里需要注意的是v-else 必须紧跟 v-if 或v-else-if
例如：
<div v-if="showFlag"> 11111</div> <div v-else>222222</div>
当showFlag为false时，则显示为2222222

性能比较：
v-show的切换消耗比较低，但是不会重新渲染子组件，所以最好用于静态的内容或者不需要重新构建结构的组件。而 v-if 比较适合不太频繁的切换状态的组件。所以项目设计的时候，不要对复杂的业务设计模块太频繁的视图切换。尽量将静态内容和动态内容分离到不同的模块中。
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

应用场景：
当只需要一次判断，后续不需要改变是肯定是 v-if 较为合适，因为false的模块不需要渲染。
如果后续会多次切换的，则应该使用 v-show，从而减少性能的损耗。