标签：相关 color first ops win bsp 执行 响应 new
今日分享
当在表达式中涉及复杂的运算的时候就可以用到计算属性——computed
基本用法：
<span>{{sum}}</span>
computed:{ sum:{ get:function(){ return this.a + this.b }, set:function(newValue){ window.console.log(newValue) console.log(‘setter‘) this.a+=10 } } },
计算属性默认只有getter,可在必要的时候添加setter(注意：只有在设置fullName值的时候才会触发setter方法
// ... computed: { fullName: { // getter 用来获取属性值。同时计算生成新的值。 get: function () { return this.firstName + ‘ ‘ + this.lastName }, // setter 用来改变传递过来的值，发生改变的时候，同时让数据的内容也发生改变。 set: function (newValue) { var names = newValue.split(‘ ‘) this.firstName = names[0] this.lastName = names[names.length - 1] } } }
<el-button type="danger" @click="fullName = ‘bob job‘">welcome</el-button>
计算属性缓存VS方法
不同的点在于计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 a,b还没有发生改变，多次访问 sum计算属性会立即返回之前的计算结果，而不必再次执行函数.
<template>
<div class="hello">
<el-row>
<el-button type="danger" @click="sum += 1">welcome</el-button>
</el-row>
<el-row>
<span>{{sum}}</span>
</el-row>
<el-row>
<span>{{ add() }} </span>
</el-row>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
props: {
msg: String
},
data(){
return{
a:1,
b:2,
sum1:0
}
},
computed:{
sum:{
get:function(){
return this.a + this.b
},
set:function(newValue){
window.console.log(newValue)
console.log(‘setter‘)
this.a+=10
}
}
},
methods:{
add:function(){
return this.a +this.b
}
}
}
</script>
计算属性vs侦听属性
当需要在数据变化执行异步或开销较大的操作时，需要使用watch.
watch的基本用法: 当值发生变化时，watch监听并且执行
<template>
<div class="hello">
<el-row>
<el-button type="danger" @click="sum += 1">welcome</el-button>
</el-row>
<el-row>
<span>{{sum}}</span>
</el-row>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
props: {
msg: String
},
data(){
return{
a:1,
b:2,
sum1:0
}
},
watch:{
a(newValue,oldValue){
console.log(‘a改变了‘)
}
},
computed:{
sum:{
get:function(){
return this.a + this.b
},
}
}
}
</script>
这样使用watch时会有存在一个问题：值第一次绑定的时候不会执行监听函数，只有值发生改变的时候才会执行。如果需要在绑定值得时候就触发函数的话，需要handler和immediate属性。
watch:{
a:{
handler(newValue,oldValue){
console.log(‘a改变了‘)
},
immediate:true
}
},
如果需要监听某个对象里面的属性值的变化，需要用到deep属性
watch:{ a:{ handler(newValue,oldValue){ console.log(‘a改变了‘) }, immediate:true, deep:true } },
但是这样使用会耗费很大的性能，可以简化：
data(){ return{ a:{ value:1 }, b:2, sum1:0 } }, watch:{ "a.value":{ handler(newValue,oldValue){ console.log(‘a改变了‘) }, immediate:true, //deep:true } },
标签：相关 color first ops win bsp 执行 响应 new
原文地址：https://www.cnblogs.com/peilin-liang/p/11941057.html
