Vue3.0 - 02. 计算属性与监视属性

Vue3.0 学习系列

计算属性

1. 与vue2中的写法基本一致，直接在setup中定义计算属性 计算属性:computed()
2. 只有get的简写形式 计算属性:computed(()=>{ return xxx })
3. 有get有set的写法 计算属性:computed({ get(){ return xxx }, set(value){ xxx } })

let fullName = computed(() => {
    return firstName + '-' + lastName;
}),
//完整写法
let fullName = computed({
    get() {
        return person.firstName + '-' + person.lastName;
    },
    set(value) {
        person.firstName = value.split('-')[0];
        person.lastName = value.split('-')[1];
    }
})

监视属性

1. watch([需要监视的属性],(newValue,oldValue)=>{ 监视的方法 },{ immediate:true,deep:true })
2. 监视ref基本类型数据,可以将需要监视的属性以数组的形式作为第一个参数,第二个参数是监视的方法，第三个参数是监视的配置项
3. 当watch监视的是reactive的对象时，无法正确的获取到oldValue的值
4. 当watch监视的是reactive的对象时，默认就开启了深度监视 deep配置无效
5. 当watch监视的是reactive的对象的某个属性,且该属性又是一个对象是，需要配置deep深度监视.例如 监视person.job 但是job依旧是一个对象，此时就需要deep深度监视

// 1. 监视ref基本数据类型
watch([sum, message], (newValue, oldValue) => {
    console.log('sum或message改变了',newValue,oldValue);
}, { immediate: true })
// 2. 监视reactvie对象类型 deep无效无需配置
watch([person], (newValue, oldValue) => {
    console.log('person改变了',newValue,oldValue);
}, { immediate: true })
// 3. 监视reactvie对象类型的某一个属性
watch(()=>person.firstName, (newValue, oldValue) => {
    console.log('person的firstName改变了',newValue,oldValue);
}, { immediate: true })
// 4. 监视reactvie对象类型的一些属性
watch([()=>person.firstName,()=>person.lastName], (newValue, oldValue) => {
    console.log('person的firstName、lastName改变了',newValue,oldValue);
}, { immediate: true })
// 5. 当监视reactive数据的某个对象，且对象内部依旧是一个对象时，需要开启deep深度监视。否则监视不到
watch([()=>person.job], (newValue, oldValue) => {
    console.log('person的job改变了',newValue,oldValue);
}, { immediate: true,deep:true})

watchEffect

1. 不用指明监视的属性，监视的回调中用到那个属性，就监视那个属性。
2. watchEffect与computed有点类似。但 computed 注重计算出来的值（回调函数的返回值），所以一定要有return。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

watchEffect(() => {
    console.log(JSON.stringify(person));
    console.log('watchEffect监视');
})

student.vue

<template>
    <div>
        <h2>Student组件</h2>
        <h2>计算属性-computed</h2><br/>
        <span>姓：</span><input type="text" v-model="person.firstName" /><br/>
        <span>名：</span><input type="text" v-model="person.lastName" /><br/>
        <span>爱好:{{person.hobby}}</span><br/>
        <span>全名:{{fullName}}</span><br/>
        <span>修改全名</span><input type="text" v-model="fullName" /><br/>
        <span>stu的Job  </span>{{JSON.stringify(person.job)}}
        <hr />
        <h2>监视属性-watch</h2><br/>
        <span>求和:{{sum}},信息:{{message}}</span><br/>
        <button @click="btnEdit">修改sum和message</button>
        <button @click="btnStuName">修改stu的姓名</button>
        <button @click="btnEditStuHobby">修改stu的爱好</button>
        <button @click="btnEditStuJobA">修改job中的a值</button>
    </div>
</template>
  
<script>

import {ref, computed, reactive,watch, watchEffect} from 'vue';
export default {
    name: 'Student',
    setup(props, context) {
        let sum = ref(0)
        let message = ref('消息')
        let person = reactive({
            firstName: 'odin',
            lastName: 'sam',
            hobby: ['抽烟', '喝酒', '烫头'],
            job: {
                a:{x:1,y:2}
            }
        })
        let btnEdit = function () {
            sum.value++;
            message.value+="~"
        }
        let btnStuName = function () {
            person.firstName += "!";
            person.lastName += "~";
        }
        let btnEditStuHobby = function () {
            person.hobby.push('学习')
        }

        let btnEditStuJobA = function () {
            person.job.a.x += 10;
        }
/**
        计算属性
        1. 与vue2中的写法基本一致，直接在setup中定义计算属性  计算属性:computed()
        2. 只有get的简写形式 计算属性:computed(()=>{ return xxx })
        3. 有get有set的写法 计算属性:computed({ get(){ return xxx }, set(value){ xxx } })
*/
        //简写
        // let fullName = computed(() => {
        //     return firstName + '-' + lastName;
        // }),
        //完整写法
        let fullName = computed({
            get() {
                return person.firstName + '-' + person.lastName;
            },
            set(value) {
                person.firstName = value.split('-')[0];
                person.lastName = value.split('-')[1];
            }
        })
/**
        监视属性
        1. watch([需要监视的属性],(newValue,oldValue)=>{ 监视的方法 },{ immediate:true,deep:true })
        2. 监视ref基本类型数据,可以将需要监视的属性以数组的形式作为第一个参数,第二个参数是监视的方法，第三个参数是监视的配置项
        3. 当watch监视的是reactive的对象时，无法正确的获取到oldValue的值
        4. 当watch监视的是reactive的对象时，默认就开启了深度监视 deep配置无效
        5. 当watch监视的是reactive的对象的某个属性,且该属性又是一个对象是，需要配置deep深度监视.例如 监视person.job 但是job依旧是一个对象，此时就需要deep深度监视
*/

        // 1. 监视ref基本数据类型
        watch([sum, message], (newValue, oldValue) => {
            console.log('sum或message改变了',newValue,oldValue);
        }, { immediate: true })
        // 2. 监视reactvie对象类型 deep无效无需配置
        watch([person], (newValue, oldValue) => {
            console.log('person改变了',newValue,oldValue);
        }, { immediate: true })
        // 3. 监视reactvie对象类型的某一个属性
        watch(()=>person.firstName, (newValue, oldValue) => {
            console.log('person的firstName改变了',newValue,oldValue);
        }, { immediate: true })
        // 4. 监视reactvie对象类型的一些属性
        watch([()=>person.firstName,()=>person.lastName], (newValue, oldValue) => {
            console.log('person的firstName、lastName改变了',newValue,oldValue);
        }, { immediate: true })
        // 5. 当监视reactive数据的某个对象，且对象内部依旧是一个对象时，需要开启deep深度监视。否则监视不到
        watch([()=>person.job], (newValue, oldValue) => {
            console.log('person的job改变了',newValue,oldValue);
        }, { immediate: true, deep: true }),

/**
        watchEffect
        1. 不用指明监视的属性，监视的回调中用到那个属性，就监视那个属性。
        2. watchEffect与computed有点类似。但 computed 注重计算出来的值（回调函数的返回值），所以一定要有return。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
*/
        watchEffect(() => {
            console.log(JSON.stringify(person));
            console.log('watchEffect监视');
        })
        return {
            person,fullName,btnEdit,sum,message,btnStuName,btnEditStuHobby,btnEditStuJobA
        }
    }
}
</script>
  
<style>
</style>

Vue2.0 基础学习目录

Vue2.0进阶学习

完整代码可以在 GitHub