计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行
典型案例todolist
computed:{
计算属性: function(){return 返回值} 使用: {{计算属性}}
}
与method的区别: 方法会每次调用,计算属性不会
计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的
方法:适合在列表渲染使用,强制渲染执行
计算属性:计算属性也可以是个对象
读取了属性 -> get:fn
修改了属性 -> set:fn
<body>
<div id="example-5">
{{ cptStr }}
</div>
<script>
let vm = new Vue({
el: '#example-5',
data: {
str: 'i love you',
},
computed:{
/* cptStr(){
return this.str.split(' ').reverse().join(' ')
} */
cptStr:{
get: function(){
console.log('get')
return this.str.split(' ').reverse().join(' ')
},
set: function(val){
this.str = val;
console.log('set')
}
}
}
})
</script>
</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变 典型案例