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中的computed计算属性相关推荐

Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...
vue computed计算属性
文章目录前言一.计算属性介绍二.使用步骤 1.template中绑定计算属性 2.script中定义计算属性 3.计算属性的配置项 4.计算属性的简写总结前言 Vue中的计算属性(comup ...
vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...
Vue源码之计算属性watcher
在之前的文章<Vue源码分析基础之响应式原理>和<Vue源码实现之watcher拾遗>中,我们学习了watcher的实现原理.紧跟着这几天准备花点时间学习下watcher在vu ...
第十六篇 Computed 计算属性的应用
本篇内容主要讲计算属性的相关知识,如果从之前的有一直关注这一系列的文章内容的话,就会发现之前的一些案例可以用其他方法方式去做,比如第八篇.第九篇所提及到的模糊查询以及第十四篇实现购物车页面的一 ...

Vue中的computed计算属性

文章目录

computed与watch的异同

不同点

相同点

示例

源码

结果

分析

Vue中的computed计算属性相关推荐

最新文章

热门文章