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中而言使用起来也更方便些。

Logo

前往低代码交流专区

更多推荐