Vue中的computed计算属性

旧城等待， 2022-04-18 04:04 289阅读 0赞

### 文章目录 ###

*  computed与watch的异同
 *   *  不同点
     *  相同点
 *  示例
 *   *  源码
     *  结果
     *  分析

# computed与watch的异同 #

## 不同点 ##

*  **触发条件不同**

`computed`计算属性会依赖于使用它的`data`属性，只要是依赖的`data`属性值有变动，则自定义重新调用计算属性执行一次。

`watch`则是在监控的`data`属性值发生变动时，其会自动调用`watch`回调函数。

*  **执行速度不同**

`computed`计算属性的值是直接从缓存中获取，而不是重新编译执行一次，因而其性能要高一些，尤其是在`data`属性中的值无变化，而重复调用`computed`回调函数时更是如此，所以说在Vue中，应该尽可能的多使用`computed`替代`watch`。

`watch`中的值需要`data`属性重新编译执行，因而其性能方面会有所损失。

*  **使用方式不同**

`computed`计算属性的回调函数方法可以直接在页面中通过插值表达式——`{ {}}`来获取。此时我们不需要再`data`数据域中再定义一个与方法名相同的属性。

`watch`中的方法名必须是`data`数据域中所存在的，否则无法使用。

## 相同点 ##

都可以实现通过监控`data`数据域中属性值的变化来触发相应的回调函数，进而实现我们特殊的逻辑业务处理功能。

# 示例 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="lastName" placeholder="姓">
        <input type="text" v-model="firstName" placeholder="名">
        <h2>拼接：{
       {fullName}}</h2>
    </div>
    </body>
    <script src="../../../js/vue/vue/2.0/vue.js"></script>
    <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
    <script type="application/javascript">
        new Vue({
            el:'#app'
            ,data:{
                firstName:''
                ,lastName:''
            }
            ,computed:{
                fullName:function () {
                    return this.lastName + '·' + this.firstName;
                }
            }
        });
    </script>
    </html>

## 结果 ##

![在这里插入图片描述][20181108110358260.gif]

## 分析 ##

通过上述代码，我们可以看到，我们仅仅在`computed`回调函数域中定义了一个`fullName`回调函数，当我们的函数所依赖的`data`属性中的值有变动时，其会自动触发`fullName`回调函数，重新计算一下结果，因而其使用方式相较于`watch`而言，要简练很多。

`computed`回调函数域中的回调函数方法可以在插值表达式`{ {}}`中直接获取返回结果而无需在`data`数据域中定义相关的属性，这一点相较于`watch`中而言使用起来也更方便些。

[20181108110358260.gif]: /images/20220418/37df55ae52764a9eba5d61d9b9faa221.png