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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -37,10 +37,7 @@
<slot name="content">
<div class="default-content">
<transition name="content-transition">
<component
:is="markRaw(selectedTab.component)"
v-bind="selectedTab.propsData"
></component>
<component :is="selectedTab.component" v-bind="selectedTab.propsData"></component>
</transition>
</div>
</slot>
@ -48,7 +45,7 @@
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from 'vue'
import { defineAsyncComponent, defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { TabMapping, TabMappings } from './tab-mapping'
@ -80,7 +77,6 @@ export default defineComponent({
},
},
emits: ['update:link'],
setup: () => ({ markRaw }),
data() {
return {
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">
{{ config.content }}
</template>
<component
:is="markRaw(config.content)"
v-if="typeof config.content !== 'string'"
></component>
<component :is="config.content" v-if="typeof config.content !== 'string'"></component>
</slot>
</div>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue'
import { defineComponent } from 'vue'
import { emptyContent } from './v-empty'
export default defineComponent({
name: 'VEmpty',
setup: () => ({ markRaw }),
data() {
return {
config: emptyContent,

View File

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