添加v-if="userinput"不起作用？ 如果我明白你想要什么，你應該有這樣的東西： // parent comp<template> <div> <h1>header</h1> <div v-if="userinput" class="parent"> <h2>infos</h2> <button>x</button> </div> <PopUp v-else/> </div></template> 請毫不猶豫地閱讀Vue.js文檔

代碼中的問題是您將組件聲明為函數： export default { components: { /* 👇 don't do this */ Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue')) },} 最簡單的解決方案是將其移除： export default { components: { Modal: defineAsyncComponent(() => import('@/components/Modal.vue')) },} demo

這里對應的是模板中的slot綁定，比如：<SuperHero> <h1 slot="heroName">Iron Man</h1></SuperHero>對應render函數：{ render(h) { return h('h1', { slot: 'heroName' }, 'Iron Man') }}

函數作為React子函數無效。如果從渲染返回組件而不是<Component/>，則可能會發生這種情況。或者你想調用這個函數而不是返回它。 如錯誤所示，selectedView是一個函數。因此，需要調用它來使用其產品。 用{this.selectedView()}或<this.selectedView/>替換{this.selectedView}將返回并呈現其底層JSX。

您必須導入組件并將其添加到components。 檢查Vue文檔：https://vuejs.org/v2/guide/components-registration.html#Local-Registration import ComponentA from './ComponentA.vue'export default { // ... components: { ComponentA }, // ...} 較舊的JavaScript版本存在細微差別。查看上述鏈接以了解詳細信息。

您必須使用computed而不是data，因為創建組件時數據只執行一次。這應該管用 computed: { showDashboard() { return this.$store.getters.getcurrentDashboardToShow }} 有關計算的詳細信息

您已經自己確定了解決方案：在對象本身上使用默認的虛擬數據。 這將是標準和最佳的方法。 如果這樣做，您需要意識到Vuex不能很好地處理嵌套的關系數據。 通常，您希望將數據標準化，使其平坦并通過關系進行映射。 你可以在這里了解更多關于狀態正常化的必要性 https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape/ 它是關于Redux的，但是這些概念也與Vuex相關。 要做到這一點，您需要使用Vue ORM來規范化復雜的數據。標準化后，Vuex中的對象將更易于管理、更新和查詢。 這樣做還可以防止Vuex在試圖訪問/更新當前不存在的嵌套對象中的數據時拋出錯誤（請考慮包含注釋和對注釋的回復的嵌套數據）。 這還有一個額外的好處，就是使您的數據更易于使用和以編程方式理解。

當從v-for列表中刪除項時，如果不希望重用DOM，那么使用每個項所特有的key是很重要的。如果使用index并刪除一個項，則下一個項將獲取其索引，因此Vue將重用刪除項的DOM。 使用id作為鍵，因為這似乎是唯一的： <v-row v-for="(board, index) in boards" :key="board.id"> 另外，請檢查<v-text-field>上的v-model，您可能希望它使用local.material.q而不是local.q： <v-text-field class="my-0 py-0" v-model="local.material.q"/>

您可以使用async-components： import {createApp, h,defineAsyncComponent} from 'vue'.... render () { const matchingPage = routes[this.currentRoute] || '404' const ViewComponent= defineAsyncComponent( () =>import(`./pages/${matchingPage}.vue`) ) return h(ViewComponent) },

只是取數據的話，ref引用子組件調用取數據的方法重新執行鉤子函數的話 子組件用v-if ，切走的時候=false，卸載子組件且回來的時候=true，會重新掛載子組件

問題是LoginContexts.Consumer組件需要一個呈現函數。 Context.Consumer <MyContext.Consumer> {value => /* render something based on the context value */}</MyContext.Consumer> useContext鉤子是消費者，移除LoginContexts.Consumer組件。 function Screen2() { const {getEmail} = useContext(LoginContexts); return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>{getEmail}</Text> </View> );}

JSX 語法不能這樣寫的babel-plugin-jsx

嘗試在異步獲取到數據之后執行 console.time('render')，然后賦值完成之后再增加 $nextTick 中執行 console.timeEnd('render') 來獲取執行時間。一段偽代碼：fetchData(parmas).then(res=>{ consle.time('render') this.sourceData = res.data this.$nextTick(()=>{ console.timeEnd('render') })})但是會有問題，比如說其他組件同時也觸發了渲染，會影響到 $nextTick 的執行。其實最好使用 vue devtools 來查看項目里面的組件渲染時間。如果感興趣具體如何實現的話，可以去看一下這個插件的源碼。

每當一個組件呈現reactive數據時，如果它改變，它也必須re-render該數據。這是reactivity的一部分。因此，渲染過程本身不應該更改數據，否則將出現無限循環：1）渲染，2）數據更改，3）原因re-render，4）數據更改，無限。 這就是代碼中發生的事情，因為呈現函數增加this.hourIndex： this.hourIndex++ 如果您只需要索引，請從map中獲取： Array.apply(null, { length: this.initHours.length }).map((_, index) => { return createElement('div', { class: 'frame' }, index )})

組件沒有呈現，因為數組orders仍然為空，并且更新它的觀察程序工作不正常，應該通過從回調返回props并添加其他選項來編寫（immediate和deep）： let orders = ref([])watch(()=>props, (newProp, oldProp) => { orders.value = tableOrderStore.tableOrders console.log(orders.value)},{immediate:true,deep:true //since props are an object})