Vue | 两对cp

今天来看两对 cp，之所以把他们当 cp，是因为每次写其中之一时，总是要拿另一个做比较，这种关系在前端很常见。

基本上是看起来好像实现的功能点是一样的，但实际上每个都有其特殊的应用场景。彼此互为补充，缺了谁，都有点不大对劲。

今天来介绍的两对是：

• methods && computed
• v-if && v-show

---

先来看第一对，methods && computed 是创建 Vue 实例时可以选择的字段，和 el， data 是同一类的。

两者的关系有一种既生瑜何生亮的感觉。

在比较之前先看一个 computed 的个人问题。

为何计算属性写的时候是函数，用的时候当成属性【不加小括号】来操作？

假设接下来用到的 data 为：

data: {
    firstName: 'cem',
    lastName: 'coe'
}

现在要在页面中展示完整的名字，可以使用的方式：

• 双大括号语法 {{firstName + lastName}} 语法过于繁琐
• methods
• computed

使用计算属性：

computed: {
    fullName() {
        return this.firstName + this.lastName
    }
}

在 html 中使用时可能是这样的：

{{fullName}}

为什么不加小括号呢？它不是函数吗？

这里其实是计算属性的简写，完整的写法：

computed: {
    fullName: {
        set: function() {
        },
        get: function() {
            return this.firstName + this.lastName
        }
    }
}

计算属性本质上就是一个属性，并非函数，只是开发时一般不实现 set 方法。只是简写以后给人一种函数的感觉。

这也就解释了为何计算属性写的时候是函数，用的时候当成属性来操作。

那么接下进入正题，来看一下这对 cp 的异同。

---

这里做一个对比实验，methods && computed 在页面中均搞 3 次。

    {{fullName}}
    {{fullName}}
    {{fullName}}
    ---
    {{getFullName()}}
    {{getFullName()}}
    {{getFullName()}}

为了看到结果在它们身上埋点 console

methods: {
    getFullName() {
        console.log("methods")
        return this.firstName + this.lastName
    }
},
computed: {
    fullName() {
        console.log("computed")
        return this.firstName + this.lastName
    }
}

methods && computed

从结果来看，同样请求三次数据的情况下， methods 执行3次，而 computed 仅仅执行1次。

在 firstName 和 lastName 不改改变时，computed 会使用缓存的结果，效率更高，更加节省资源。

其实两者之中还有一个第三者，唤为 watch，他们之间错综复杂的关系找时间再写。

---

来看第二对 v-if && v-show,，两者用于条件渲染。

通过一个对比实验来看一看 v-if && v-show 的区别，为了看清结果，给他们埋下 id：

cemcoe
cemcoe

v-if && v-show

当 isShow 的值被改成 false 时，两个都消失。但他们不一样，通过观察埋下的 id 可以发现：v-if 直接从 DOM 中删掉，v-show 增加了行内样式 display:none，仅仅是视觉不可见。

v-show 更像是一件隐身斗篷。元素仍然存在，只是不可见。

在 CSS 中有类似的问题：display:none 和 visibility:hidden 的异同。又给自己挖了一个坑，有空填。

开发中 v-if 使用较多，向服务器请求数据仅仅加载有权限的内容，如果没有权限就不能将数据添加到 DOM 中。

这里是连载 化学小子的前端实验册 的第 18 篇，欢迎关注。

pixiv|えすない|78926374

图源