【vue3】reactive里面使用计算属性改变属性值

reactive是用来定义引用数据类型的，它有个很讨厌的地方
看这

此处是我想通过from的值去渲染不同的title，就用了三元表达式，但是有个问题，就是reactive里面，它监听不到from的变化，from的值明明变化了，但是页面上的title还是没变

<div>{{data[0].title}}<div>

const data = reactive([
	{
		title: from.value ? '哈哈' : '呵呵'
	},
	{
		title: '喜喜'
	}
])

解决方案：

• 比较笨的方法，用if判断from的变化，然后data[0].title去赋值
• 我不想用笨办法，发现可以在reactive内部使用计算属性

const data = reactive([
	{
		get title() {
			return from.value ? '哈哈' : '呵呵'
		} 
	},
	{
		title: '喜喜'
	}
])