Vue3.js - 计算属性&监视属性

1. 计算属性

计算属性是基于响应式数据的值，且可以缓存。相比于复杂逻辑的模板或方法，计算属性简洁高效，当所依赖的的响应式数据发生变化时，计算属性会自动更新。计算属性必须与data中某个数据相关联，关联数据被修改时，计算数据此刻会被更新。

1.1 完整形式

实际上计算属性是一个类，在类中包含get与set两种方法，分别对计算属性进行读取与修改

其中函数进行调用时，会默认传入一个Vue对象，其中包含Vue中的data数据，所有当我们需要在计算属性内部使用dat数据时，需要在前面加上this.

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="foot">
        <h2>{{number}}</h2>
        <h2>{{calculate}}</h2>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                number:1,
            }
        },
        computed:{
            calculate:{
                get(){
                    return this.number
                },
                set(value){
                    this.number = this.number + value
                }
            }
        }
    })
    vm = app.mount('#foot')
</script>

1.2 简写形式

简写形式只用于只读状态，定义为一个函数形式，返回我们所需要的computed属性

            times10(){
                return this.number * 10
            }

2. 监视属性

监视属性（watchers） 是用于监控组件中某些数据的变化，并在变化时执行自定义操作的工具。它非常适合处理 异步操作（如 API 请求）或复杂的逻辑，例如响应式地更新其他数据或触发副作用。

实质上就是当某些数据发生变化后运行简述属性中的相关内容

2.1 简写形式

直接以函数的方式进行定义监视属性

        watch:{
            number(newvalue,oldvalue){
                console.log('This has been changed')
            }

number是我们data中存储的数据，通过函数的形式进行定义，传入newvalue以及oldvalue两个参数，当监视属性检测到对应数据被改改变后将会执行相应内容。

2.2 完整形式

完整形式的监视属性可以配置多种参数以此达到不同需求实现

通过回调函数handler，当 number 发生变化时，handler 会被调用，并接收新的和旧的值作为参数。

            id:{
                handler(newvalue){
                    console.log('hahahah')
                }
            }

2.2.1 深度监视

在Vue中数据内部如果是一个对象形式，普通的监视属性无法监视其内部的变化，Vue中的watch默认不监测对象内部值的改变。

此时我们需要针对于监视属性配置相应的选项：

            id:{
                handler(newvalue){
                    console.log('hahahah')
                },
                deep:true
            }

2.2.2 立即执行

想要在加载之后直接调用，我们需要配置我们的immediate属性

watch: {
    number: {
        handler(newValue) {
            console.log(`Initial value: ${newValue}`);
        },
        immediate: true  // 初始化时立即调用
    }
}

2.2.3 监视计算属性

对于所定义的计算属性我们也可实施监视，但计算属性所依赖的数据代理改变后，监视捕捉执行所对应的方法。

const app = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        fullName() {
            return `${this.firstName} ${this.lastName}`;
        }
    },
    watch: {
        fullName(newVal) {
            console.log(`Full name changed to ${newVal}`);
        }
    }
});

app.mount('#app');