vue的 计算属性（computed）、methods、watched三者区别

标签： computedmethodswatchedvue

2017-06-14 11:39 4211人阅读 评论(0)收藏举报

分类：

Vue（3）

作者同类文章X

版权声明：本文为博主原创文章，未经博主允许不得转载。

计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。

Methods：methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。

不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

[html] view plain copy

print?

1. <p>原始数据：{{msg}}</p>  
2. <p>改变后的数据：{{changemsg}}</p>  
3. var vm=new Vue({  
4.     el:"#example",  
5.     data:{  
6.         msg:"hello",  
7.     },  
8.     computed:{  
9.         changemsg:function(){  
10.         return this.msg.split("").reverse().join("");  
11.     },  
12. }  

<p>原始数据：{{msg}}</p><p>改变后的数据：{{changemsg}}</p>var vm=new Vue({el:"#example",data:{msg:"hello",},computed:{changemsg:function(){return this.msg.split("").reverse().join("");},}

computed属性  VS watched 属性

watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

computed属性：代码更简单。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

顶

2

踩

1

 

 

• 上一篇vue filter 过滤器
• 下一篇H5的 WebSocket

  相关文章推荐

• • Vue method与computed的区别
• • 腾讯云容器服务架构实现介绍--董晓杰
• • Vuejs——（3）计算属性，样式和类绑定
• • 微博热点事件背后的数据库运维心得--张冬洪
• • Vue计算属性的使用
• • JDK9新特性--Array
• • Vuejs-学习记录（二）属性和计算属性
• • Kubernetes容器云平台实践--李志伟

• • Vue初体验（九）计算属性
• • 用Word2Vec处理自然语言
• • Vue--基础模板语法以及计算属性
• • Java之优雅编程之道
• • Vue学习笔记（3）关于Vue的计算属性
• • Vue 计算属性
• • vue2 中 computed 和 watch 的异同？
• • vue.js的computed,filter,get,set的用法及区别