Vue绑定机制疑问：响应式变量变更为何触发普通函数自动执行？

return (  <ChildComponent :model-value="getFruitType(selectedFruit)" @update:model-value="onSelectFruit">
  ...
</template>
```

响应式变量声明：
```javascript
const selectedFruit = ref({});
```

普通函数定义：
```javascript
const getFruitType = (selectedFruit) => { 
  return { fruitName: selectedFruit.name } 
}
```

### 核心疑问
当`selectedFruit`变更时，Vue会自动调用`getFruitType`来更新`ChildComponent`的`model-value`属性。想搞懂这背后的机制：Vue是不是会检测绑定表达式里的响应式变量，然后自动重新计算整个表达式？这种自动更新难道不是只有`computed`属性才有的特性吗？

---

# 原理说明

这是Vue响应式系统结合模板渲染机制的正常表现，绝非只有`computed`才会触发自动更新：

- Vue渲染模板时，会对所有绑定表达式（包括这种调用普通函数的表达式）做依赖收集：当表达式执行时，访问到`selectedFruit`这个响应式变量，Vue就会把该表达式和`selectedFruit`建立依赖关联。
- 当`selectedFruit`的内容变化时，响应式系统会通知所有依赖它的绑定表达式重新执行，所以`getFruitType`会被再次调用，计算出的新结果会同步更新给子组件的prop。

它和`computed`的核心区别在于缓存：
- `computed`会缓存计算结果，只有依赖的响应式变量变化时才重新计算，多次访问同一`computed`属性不会重复执行函数。
- 模板里的绑定表达式没有缓存，每次组件因依赖变更重新渲染时，都会重新执行整个表达式，也就是每次都会调用`getFruitType`。

总结来说：只要绑定表达式里用到了响应式变量，Vue就会自动追踪依赖，变量变更就重新计算表达式——这是Vue模板渲染的基础逻辑，`computed`只是在这个逻辑之上做了缓存优化而已。

---

> 内容的提问来源于stack exchange，提问作者user928112)