您的位置：首页 > Web前端 > Vue.js

vue基础篇-计算属性（第三章 ）

2018-12-19 16:12 260 查看

计算属性
一、

methods
vs 
computed

computed：
是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。
Methods：
是方法，比如你点击事件要执行一个方法，这时候就用methods。

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

<p>Reversed message: "{{ reversedMessage() }}"</p>

computed：

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})

methods：

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

将同一函数定义为一个 

method
或者一个计算属性（
computed
）。对于最终的结果，两种方式确实是相同的
不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

二、

computed
VS 
watched

共同点：
都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同：
watch和computed各自处理的数据关系场景不同
(1).watch擅长处理的场景：一个数据影响多个数据
(2).computed擅长处理的场景：一个数据受多个数据影响

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
}
}
})

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

三、注意

computed
的属性调用
computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是

例子：

<!--HTML部分-->
<div id="app">
<h1>{{message}}</h1>
<p class="test1">{{methodTest}}</p>
<p class="test2-1">{{methodTest()}}</p>
<p class="test2-2">{{methodTest()}}</p>
<p class="test2-3">{{methodTest()}}</p>
<p class="test3-1">{{computedTest}}</p>
<p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
el: '#app',
data: {
message: '我是消息，'
},
methods: {
methodTest() {
return this.message + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})

computed的属性调用：在HTML的插值里
computed定义的方法我们是以属性访问的形式调用的，{{computedTest}}
methods定义的方法，我们必须要加上()来调用，如{{methodTest()}}，否则，视图会出现test1的情况，见下图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航