Revert "Use markRaw when using dynamic component"

This reverts commit 218cc06b08.
This commit is contained in:
timongh 2023-03-11 00:55:54 +08:00
parent 0292276a8e
commit d659a18c4a
10 changed files with 26 additions and 48 deletions

View File

@ -17,7 +17,7 @@
<template v-if="typeof item.content === 'string'"> <template v-if="typeof item.content === 'string'">
{{ item.content }} {{ item.content }}
</template> </template>
<component :is="markRaw(item.content)" v-else :item="item"></component> <component :is="item.content" v-else :item="item"></component>
</CustomNavbarLink> </CustomNavbarLink>
<div <div
v-else v-else
@ -27,7 +27,7 @@
<template v-if="typeof item.content === 'string'"> <template v-if="typeof item.content === 'string'">
{{ item.content }} {{ item.content }}
</template> </template>
<component :is="markRaw(item.content)" v-else :item="item"></component> <component :is="item.content" v-else :item="item"></component>
</div> </div>
<div v-show="!item.active" class="notify-count"> <div v-show="!item.active" class="notify-count">
@ -43,7 +43,7 @@
> >
<div v-if="item.popupContent" class="popup" :class="popupClasses(item)"> <div v-if="item.popupContent" class="popup" :class="popupClasses(item)">
<component <component
:is="markRaw(item.popupContent)" :is="item.popupContent"
v-if="item.requestedPopup" v-if="item.requestedPopup"
ref="popup" ref="popup"
:container="popupContainer" :container="popupContainer"
@ -57,7 +57,7 @@
<script lang="ts"> <script lang="ts">
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { defineComponent, ref, markRaw } from 'vue' import { defineComponent, ref } from 'vue'
import { addComponentListener, removeComponentListener } from '@/core/settings' import { addComponentListener, removeComponentListener } from '@/core/settings'
import type { PopupContentInstance } from './custom-navbar-item' import type { PopupContentInstance } from './custom-navbar-item'
@ -99,7 +99,6 @@ const ThisComponent = defineComponent({
}, },
}, },
setup: () => ({ setup: () => ({
markRaw,
popup: ref(null) as Ref<PopupContentInstance | null>, popup: ref(null) as Ref<PopupContentInstance | null>,
popupContainer: ref(null) as Ref<HTMLDivElement | null>, popupContainer: ref(null) as Ref<HTMLDivElement | null>,
}), }),

View File

@ -5,13 +5,13 @@
grow: item.grow, grow: item.grow,
}" }"
> >
<component :is="markRaw(item.component)" /> <component :is="item.component" />
</div> </div>
<div v-if="options.linebreak" class="fresh-home-content-layout-item linebreak"></div> <div v-if="options.linebreak" class="fresh-home-content-layout-item linebreak"></div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { defineComponent, markRaw } from 'vue' import { defineComponent } from 'vue'
import { freshHomeOptions } from './types' import { freshHomeOptions } from './types'
import type { FreshLayoutItem } from './layouts/fresh-layout-item' import type { FreshLayoutItem } from './layouts/fresh-layout-item'
@ -22,7 +22,6 @@ export default defineComponent({
type: Object as PropType<FreshLayoutItem>, type: Object as PropType<FreshLayoutItem>,
}, },
}, },
setup: () => ({ markRaw }),
data() { data() {
return { return {
options: freshHomeOptions.layoutOptions[this.item.name] ?? { linebreak: false }, options: freshHomeOptions.layoutOptions[this.item.name] ?? { linebreak: false },

View File

@ -30,13 +30,13 @@
</div> </div>
</div> </div>
<div class="fresh-home-categories-content"> <div class="fresh-home-categories-content">
<component :is="markRaw(content)" :region="selectedTab" /> <component :is="content" :region="selectedTab" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { defineComponent, ref, markRaw } from 'vue' import { defineComponent, ref } from 'vue'
import type { TabType } from './categories' import type { TabType } from './categories'
import { Reorder } from '@/core/reorder' import { Reorder } from '@/core/reorder'
import { ascendingSort } from '@/core/utils/sort' import { ascendingSort } from '@/core/utils/sort'
@ -60,7 +60,6 @@ export default defineComponent({
VIcon, VIcon,
}, },
setup: () => ({ setup: () => ({
markRaw,
tabsRef: ref(null) as Ref<HTMLDivElement | null>, tabsRef: ref(null) as Ref<HTMLDivElement | null>,
}), }),
data() { data() {

View File

@ -16,7 +16,7 @@
没有匹配的输入源, 请确保安装了适合此页面的插件. 没有匹配的输入源, 请确保安装了适合此页面的插件.
</div> </div>
<component <component
:is="markRaw(selectedInput.component)" :is="selectedInput.component"
v-if="selectedInput && selectedInput.component" v-if="selectedInput && selectedInput.component"
ref="inputOptions" ref="inputOptions"
/> />
@ -50,7 +50,7 @@
<SwitchBox v-model:checked="useBackupUrls" /> <SwitchBox v-model:checked="useBackupUrls" />
</div> </div>
<component <component
:is="markRaw(a.component)" :is="a.component"
v-for="a of assetsWithOptions" v-for="a of assetsWithOptions"
:key="a.name" :key="a.name"
ref="assetsOptions" ref="assetsOptions"
@ -66,7 +66,7 @@
v-html="selectedOutput.description" v-html="selectedOutput.description"
></div> ></div>
<component <component
:is="markRaw(selectedOutput.component)" :is="selectedOutput.component"
v-if="selectedOutput && selectedOutput.component" v-if="selectedOutput && selectedOutput.component"
ref="outputOptions" ref="outputOptions"
/> />
@ -85,7 +85,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { Ref, ComponentPublicInstance } from 'vue' import type { Ref, ComponentPublicInstance } from 'vue'
import { ref, defineComponent, markRaw } from 'vue' import { ref, defineComponent } from 'vue'
import type { VideoQuality } from '@/components/video/video-quality' import type { VideoQuality } from '@/components/video/video-quality'
import { allQualities } from '@/components/video/video-quality' import { allQualities } from '@/components/video/video-quality'
import type { TestPattern } from '@/core/common-types' import type { TestPattern } from '@/core/common-types'
@ -164,7 +164,6 @@ export default defineComponent({
}, },
}, },
setup: () => ({ setup: () => ({
markRaw,
inputOptions: ref(null) as Ref<ComponentPublicInstance | null>, inputOptions: ref(null) as Ref<ComponentPublicInstance | null>,
assetsOptions: ref(null) as Ref<ComponentPublicInstance[] | null>, assetsOptions: ref(null) as Ref<ComponentPublicInstance[] | null>,
outputOptions: ref(null) as Ref<ComponentPublicInstance | null>, outputOptions: ref(null) as Ref<ComponentPublicInstance | null>,
@ -186,7 +185,7 @@ export default defineComponent({
qualities: [] as VideoQuality[], qualities: [] as VideoQuality[],
selectedQuality: undefined, selectedQuality: undefined,
inputs: [] as DownloadVideoInput[], inputs: [] as DownloadVideoInput[],
selectedInput: undefined as DownloadVideoInput | undefined, selectedInput: undefined,
apis: [] as DownloadVideoApi[], apis: [] as DownloadVideoApi[],
selectedApi: undefined, selectedApi: undefined,
outputs, outputs,

View File

@ -16,7 +16,7 @@
</div> </div>
<div class="suggest-item-title" @click="performAction($event)"> <div class="suggest-item-title" @click="performAction($event)">
<component <component
:is="markRaw(action.content)" :is="action.content"
v-if="action.content" v-if="action.content"
class="suggest-item-name" class="suggest-item-name"
:name="action.name" :name="action.name"
@ -40,7 +40,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue' import { defineComponent } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { LaunchBarAction } from '@/components/launch-bar/launch-bar-action' import type { LaunchBarAction } from '@/components/launch-bar/launch-bar-action'
import { VIcon } from '@/ui' import { VIcon } from '@/ui'
@ -61,7 +61,6 @@ export default defineComponent({
'previous-item': null as (e: KeyboardEvent) => true, 'previous-item': null as (e: KeyboardEvent) => true,
'next-item': null as (e: KeyboardEvent) => true, 'next-item': null as (e: KeyboardEvent) => true,
}, },
setup: () => ({ markRaw }),
methods: { methods: {
performAction(event: Event) { performAction(event: Event) {
this.action.action() this.action.action()

View File

@ -31,10 +31,7 @@
></ComponentOption> ></ComponentOption>
</div> </div>
<div v-if="componentData.extraOptions" class="extra-option"> <div v-if="componentData.extraOptions" class="extra-option">
<component <component :is="componentData.extraOptions" :component-data="componentData"></component>
:is="markRaw(componentData.extraOptions)"
:component-data="componentData"
></component>
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
@ -83,7 +80,7 @@
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { defineComponent, h, vShow, withDirectives, markRaw } from 'vue' import { defineComponent, h, vShow, withDirectives } from 'vue'
import { getComponentSettings } from '@/core/settings' import { getComponentSettings } from '@/core/settings'
import { visible } from '@/core/observer' import { visible } from '@/core/observer'
@ -143,7 +140,6 @@ const ThisComponent = defineComponent({
}, },
}, },
emits: ['close', 'mounted'], emits: ['close', 'mounted'],
setup: () => ({ markRaw }),
data() { data() {
return { return {
virtual: false, virtual: false,

View File

@ -14,7 +14,7 @@
</VEmpty> </VEmpty>
<div class="widget-items"> <div class="widget-items">
<component <component
:is="markRaw(w.component)" :is="w.component"
v-for="w of widgets" v-for="w of widgets"
:key="w.name" :key="w.name"
class="widget-item" class="widget-item"
@ -25,7 +25,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue' import { defineComponent } from 'vue'
import type { Widget } from '@/components/widget' import type { Widget } from '@/components/widget'
import { deleteValue, matchUrlPattern } from '@/core/utils' import { deleteValue, matchUrlPattern } from '@/core/utils'
import { VEmpty, VIcon } from '@/ui' import { VEmpty, VIcon } from '@/ui'
@ -55,12 +55,11 @@ export default defineComponent({
VIcon, VIcon,
VEmpty, VEmpty,
}, },
setup: () => ({ markRaw }),
data() { data() {
unsafeWindow.allWidgets = allWidgets unsafeWindow.allWidgets = allWidgets
return { return {
allWidgets, allWidgets,
widgets: [] as Widget[], widgets: [],
loading: true, loading: true,
} }
}, },

View File

@ -37,10 +37,7 @@
<slot name="content"> <slot name="content">
<div class="default-content"> <div class="default-content">
<transition name="content-transition"> <transition name="content-transition">
<component <component :is="selectedTab.component" v-bind="selectedTab.propsData"></component>
:is="markRaw(selectedTab.component)"
v-bind="selectedTab.propsData"
></component>
</transition> </transition>
</div> </div>
</slot> </slot>
@ -48,7 +45,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from 'vue' import { defineAsyncComponent, defineComponent } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { TabMapping, TabMappings } from './tab-mapping' import type { TabMapping, TabMappings } from './tab-mapping'
@ -80,7 +77,6 @@ export default defineComponent({
}, },
}, },
emits: ['update:link'], emits: ['update:link'],
setup: () => ({ markRaw }),
data() { data() {
return { return {
selectedTab: (this.tabs.find((t: TabMapping) => t.name === this.defaultTab) ?? selectedTab: (this.tabs.find((t: TabMapping) => t.name === this.defaultTab) ??

View File

@ -4,20 +4,16 @@
<template v-if="typeof config.content === 'string' && config.content.length > 0"> <template v-if="typeof config.content === 'string' && config.content.length > 0">
{{ config.content }} {{ config.content }}
</template> </template>
<component <component :is="config.content" v-if="typeof config.content !== 'string'"></component>
:is="markRaw(config.content)"
v-if="typeof config.content !== 'string'"
></component>
</slot> </slot>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue' import { defineComponent } from 'vue'
import { emptyContent } from './v-empty' import { emptyContent } from './v-empty'
export default defineComponent({ export default defineComponent({
name: 'VEmpty', name: 'VEmpty',
setup: () => ({ markRaw }),
data() { data() {
return { return {
config: emptyContent, config: emptyContent,

View File

@ -4,20 +4,16 @@
<template v-if="typeof config.content === 'string' && config.content.length > 0"> <template v-if="typeof config.content === 'string' && config.content.length > 0">
{{ config.content }} {{ config.content }}
</template> </template>
<component <component :is="config.content" v-if="typeof config.content !== 'string'"></component>
:is="markRaw(config.content)"
v-if="typeof config.content !== 'string'"
></component>
</slot> </slot>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue' import { defineComponent } from 'vue'
import { loadingContent } from './v-loading' import { loadingContent } from './v-loading'
export default defineComponent({ export default defineComponent({
name: 'VLoading', name: 'VLoading',
setup: () => ({ markRaw }),
data() { data() {
return { return {
config: loadingContent, config: loadingContent,