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

今天药忘吃喽~ 2022-10-12 14:58 247阅读 0赞

## 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">    
                <p>{
       {now}}</p>
                <p>{
       {now}}</p>
                <p>{
       {now}}</p>
                <p>{
       {now}}</p>
                <hr />            
    </div>
            <div class="test2">   
                <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 也会被对应更新。