computed是计算树形,methods是方法。

new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
     return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage: function () {
     return this.message.split('').reverse().join('')
    }
  }
})

两种方法执行的结果是一样的,不同的是computed计算属性是基于他们的依赖进行缓存的,computed只有在它的相关依赖发生改变时才会重新求职。这就意味着只要message还没有发生改变,多次访问reversedMessage,计算属性就会立即返回之前的计算结果,而不会再次执行函数。method只要发生重新渲染,methods调用总会执行该函数。

总之:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods。

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。 

总之:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。

虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watcher,在数据变化时来执行异步操作,这时watch是非常有用的。

Vue中computed、methods、watch的联系和区别的更多相关文章

  1. vue中computed、metfods、watch的区别

    一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

  2. vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  3. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  4. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  5. Vue中computed和watch的区别

    在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...

  6. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  7. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  8. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  9. vue中computed与watch的异同

    一.computed 和 watch   都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. ...

  10. Vue中computed与method的区别

    转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest 1.computed区别于method的两个核心 在官方文档 ...

随机推荐

  1. 04: CI(持续集成)/CD(持续交付/持续部署)

    1.1 持续集成.持续交付 介绍   参考博客:https://www.cnblogs.com/cay83/p/8856231.html 1.传统交付 1. 传统软件的开发与交付的周期都很漫长,从需求 ...

  2. day 02 while 循环 格式化输出 运算符 and or not - 编码的初识

    while 循环 while 条件:    循环体 循环如何终止? 改变条件. flag = Truewhile flag:    print('狼的诱惑')    print('我们不一样')   ...

  3. vue.js的v-bind

    v-bind v-bind  主要用于属性绑定, html中的标签内: <div class="control-group"> <label class=&quo ...

  4. vscode学习(二)之显示中文异常解决办法

    异常原因:VSCODE默认是UTF-8编码打开文件的.如果遇到了像GB18030 GBK等等的编码,就显示乱码了. 解决办法: 在设置文件中加入:"files.autoGuessEncodi ...

  5. concat()用法

       SELECT school_code,`name`,phone from student WHERE login_name REGEXP 'ning$'LIMIT 10; concat() SE ...

  6. SpringBoot在macOS下启动慢的原因

    title: SpringBoot在macOS下启动慢的原因 comments: false date: 2019-07-16 09:48:24 description: 在 macOS + JDk1 ...

  7. TableView 两种Style Plain and Group 区别以及进阶使用

    一.UITableViewStylePlain 1.有多段时 段头停留(自带效果) 2.没有中间的间距和头部间距(要想有的重写UITableViewCell /UITableViewHeaderFoo ...

  8. Delphi 循环语句和程序的循环结构

  9. 英特尔的Gen11集成显卡性能再次发力

    这是英特尔首个达到 1 TeraFLOP 算力的图形模块,与第九代酷睿移动版的性能相比,15W Ice Lake-U 在游戏测试场景中,平均帧速率的性能提升了 40%. 与同等的 AMD 产品相比,英 ...

  10. Ubuntu换阿里云源

    sudo -s cd /etc/apt gedit source.list deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted u ...