vif和vshow区别面试,vif和vshow的区别什么时候用

vue中的v-show和v-if是做什么用的，两者区别是什么

1.v-show跟v-if都是做条件隐藏跟显示用的，

2.v-show是页面加载的时候显示的内容跟隐藏的内容同时加载在页面上只是根据条件进行了隐藏。

3.v-if是页面加载的时候根据条件进行显示需要展示的内容。并且销毁不需要显示的条件内容，每次加载的时候进行销毁当前加载符合条件的内容

4.简单的来说就是前者在页面上可以看见隐藏的条件，后者看不见隐藏的条件。

5.使用场景：v-show在高频切换的时候为了不浪费资源更多的使用，后者在不需要高频切换的时候更多的使用。

v-if v-show 显示与隐藏区别vue

1.v-if 比v-show 使用起来更消耗资源，频繁切换显示与隐藏使用v-show

2.v-show是使用css display:none 显示与隐藏不是真正意义上删除

3.v-if是真正从dom中删除和渲染来显示隐藏

4.v-if 可以跟 v-else-if v-else 判断

v-show、v-if、v-bind

1.v-show和v-if的区别

v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if? ? ? ? 使用的是visibility:hidden来控制的

2.display:none和visibility:hidden的区别

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间? ? ? ? ? ? ? 会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置

而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）

例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好? ? ? ? ? 像中间的那个table从来不存在过一样

3.v-bind

v-bind绑定属性，v-bind:属性名=‘值’，也可以省略v-bind,直接在属性前面加冒号:, :属性名=‘值’

1.v-show/v-if：控制元素的显示隐藏

2.v-bind:绑定属性

4.案例

显示/隐藏

图片切换

添加/删除水果列表

web前端面试题@二（Keeplive、V-show和v-if的区别、同源策略及跨域）

????????????在vue中，我们使用component内置组件或者vue-router切换视图的时候，由于vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如：搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等。

????????????Keep-alive是一个vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。

????????????作为抽象组件，keep-alive是不会直接渲染在DOM中的。

????????Keep-alive提供了三种可选属性

????????Include-字符串或数组或正则表达式。只有名称匹配的组件被缓存。

????????Exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。

????????Max -数字类型。表示最多可以缓存多少组件实例。

????????Keep-alive提供了两个生命钩子，分别是activated与 deactivated。

????????因为Keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

????????V-show有较高的渲染成本，

????????V-if有较高的切换成本。

????????V-if是真正的条件渲染，确保切换过程中条件内的事件监听器和子组件适当的被销毁和重建。

????????V-show的元素始终被渲染并保存在dom中，操作的只是display属性控制演示影藏。

????????源（origin）—— 就是协议、域名和端口号。若地址里面的协议、域名和端口号均相同则属于同源。

????????同源策略——同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

????不受同源策略限制的

????????????1.页面中的链接，重定向以及表单提交是不会受到同源策略限制的。

????????????2.跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的script src="..."/script，img，link，iframe等。

　? ? ?跨域——只要协议、域名、端口号有一个不同就是跨域。

? ? ? ? 跨域的原因？（只做了解）

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等。

? ? ? ?1、 Jsonp——

????????????????利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。jsonp是一种常用的跨域手段，和反向代理，服务端做跨域处理相比，jsonp更显得方便轻巧?jsonp的缺点只能发送get请求。因为script只能发送get请求需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callback(result)的形式。

? ? ? ?2、 Cors——

????????????????服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。CORS 是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服 AJAX 只能同源使用的限制

????????????????缺点是：目前所有最新浏览器都支持该功能，但是万恶的IE不能低于10

Access-Control-Allow-Origin 这个字段是必须的,表示接受那些域名的请求(*为所有)、Access-Control-Allow-Credentials 该字段可选, 表示是否可以发送cookie、Access-Control-Expose-Headers 该字段可选,XHMHttpRequest对象的方法只能够拿到六种字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用该字段指定。

? ? ? ?3、反向代理（Reverse Proxy）{前端独立就能解决的跨域方案}——

????指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

? ??

v-if与v-show有什么差别？

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

三人行慕课

都修改为false后，第一个div是直接被移除掉了

三人行慕课

需要注意的是，当一个元素默认在css中加了display：none属性，这时通过if-show修改为true是无法让元素显示的。原因是显示隐藏切换，只是会修改element style为display:""或者display:none,并不会覆盖掉或修改已存在的css属性。

三人行慕课

vue中v-if与v-show的区别以及使用场景

基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

参考来源