这篇文章同样是一篇笔记，如果想学习更详细的内容，推荐大家去vue官网
<html>
<head>
<title>vue计算属性和侦听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--没有使用计算属性-->
<p>{{message.split('').reverse().join('')}}</p> <!--模板内的表达式非常便利，
但是在模板中放入太多逻辑会让模板过重且难以维护
对于复杂逻辑，应当使用计算属性-->
<!--使用计算属性-->
<p>reversed message:"{{reversedMessage}}"</p> <!--绑定计算属性的方式发普通属性一样-->
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'hello'
},
//计算属性
computed:{
//计算属性的getter
reversedMessage:function(){
return this.message.split('').reverse().join('')
},
//计算属性默认只有getter,需要时我们也可以提供一个setter
fullName:{
//getter
get:function(){
return 'hello'
},
//setter
set:function(newValue){
//操作数据
}
}
}
})
//我们也可以将同一函数定义为一个方法而不是一个计算属性，两种方式的最终结果是完全相同的
//不同的是，计算属性是基于他们的响应式依赖进行缓存的
//这意味着只要message没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数
//vue提供了一种更通用的方式来观察和响应vue实例上的数据变动：侦听属性（watch）
//但是有的时候使用计算属性比使用侦听属性会更简洁一些
//侦听器（watch）：
//虽然计算属性在大多数情况下更适合，但是当需要在数据变化时执行异步或者开销较大的操作时使用watch来响应数据的变化更合适
</script>
</body>
</html>
![attachEvent 与addEventListener 区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)