v-if 与 v-show、computed与methods的区别

程序员文章站 2022-06-09 20:06:02

...

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

共同点：v-if 和 v-show 都能实现元素的显示隐藏

区别：

v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染
v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
而 v-if 才是真实的条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）。v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。；
v-if 有更高的切换开销，v-show 切换开销小；
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
v-if 可以搭配 template 使用，而 v-show 不行

2. computed属性与 methods方法

在vue.js中，有methods和computed两种方式来动态当作方法来用的。

1.首先最明显的不同就是调用的时候，methods要加上（）
2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

为了方便理解，先上一段源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>

    <body>
        <div class="test">    <!--computed计算属性-->
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <hr />            <!--横线分割-->
</div>
        <div class="test2">   <!--methods方法，注意new（）加了括号-->
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
        </div>
    </body>

    <script type="text/javascript">
        var myVue = new Vue({
            el: ".test",
            computed: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {     //延时
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        });
        var vue2 = new Vue({
            el: '.test2',
            methods: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        })
    </script>

</html>

结果如下：
1625472921893

1625472921893

1625472921899

1625472921904

1625472921907

1625472921909

运行结果如上，可以看出computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now，这就是依赖缓存。（有延时的情况下多次输出时间相同）。

那什么是相关依赖发生改变时才会重新取值呢比方说 reversedMessage function() 计算属性中调用了 message 变量。

就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

而methods是实时的，在重新渲染时，函数总会重新调用执行，不会缓存，（多次输出时间不同）

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：所以其实computed也是可以传参的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

输出结果：

菜鸟教程 http://www.runoob.com

name: 菜鸟教程
url: http://www.runoob.com

从实例运行结果看在运行 vm.site = ‘菜鸟教程 http://www.runoob.com’; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

相关标签：前端常见面试题 vue 面试

上一篇：数据结构与算法之链表篇

下一篇： Java常见面试题(1)

v-if 与 v-show、computed与methods的区别

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

2. computed属性与 methods方法

Vue中computed与methods的区别详解

浅析Vue中method与computed的区别

Vue常用指令v-if与v-show的区别浅析

vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

Vue中computed、methods与watch的区别总结