v-show 和 v-if 的区别

另外补充，我们说虚拟DOM减少损耗是有条件，是指在频繁操作的情况下，不然肯定简单的获取操作最快的，期间没有很多计算等处理。

1. 组件化的思想

实现组件的封装，我们往往是使用组件开发的思想去封装组件，这样不仅便于复用也好维护修改！

二、缺点

1. 生态不够完善

相比 angular 和 react 来说，生态环境较为不足，在构建大型的应用方面，企业使用 react 的比较多。而中小型企业使用 VUE 比较多。

三、react与VUE的区别和优缺点

VUE 和 React 的共同点是，都是组件化的思想，虚拟DOM，数据绑定，而不同点在于，首先两者的设计思想不同，前者定位降低前端开发的门槛，而后者推崇函数式编程。另外在 React 中，是使用 JSX的写法，把HTML 和

CSS都写入到 JavaScript 中。还有的就是他们的 DIFF算法实现也不太一样。

v-show 和 v-if 的区别

1、本质上

v-show 是把标签里的 display 设置为 none，所以页面上是可见的 v-if 是动态的操作DOM元素，页面上不可见的

2、性能上

要是需要频繁的操作的话，肯定是 v-show，因为他只是操作css的值，不会频繁触发重排。但是 v-if 是不断的向 DOM树添加或删除元素，在比较少改变的时候比较合适。

v-show 无论任何条件，初始都会渲染，v-if是惰性的，如果初始条件为 false，初始不会渲染 DOM，为 true 才会渲染。因此 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销

v-if 和 v-for 为什么不建议一起使用呢

v-if：根据表达式的真值来有条件的渲染元素，在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-for：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名，同时设置独一无二的 key。

我们有时候会写出下面的例子：

<div id="app"> <p v-if="isShow" v-for="item in items">

{{ item.title }} </p>

</div>

而实际上这段代码会先循环然后再进行判断，每次v-for都会执行v-if，造成不必要的计算，这会带来性能上的浪费。避免这种使用在同一个元素的情况，我们可以在外层嵌套template（页面渲染不生成dom节点），在这一层

</template>

如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项。

<div> <div v-for="(user,index) in activeUsers" :key="user.index" >

{{ user.name }} </div>

</div>

data () { return {

users,: [{ name: '1',

isShow: true }, {

name: '2', isShow: true

},{ name: '3',

isShow: false }]

} }

computed: { activeUsers: function () {

return this.users.filter(function (user) { return user.isShow;//返回isShow=true的项，添加到activeUsers数组

})

} }

总结

首先，两者的作用分别是 v-if 是根据真值来判断是否渲染组件，而 v-for 是循环渲染组件列表。之所以不能一起使用是因为 v-for 的优先级比 v-if 高。

这会导致的情况就是，当我们在一个循环列表中做判断时，他会先全部列表渲染出来，然后再根据判断做销毁，这会造成不必要的浪费，就是做好了，多出来的砸坏。一般我们可通过计算属性对数据做过滤，把不必要的数据过滤

掉，就不必使用 v-if。

如果使用v-show就不一样了，v-show 和 v-if 的区别在于v-show 是通过display属性设置为 none 来隐藏属性的，而 v- if 是销毁 DOM上的元素的，所以如果同时使用 v-show 和 v-for 是没有影响的。