fix: data unexpected marked changed

Author: YuJianghao

packages/hexon-web/src/components/editors/HCategoriesEditor.vue

@@ -5,6 +5,7 @@ import { HBadge } from "@/ui/badge"
 import { HInput } from "@/ui/input"
 import { useThemeVars } from "@/ui/theme"
 import { uniq } from "lodash-es"
+import { stringArrayEqual } from "~/utils/string"
 const props = defineProps<{
   availableCats: string[]
   categories: string[]
@@ -18,29 +19,19 @@ const allCategories = computed(() => {
   return uniq(categories.value.concat(props.availableCats)).sort()
 })
 watch(
-  () => props.categories,
-  (v) => {
-    categories.value = v
-  },
-  {
-    deep: true,
+  () => [...props.categories],
+  (v, old) => {
+    if (!stringArrayEqual(v, old)) categories.value = v
   }
 )
 watch(
-  () => categories.value,
-  (v) => {
-    emits("update:categories", v)
-  },
-  {
-    deep: true,
+  () => [...categories.value],
+  (v, old) => {
+    if (!stringArrayEqual(v, old)) emits("update:categories", v)
   }
 )
-// setTimeout(() => {
-//   categories.value.push("1")
-// }, 1000)
 const onNewCat = () => {
   if (newCat.value) {
-    // categories.value = [newCat.value]
     categories.value.push(newCat.value)
     newCat.value = ""
   }

packages/hexon-web/src/components/editors/HMonacoEditor.vue

@@ -30,7 +30,8 @@ onMounted(() => {
 
   resetModal()
   instance.onDidChangeModelContent(() => {
-    emits("update:value", instance.getValue())
+    const newValue = instance.getValue()
+    if (newValue !== props.value) emits("update:value", newValue)
   })
 
   setTimeout(() => {

packages/hexon-web/src/components/editors/HTagEditor.vue

@@ -5,6 +5,7 @@ import { HInput } from "@/ui/input"
 import { HIcon, HIconName } from "@/ui/icon"
 import { HBadge } from "@/ui/badge"
 import { useThemeVars } from "@/ui/theme"
+
 const props = defineProps<{
   availableTags: string[]
   tags: string[]
@@ -17,21 +18,15 @@ const newTag = ref("")
 
 const tags = ref<string[]>(props.tags)
 watch(
-  () => props.tags,
-  (ts) => {
-    tags.value = ts
-  },
-  {
-    deep: true,
+  () => [...props.tags],
+  (ts, old) => {
+    if (ts.join("") !== old.join("")) tags.value = ts
   }
 )
 watch(
-  () => tags.value,
-  (ts) => {
-    emits("update:tags", ts)
-  },
-  {
-    deep: true,
+  () => [...tags.value],
+  (ts, old) => {
+    if (ts.join("") !== old.join("")) emits("update:tags", ts)
   }
 )
 const allTags = computed(() => {

packages/hexon-web/src/utils/string.ts

@@ -0,0 +1,3 @@
+export function stringArrayEqual(n: string[], o: string[]) {
+  return n.join("") === o.join("")
+}

packages/hexon-web/src/views/EditorView.vue

@@ -20,8 +20,6 @@ import HToolbar from "@/HToolbar.vue"
 import HLayoutEditor from "@/editors/HLayoutEditor.vue"
 import HNavTitle from "@/ui/nav-list/src/HNavTitle.vue"
 import ErroredView from "./ErroredView.vue"
-import dayjs from "dayjs"
-import HDatePicker from "~/components/ui/date-picker/src/HDatePicker.vue"
 
 const [HMonacoEditor, monacoLoading] = useAsyncComponentWithLoading(
   () => import("@/editors/HMonacoEditor.vue")
@@ -104,18 +102,23 @@ const updateFromObj = (obj: any) => {
   setChanged()
 }
 const updateTitle = (title: string = "") => {
+  console.log("updateTitle")
   updateFromObj({ title })
 }
 const updateContent = (_content: string) => {
+  console.log("updateContent")
   updateFromObj({ _content })
 }
 const updateTags = (tags: string[] = []) => {
+  console.log("updateTags")
   updateFromObj({ tags })
 }
 const updateCategories = (categories: string[] = []) => {
+  console.log("updateCategories")
   updateFromObj({ categories })
 }
 const updateLayout = (layout: string = "") => {
+  console.log("updateLayout")
   updateFromObj({ layout })
 }
 //#endregion