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

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

标签：
computedmethodswatchedvue

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


分类：
Vue（3）




作者同类文章X

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

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

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

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

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

[html]
view plain
copy

print?

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

<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的用法及区别