Vue基础知识|Vue3之计算属性和监视 javascript|前端|vue.js

代码代码

setup> import {reactive,watch,watchEffect,computed,ref} from "vue"const person = reactive({ firstName:"Sun", lastName:"WuKong" })// 计算属性只有getter const fullName1 = computed(() => `${person.firstName}-${person.lastName}`) // 计算属性 getter setter const fullName2 = computed({ set(value){ // 当他改变的时候，其他数据的变化 const [firstName,lastName] = value.split("-") person.firstName = firstName person.lastName = lastName }, get(){ return `${person.firstName}-${person.lastName}` } }) // 属性监视 const fullName3 = ref("") // 监视整个对象 watch(person,(value,oldValue) => { console.log("watch person",value,oldValue); fullName3.value = https://www.it610.com/article/`${value.firstName}-${value.lastName}` },{deep:true,immediate:true}) // 深度监视并立即监视// 监视fullName3 watch(fullName3,newValue => { console.log("watch fullName3",newValue); const [firstName,lastName] = newValue.split("-") person.firstName = firstName person.lastName = lastName },{deep:true,immediate:true}) // 监视多个属性 watch([() => person.firstName,() => person.lastName, fullName3], (values) => { console.log("watch多个值",values); })// 监听所有回调中使用的数据 watchEffect(() => { // 在当前回调中使用的数据都会被监听 console.log("回调中使用的数据",person.firstName,fullName3.value); })

效果

文章图片

对于代码的解释计算属性只有getter

当前属性开其他值对于这个属性进行赋值，比如fullName1 ，他的值是由person.firstName和person.lastName共同决定的

当只有getter的时候，也就是计算属性的值依靠其他的属性的时候，只需要在computed函数中传一个回调就可以了

getter和setter

【Vue基础知识|Vue3之计算属性和监视】如果计算属性既有getter和setter就表示当前属性的值依赖与其他的属性，但是当前的值改变的时候，也会有其他影响

如fullName2 他的值依赖与person.firstName和person.lastName，但是他改变的时候也会影响person.firstName和person.lastName
当计算属性有getter和setter的时候，我们的computed需要传一个对象，对象中有get和set方法，get的方法用于对于计算属性进行赋值，set的方法用于当前属性改变的时候做出的动作

监视