1、模板内的表达式非常便利,用于简单的运算,但是,放入过多的逻辑运算就显的笨重,难以维护。
解决:
1.1模板中使用计算属性。
<template> <p>{{ reversedMessage }}</p> </template> <script> export default { data: { message: 'Hello' }, computed: { reversedMessage (){ return this.message.split('').reverse().join('') } } } </script>1.2模板中使用方法
<template> <p>{{ reversedMessage () }}</p> </template> <script> export default { data: { message: 'Hello' }, methods: { reversedMessage (){ return this.message.split('').reverse().join('') } } } </script>计算属性VS方法:
计算属性是基于它们的依赖进行缓存的,只有相关依赖发生改变时它们才会重新求值。相比之下,每次触发渲染时,总会调用方法再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
2、侦听属性:更通用的方式观察、响应vue实例上的数据变动。watch侦听回调。
计算属性VS侦听属性:
如果是命令式的、重复的,用计算属性会更好。
如果数据变化时需要执行异步(例如请求)或者开销较大的操作时,用侦听属性最有用的。