1. 计算属性—computed
- 定义
- 需要使用的属性不存在,要通过已存在的属性计算得到
- 原理
- 底层借助了Objcet.defineproperty()方法提供的getter和setter。
对于任何复杂逻辑,都应当使用计算属性。
Demo.vue---计算属性完整写法
<template>
<div>
<input type="text" v-model="first_name">
<input type="text" v-model="last_name">
<h4>你的姓名是: {{fullName}}</h4>
</div>
</template>
<script>
export default {
name: 'Demo2',
data() {
return {
first_name: '张',
last_name: '三',
}
},
computed: {
fullName: {
get() {
return this.first_name + '-' + this.last_name
},
set(value) {
const arr = value.split('-')
this.first_name = arr[0]
this.last_name = arr[1]
},
},
},
}
</script>
Demo---简写形式
<template>
<div>
<input type="text"
v-model="first_name">
<input type="text"
v-model="last_name">
<h4>你的姓名是: {{fullName}}</h4>
</div>
</template>
<script>
export default {
name: 'Demo2',
data() {
return {
first_name: '张',
last_name: '三',
}
},
computed: {
fullName() {
return this.first_name + '-' + this.last_name
},
},
}
</script>
第一次渲染展示
更改输入框数据
2. 监视属性—watch
- 当监视的属性发生变化时,自动调用响应的回调函数
计算属性和监视属性的区别:
- 功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
- 是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。
- 是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。
- computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)
- 使用场景:computed----当一个属性受多个属性影响的时候,使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候,使用watch-----搜索框.
Demo.vue---监视属性的完整写法
<template>
<div>
<h3>你当前状态是:{{nowState}}</h3>
<button @click="changeState">点我切换状态</button>
</div>
</template>
<script>
export default {
name: 'Demo3',
data() {
return {
isSlack: false
}
},
methods: {
changeState() {
this.isSlack = !this.isSlack
}
},
computed: {
nowState() {
return this.isSlack ? '摸鱼' : '躺平'
}
},
watch: {
isSlack: {
// 第一次加载时执行一次
immediate: true,
// 开启深度监视
deep: true,
handler(newValue, oldValue) {
console.log(`状态被修改,newValue:${newValue}, oldValue: ${oldValue}`);
}
}
}
}
</script>
第一次加载展示---由于第一次加载的时候数据并没有改变,所以oldValue的值为undefined
点击按钮进行数据修改之后展示
Demo.vue---监视属性简写形式
简写形式的watch无法进行开启深度监视和第一次加载时执行
<template>
<div>
<h3>你当前状态是:{{nowState}}</h3>
<button @click="changeState">点我切换状态</button>
</div>
</template>
<script>
export default {
name: 'Demo3',
data() {
return {
isSlack: false
}
},
methods: {
changeState() {
this.isSlack = !this.isSlack
}
},
computed: {
nowState() {
return this.isSlack ? '摸鱼' : '躺平'
}
},
watch: {
isSlack(newValue, oldValue) {
console.log(`状态被修改,newValue:${newValue}, oldValue: ${oldValue}`);
}
}
}
</script>
第一次加载页面展示---简写形式无法开启第一次加载时执行一次
点击按钮进行修改数据之后的页面展示