遇到的问题：利用:style绑定响应式变量并结合css来动态更换颜色，绑定的响应式变量无法正常渲染

结论：本人将:style绑定响应式变量的值写在onMounted里面了，一个大失误，记录一下，利用setup语法糖默认初始化阶段立即执行，然而onMounted是组件的DOM已经被挂载到页面上之后调用，颜色应该在setup初始化阶段立即执行

正确写法如下：

<!-- view -->
<view class="movAreaBox" :style="{'--backgroundcolor':menuButton}"></view>//script
<script setup>import {ref,onMounted} from 'vue';const menuButton = ref('red')
onMounted(() => {})</script>/* style */
<style>.movAreaBox {background-color: var(--backgroundcolor);width: 100vw;height: 100vh;display: flex;justify-content: center;}</style>

本人错误写法如下：

<!-- view -->
<view class="movAreaBox" :style="{'--backgroundcolor':menuButton}"></view>//script
<script setup>import {ref,onMounted} from 'vue';onMounted(() => {const menuButton = ref('red')  //导致背景颜色一直不能正确的渲染
})</script>/* style */
<style>.movAreaBox {background-color: var(--backgroundcolor);width: 100vw;height: 100vh;display: flex;justify-content: center;}</style>