VUE整理（二）资源-CSDN文库

需积分: 9 182 浏览量 2017-12-05 16:52:30 上传评论 1 收藏 24KB DOCX 举报

资源推荐

资源详情

资源评论

VUE 学习（二）

1 计算属性和观察者

1.1 计算属性

对于任何复杂逻辑，你都应当使用计算属性。其实计算属性和 data 里的属性是一个道理，只不过他是在 computed 参数中进行声明的，并且属性名后跟的是

一个函数返回一个根据逻辑处理过的内容，作为属性的值。

<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 方法

除了应用计算属性获得我们逻辑处理后的内容，还可以调用方法进行获取。

<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 计算属性缓存

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

每当触发重新渲染时，调用方法将总会再次执行函数。

结论：计算属性在依赖没有改变的时候读的是缓存的值，方法是不基于缓存，每次都是重新执行函数。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

天才之上

粉丝: 79
资源: 27

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip