计算属性和属性检测
计算属性: 是一个函数,所依赖的元数据变化时,会再次执行,平时会缓存,是响应式的,需要在模板中渲染才可调用
computed:{
计算属性: function(){return 返回值} 使用: {{计算属性}}
}
与methods的区别: 方法会每次调用,计算属性不会,默认只调用一次
计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的(因为筛选功能就是随着数据的变化而会变化)
方法:适合在列表渲染使用,强制渲染执行
<div id="app">
<div>倒转{{ str.split(' ').reverse().join(' ') }}</div>
<!-- <div>倒转{{ cptStr }}</div> -->
<hr>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
str:'i love you',
num:110,
bl:true,
url:'/images/logo.png'
},
computed:{
// 计算属性名:fn
// cptStr:function(){
cptStr(){
console.log('计算属性运行了');
//计算业务
return this.str.split(' ').reverse().join(' ')
}
}
})
</script>
属性检测|数据观测: 需要在数据变化时执行异步或开销较大的操作时
watch:{
数据名:'methods函数名' 数据名==data的数据
数据名:函数体(new,old)
数据名:{
handler:fn(new,old),
deep: true 深度检测 默认 false
immediate: true 首次运行 默认false
}
}
<div id="app">
<!-- /{{cptStr}}/ -->
<br>
{{str}}
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
str:'i love you',
json:{a:1,b:2}
},
methods:{
fn(current,prev){
console.log('数据观测触发的方法',current,prev);
// console.log('this 默认全部指向',this);
}
},
computed:{
cptStr(){
this.str;
// this.json;
// console.log('this 默认全部指向 vm',this)
console.log('计算属性')
setTimeout(()=>this.str+1,1000)
}
},
watch:{
str(current,prev){
console.log('数据观测运行',current,prev);
setTimeout(()=>this.str+=100,2000)
}
// json:'fn'
// str:{
/* json:{
handler(current,prev){
console.log('数据观测运行',current,prev);
},
immediate:true,//首次运行,默认false
deep:true//深度观测,默认false
} */
}
})
</script>
计算属性 vs 属性检测
计算属性computed: 首次运行
调用时需要在模板中渲染,修改计算所依赖元数据
默认深度依赖
适合做筛选,不可异步
属性检测watch: 首次不运行
调用时只需修改元数据
默认浅度观测
适合做执行异步或开销较大的操作