wacth的使用性能

孙祖件传值修改config中的某个key并更新config，

const updateUserPreference = (val) => {
//判断新值和旧值不一样再执行
  if (JSON.stringify(val) !== JSON.stringify(props.config.userPreference)) {
    emits("update:config", { ...props.config, userPreference: val });
  }
};

const userPreference = computed({
  get: () => props.userPreference,
  set: (val) => updateUserPreference(val),
});

watch(
  () => props.config.global.backgroundColor,
  (newVal) => {
    if (newVal) {
      if (userPreference.value.color[0] === "#000000") {
        userPreference.value.color[0] = bgColor.value;
      } else if (userPreference.value.color[0] === "#FFFFFF") {
        userPreference.value.color[0] = bgColor.value;
      }
      updateUserPreference(userPreference.value);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

总结：因为在监听器中更新了 userPreference 对象，并触发了 userPreference 的 set 函数，从而又触发了 updateUserPreference 方法，导致了循环更新。为了解决这个问题，您可以在 updateUserPreference 方法中添加一个判断，只有在值发生了变化时才触发更新。