Vue中的computed计算属性

文章目录computed与watch的异同不同点相同点示例源码结果分析computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。 watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。执行速度不同 computed计算属性的值是...

张侦毅

17690人浏览 · 2018-11-08 11:09:19

张侦毅 · 2018-11-08 11:09:19 发布

文章目录

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>

结果

在这里插入图片描述

分析

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^