vue3计算属性computed属性

---

---

---

一、什么是计算属性：

computed函数，是用来定义计算属性的，计算属性不能修改。
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

二、computed运行原理

computed的属性是动态挂载到vm实例上的，和普通的响应式数据在data里声明不同
设置computed的getter，如果执行了computed对应的函数，由于函数会读取data属性值，因此又会触发data属性值的getter函数，在这个执行过程中就可以处理computed相对于data的依赖收集关系了
首次计算computed的值时，会执行vm.computed属性对应的getter函数（用户指定的computed函数，如果没有设置getter，那么将当前指定的函数赋值computed属性的getter），进行上述的依赖收集
如果computed的属性值又依赖了其他computed计算属性值，那么会将当前target暂存到栈中，先进行其他computed计算属性值的依赖收集，等其他计算属性依赖收集完成后，在从栈中pop出来，继续进行当前computed的依赖收集

三、vue2的写法

代码如下（示例）：

<template>
	<h1>一个人的信息</h1>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	<span>全名：{{fullname}}</span>
	<br>

</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'Demo',
    computed:{
        fullname(){
          return this.person.firstName+"-"+this.person.lastName
        }
    },
		setup(){
			//数据
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
	

			//返回一个对象（常用）
			return {
				person
			}
		}
	}
</script>

---

vue3的写法

<template>
	<h1>一个人的信息</h1>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	<span>全名：{{person.fullName}}</span>
	<br>
	全名：<input type="text" v-model="person.fullName">
</template>

<script>
	import {reactive,computed} from 'vue'
	export default {
		name: 'Demo',
		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){
			// 		const nameArr = value.split('-')
			// 		person.firstName = nameArr[0]
			// 		person.lastName = nameArr[1]
			// 	}
			// })

			//返回一个对象（常用）
			return {
				person
			}
		}
	}
</script>

data 属性初始化 getter setter
computed 计算属性初始化，提供的函数将用作属性 vm.fullName 的 getter
当首次获取 fullName 计算属性的值时，Dep 开始依赖收集
在执行 message getter 方法时，如果 Dep 处于依赖收集状态，则判定firstName和lastName为fullName 的依赖，并建立依赖关系
当firstName或lastName 发生变化时，根据依赖关系，触发 fullName 的重新计算
如果计算值没有发生变化，不会触发视图更新

总结

通过以上的分析，我们知道计算属性本质上就是一个 computed watcher，也了解了它的创建过程和被访问触发 getter 以及依赖更新的过程，其实这是最新的计算属性的实现，之所以这么设计是因为 Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化才会触发渲染 watcher 重新渲染，本质上是一种优化。

注：现在有两个computed计算值，其中一个computed计算值为什么可以依赖另外一个computed计算值？

在Vue 3中，computed属性可以依赖其他的computed属性。这是因为Vue 3使用了新的响应式系统，它能够更好地追踪数据的依赖关系。当一个组件中存在多个computed属性时，每个computed都会根据其自己的依赖进行计算，并且当任何一个依赖发生变化时，该computed也会相应地重新计算其值。
这种方式方便了开发者编写可读性更高，依赖关系更清晰的代码。