一、计算属性computed
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。对比普通函数方式,每次访问都需要执行一遍函数。
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter 。
例子
<script>
// @ is an alias to /src
export default {
data () {
return {
title: '标题',
}
},
computed: {
// 第一钟写法
ctitle () {
return this.title
},
// 第二种写法
ctitle2: function () {
return this.title
},
// 第三种写法
ctitle3: {
// 默认只有getter
get: function () {
return this.title
},
}
}
}
</script>
二、侦听属性watch
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例子
watch: {
// 监听一个对象属性变化
obj: {
handler (newVal, oldVal) {
console.log('监听对象的属性变化:', newVal)
},
deep: true
},
// 监听对象中name属性变化
'obj.name': {
handler (newVal, oldVal) {
console.log('监听对象中name属性:', newVal)
}
},
// 监听基数数据类型第一种写法
info (newVal, oldval) {
console.log(oldval, newVal)
},
// 监听基数数据类型第二种写法
title: {
handler (newVal, oldVal) {
this.obj.name = newVal
}
}
}
三、实现vue中监听某一个属性值的变化
- 监听data中某一个对象中属性变化
<template>
<div class="home">
<p>侦听属性:obj.name={{obj.name}}</p>
<p>计算属性检测:obj.name={{comName}}</p>
<input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'home',
data () {
return {
title: '',
obj: { name: '对象标题' }
}
},
computed: {
comName () {
return this.obj.name
}
},
watch: {
// 第一种写法
obj: {
handler (newVal, oldVal) {
console.log('监听对象的属性变化:', newVal)
},
deep: true
},
// 第二种写法
'obj.name': {
handler (newVal, oldVal) {
console.log('监听对象中name属性:', newVal)
}
},
title: {
handler (newVal, oldVal) {
this.obj.name = newVal
}
}
}
}
</script>
- 监听data中基本数据类型属性变化
<template>
<div class="home">
<p>{{ctitle}}</p>
<input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'home',
data () {
return {
title: '标题'
}
},
computed: {
ctitle () {
return this.title
}
},
watch: {
title: {
handler (newVal, oldVal) {
console.log(newVal, oldVal)
}
}
}
}
</script>