欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中计算属性(computed)、methods和watched之间的区别

程序员文章站 2024-01-16 21:20:04
前言 本文主要给大家介绍了关于vue中计算属性(computed)、methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属...

前言

本文主要给大家介绍了关于vue中计算属性(computed)、methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍:

计算属性

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

methods

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

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

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

<p>原始数据:{{msg}}</p> 
<p>改变后的数据:{{changemsg}}</p> 
var vm=new vue({ 
<span style="white-space:pre"> </span>el:"#example", 
 data:{ 
 <span style="white-space:pre"> </span>msg:"hello", 
<span style="white-space:pre"> </span>}, 
<span style="white-space:pre"> </span>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
 }
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用shell能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。