Vue3 中的盘算属性和监听属性
1. 盘算属性computed作用：根据已有数据盘算出新数据（和Vue2中的computed作用一致）
<template>
<div class="person">
<input type="text" v-model="person.firstName"/>
<br>
<input type="text" v-model="person.lastName"/>
<br>
<span>全名：{{ person.fullName }}</span>
<input type="text" v-model="person.fullName"/>
</div>
</template>
<script>
import { reactive,computed } from 'vue'
export default {
name: 'Computed',
setup() {
let person = reactive({
firstName: '李',
lastName: '四',
})
//简写形式（只能读）
person.fullName = computed(() => {
return person.firstName + '-' + person.lastName
})
//完整形式（可读可改）
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value){
let names = value.split('-')
person.firstName = names
person.lastName = names
},
})
return {
person,
}
}
}
</script> 2. 监听属性 watch
<template>
<div>{{ sum }}</div>
<button @click="sum++">点我+1</button>
<hr>
<div>{{ msg }}</div>
<button @click="msg += '!'">点我修改信息</button>
<hr>
<h3>姓名：{{ person.name }}</h3>
<h3>年龄：{{ person.age }}</h3>
<h3>薪资：{{ person.job.j1.salary }}K</h3>
<button @click="person.name += '!'">点我修改姓名</button>
<button @click="person.age++">点我修改年龄</button>
<button @click="person.job.j1.salary += 10">点我修改薪资</button>
</template>
<script>
import { reactive, ref, watch, watchEffect } from 'vue'
export default {
name: 'Watch',
setup() {
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
name: '张三',
age: 18,
job: {
j1: {
salary: 20
}
}
})
// .....下文在这边补充
return {
sum,
msg,
person
}
}
}
</script> 【环境一】监听ref定义的一个响应式数据
监听sum的值的变化
watch(sum, (newVal, oldVal) =>{
console.log('sum的值发生了变化', newVal, oldVal);
}, {immediate: true})// {immediate: true, deep: true} 【环境二】 监听ref定义的多个响应式数据
监听sum, msg的值的变化
watch(, (newVal, oldVal) => { // 包装成数组的形式
console.log('sum或msg的值发生了变化', newVal, oldVal);
},{immediate: true}) 【环境三】监听reactive定义的一个响应式数据的全下属性
注意：此处无法正确的获取oldValue
watch(person, (newVal, oldVal) =>{
console.log('person的值发生了变化', newVal, oldVal)
}) // {deep: false} 加上这个，就监测不到薪资改变了 【环境四】监听reactive定义的一个响应式数据中的某个属性
watch(() => person.name, (newVal, oldVal) =>{
console.log('person的name属性发生了变化', newVal, oldVal)
}) 【环境五】监听reactive定义的一个响应式数据中的某些属性
watch([() => person.name, () => person.age], (newVal, oldVal) =>{
console.log('person的name或age属性发生了变化', newVal, oldVal)
}) 【环境六】特殊环境
watch(() => person.job, (newVal, oldVal) =>{
console.log('person的job属性发生了变化', newVal, oldVal)
}, {deep: true})
3. watchEffect
用谁就监视谁
watchEffect(() =>{ // 用谁就监视谁
const x1 = sum.value
const x2 = person.job.j1.salary
console.log('watchEffect所指定的回调函数执行了')
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]