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');