vue3的中间值思维

在用vue框架的开发的时候，经常使用到的一种中间值思维，什么是中间值思维，就是通过一个间接的属性去改变需要渲染的值

我们在传值的时候，如果是用的mitt传值，那传过来的值就是在bus.on函数中，我们就得取出来，然后再赋值到模板语法中，那怎么从bus.on函数中取到值呢？

我们就得先定义一个中间值

const midvalue = ref()

思路就是把bus.on传递到的值赋值给这个中间值，然后在模板上把中间值的值作为模板语法的值插入

代码如下：

<template>
// 把中间值赋值给模板语法 第三步
<div>{{midvalue}}</div>
</template>

<script setup>
import { ref } from 'vue'
import { bus } from 'mitt.js'
// 创建中间值 第二步
const midvalue = ref()
// 把接收到的值赋值给中间值 第一步
bus.on('事件名',(接收到的值)=>{
	midvalue.value = 接收到的值
})

</script>

同样的道理，如果有一个div中的数据是动态变化的，也就是有多个值对应着这个div中的数据，我们就要用一个中间值去接受不同的数据

真实场景就是有三个按钮，一个div，点击按钮会在模板中渲染不同的数字，那么实现的思路就是，点击按钮的时候，click绑定的函数把对应的数值赋值给midvalue，然后midvalue再把值传递给模板语法

为什么要这样做？直接渲染不行吗？
因为div中的模板值是固定的，类似如下

<div>{{ name }}</div>

这个name是不会改变的，所以能改变的只有name对应的值，那么这个值我们用一个中间值来承载，就可以简介的改变name中的数值