VUE整理（二）
需积分: 9 106 浏览量
2017-12-05
16:52:30
上传
评论 1
收藏 24KB DOCX 举报
VUE 学习（二）
1 计算属性和观察者
1.1 计算属性
对于任何复杂逻辑，你都应当使用计算属性。其实计算属性和 data 里的属性是一个道理，只不过他是在 computed 参数中进行声明的，并且属性名后跟的是
一个函数返回一个根据逻辑处理过的内容，作为属性的值。
<!--test1:基础例子 对于任何复杂逻辑，你都应当使用计算属性。-->
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
//这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
1.2 方法
除了应用计算属性获得我们逻辑处理后的内容，还可以调用方法进行获取。
<!--test2: 调用方法-->
<div id="example1">
<p>test2：Reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm1 = new Vue({
el: '#example1',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
1.3 方法 vs 计算属性缓存
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
每当触发重新渲染时，调用方法将总会再次执行函数。
结论：计算属性 在依赖没有改变的时候 读的是缓存的值，方法是不基于缓存，每次都是重新执行函数。
资源评论
