官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods、watch、computed

computed 的使用场景

  • HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。

    • 比如这种

              <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
      </div>

在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性

computedmethods 的区别

1. computed是属性调用,而methods是函数调用

这意味着在HTML的插值

  • computed定义的方法是以属性访问的形式来调用,如 {{reversedMessageComputed}}
  • methods定义的方法,则要加上 () 来调用,如 {{reversedNameMethod()}} ,否则视图中会渲染出如下内容
  • function () { [native code] }

2. computed带有缓存功能,而methods不是

这里我引用一下官方文档的说明

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

```<!-- html -->
<div id="root">
<p>Reversed message: "{{ reversedNameMethod() }}"</p>
<p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>
```


// javascript
var vm = new Vue({
el: '#root',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageComputed: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

上面的例子中,缓存意味着只要 message 还没有发生改变,多次访问 reversedMessageComputed 计算属性会立即返回之前的计算结果,而不必再次执行函数。而 reversedNameMethod() 方法,每次调用都会重新执行函数。

但同时需要注意,这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:


// javascript
computed: {
now: function () {
return Date.now()
}
}

now 的值将在Vue实例化时生成,并且不再改变。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

computed其他说明

  • computedmethods 不可以重名

    • Vue会把 methodsdata 里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖

来源:https://segmentfault.com/a/1190000017920016

Vue.js中 computed 和 methods 的区别的更多相关文章

  1. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

  4. vue.js中compted与model的区别

    在p便签内写的{{reversemessage}}方法,若js里对应的函数为computed则不需要加上括号 若js里对应的函数为model则应该将{{reversemessage}}改为{{reve ...

  5. Vue.js 计算属性computed和methods的区别

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  6. vue中computed与methods的异同

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  7. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  8. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

随机推荐

  1. Drupal theme_hook

    模板语言和主题引擎 用Drupal的行话来说,主题就是一组负责你站点外观的文件.你可以从http://drupal.org/project/Themes下载第 3方主题,或者你可以自己动手创建一个主题 ...

  2. JavaScript数组求和

    <script> function demo(){ var d=document.getElementsByTagName("input")[0].value.spli ...

  3. ie 9 渐变背景色兼容问题

    /*窗口背景*/  .window {    background-color: #fff;    background: -webkit-linear-gradient(top,#EFF5FF 0, ...

  4. 03_Redis数据类型(List)

    [List类型] Redis采用的是LinkedList. ArrayList: 数组存储.查询快,增删慢. LinkedList:链表存储.增删快,查询慢,查询两端快. Redis的list内部采用 ...

  5. 【2015 Week Task】

    2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理

  6. 仿照jQuery写一个关于选择器的框架(带了注释,请多多指教~)

    var select = (function () { //这是一个异常与捕获的代码,它表示的意思是:如果push方法出现了错误那么就需要重写push方法 try { //这边是自己模拟一个场景,来使 ...

  7. 创建Spark镜像文件

    创建Spark镜像文件 1.将spark容器提交到新的镜像中 $>docker commit 01a25bdf1499 myrepos:centos-spark 2.将centos-spark镜 ...

  8. IOS ASI 请求服务器 总结

    一.发送请求的2个对象 1.发送GET请求:ASIHttpRequest 2.发送POST请求:ASIFormDataRequest* 设置参数// 同一个key只对应1个参数值,适用于普通“单值参数 ...

  9. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  10. UVa 1606 - Amphiphilic Carbon Molecules

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...