计算属性computed | 属性检测watch |
---|
首次运行 | 首次不运行 |
调用时需要在模板中渲染,修改计算所依赖元数据 | 调用时只需修改元数据 |
默认深度依赖 | 默认浅度观测 |
适合做筛选,不可异步 | 适合做执行异步或开销较大的操作 |
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h3>计算属性</h3>
<!-- 元属性 -->
<div>{{str}}</div>
<!-- 计算属性 -->
<!-- <div>{{cptStr}}</div> 要放在模板中渲染才可以调用-->
<div>{{cptStr}}</div>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
str:'hello world',
},
computed:{
cptStr:function(){
console.log('计算属性运行了')
return this.str
}
}
})
</script>
</html>
属性检测
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<!-- data,commuted,watch都会被加到响应式系统中 -->
<div id="app">
{{str}}
<!-- {{cptStr}} -->
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
str:'hello world',
json:{a:1,b:2}
},
methods:{
fn(current,prev){
console.log('数据观测触发的方法',current,prev);
}
},
computed:{
cptStr(){
this.str;
console.log('计算属性运行')
setTimeout(()=>this.str+=1,1000)
}
},
watch:{
str(current,prev){
console.log('数据观测运行',current,prev);
setTimeout(()=>this.str+=100,2000)
}
}
})
</script>
</html>