02计算属性和侦听器
作者：互联网
1.计算属性
1-1 为什么使用计算属性？
<div id="app">
{{message.split('').reverse().join('')}}
</div>
可以在插值中进行简单运算，但是在模板中放太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，都应当使用计算属性。
1-2 怎样使用计算属性？
<body>
<div id="app">
<p>{{ reversedMessage }}"</p>
</div>
<!-- 使用cdn方式引用vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
1-3 计算属性与方法的区别？
<div id="app">
<p>{{ reversedMessage() }}"</p>
</div>
methods: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
相同点：
使用计算属性和方法（method）两种方式得到的结果是相同的。
不同点：
- 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
- 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行computed中的reversedMessage()函数。
2.侦听器
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
watch: {
'$route.query.q': function (newval, oldval) {
if (newval !== undefined) {
this.init(newval)
}
}
}
标签：02,join,reverse,侦听器,计算,reversedMessage,message,属性 来源： https://blog.csdn.net/weixin_44499465/article/details/114661392