Vue.js如何在函数内更新ref值并在模板中正确渲染显示

无法更新模板渲染值的核心原因是JavaScript作用域变量遮蔽：
changeColor事件回调的形参被命名为color，和外层通过ref()声明的响应式变量重名，函数内部访问color时，拿到的永远是事件传入的参数对象，不是外层的响应式ref，所以写的color.value = xxx根本没有修改到需要在模板渲染的响应式状态，模板自然始终显示空字符串。
顺带还有两个影响运行效果的小问题：

• 模板插值里把字符串拼接的+写到了引号内部，会直接把+作为普通文本渲染
• 代码中绑定了@openSucker="openSucker"但没有定义对应方法，运行时会抛未定义错误
• 颜色预览块的背景样式错误绑定了suckerCanvas（canvas元素引用），无法显示选中的颜色

1. 修改changeColor的形参名，和外层响应式变量做区分，避免作用域冲突
2. 修正模板插值的写法，直接输出响应式变量即可
3. 补全缺失的openSucker方法（如果不需要吸色功能可以直接删掉该事件绑定）
4. 修正颜色预览块的样式绑定值

<script setup>
  import {ref} from 'vue';
  import { ColorPicker } from 'vue-color-kit';
  import 'vue-color-kit/dist/vue-color-kit.css'

  const color = ref('');
  const suckerCanvas = ref(null);
  const suckerArea = ref([]);
  const isSucking = ref(false);

  // 形参改名为pickerColor，和外层响应式color做区分
  const changeColor = (pickerColor) => {
    const { r, g, b, a } = pickerColor.rgba;
    console.log(r,g,b,a, "RGBA VALUE");
    // 此处赋值才会修改外层响应式状态，触发模板更新
    color.value =  `rgba(${r}, ${g}, ${b}, ${a})`;
    console.log(color.value, "COLOR VALUE");
  }

  // 补全openSucker回调，不需要可直接删除模板对应绑定
  const openSucker = (status) => {
    isSucking.value = status;
  }
</script>

<template>
<div class="row">
    <div class="col-md-4">
        <color-picker
            theme="dark"
            :color="color"
            :sucker-hide="false"
            :sucker-canvas="suckerCanvas"
            :sucker-area="suckerArea"
            @changeColor="changeColor"
            @openSucker="openSucker"
        />
    </div>
    <div class="col-md-4"></div>
    <div :style="{background: color}" class="col-md-4"></div>
    <!-- 修正插值语法 -->
    <div :key="color">The color is {{ color }}</div>
</div>
</template>

内容的提问来源于stack exchange，提问作者joey