vue 動態元件 全域性元件 keepAlive

故心故心故心故心小故衝啊

全域性元件定義

元件快取 keep-alive

動態模板

當在這些元件之間切換的時候，有時會想保持這些元件的狀態，以避免反覆重渲染導致的效能問題

1、通過條件匹配來顯示

a元件

b元件

vue中提供了乙個動態模板，可以在任意模板中切換，就是用vue中用:is來掛載不同的元件。

import testa from './testa.vue'; //匯入
import testb from './testb.vue'; //匯入
data()
}

在大型應用中，我們可能需要將應用分割成小一些的**塊，並且只在需要的時候才從伺服器載入乙個模組。為了簡化，vue 允許你以乙個工廠函式的方式定義你的元件，這個工廠函式會非同步解析你的元件定義

非非同步元件載入，提前載入

import testa from './testa'; 
import testb from './testb'; 
components: ,

非同步元件

components: ,

在我們專案開發中，經常需要import或者export各種模組，那麼有沒有什麼辦法可以簡化這種引入或者匯出操作呢

import a from 'components/a'

import b from 'components/b'
import c from 'components/c'
import d from 'components/d'
......

定義全域性元件的方式：

vue.component('mycomponent', })

require.context(directory, usesubdirectories, regexp)

usesubdirectories: 是否查詢子目錄

regexp: 要匹配檔案的正則

用法：

require.context('./', true, /\.js$/);

// 引入全域性自定義元件

import './components/global'

import vue from 'vue'

const componentscontext = require.context('./', true, /\.js$/);
componentscontext.keys().foreach(component => 
})

const componentscontext = require.context('./', true, /\.js$/);

//返回的是webpackcontext方法
webpackcontext(req)

componentscontext.keys()

//當前目錄下所有的js檔案
0: "./index.js"
1: "./my-banner/index.js"
2: "./my-button/index.js"
3: "./my-button2/index.js"

index.js

import main from './main.vue'
export default main
main.vue
我的按鈕

每次切換新標籤的時候，vue 都建立了乙個新的例項。

重新建立動態元件的行為通常是非常有用的，如果希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來。為了解決這個問題，我們可以用乙個元素將其動態元件包裹起來。

keep-alive是vue提供的乙個抽象元件，用來對元件進行快取，從而節省效能，由於是乙個抽象元件，

所以在頁面渲染完畢後不會被渲染成乙個dom元素

include: 只有匹配的元件才會快取,符合條件：字串/正則

exclude: 任何元件都不會快取，符合條件：字串/正則

abc

import testa from './testa.vue'; //匯入
import testb from './testb.vue'; //匯入
import testc from './testc.vue'; //匯入
data()
},

只有元件testa才會快取

元件testa，testb才會快取

除了元件testa，testc快取

路由中的定義
const routes = [
, ,
, component: () => import('../views/tab.vue')
},

vue元件（全域性，區域性，動態載入元件）

vue元件有兩種，一種是全域性元件，一種是區域性元件。整個專案經常用到的用全域性寫法，用到比較少的專供特定頁面用的使用區域性元件。one 全域性元件引入寫法 在專案的main.js中 第一種，在main.js直接寫template 模版字串 vue.component tab home vue.co...

vue獲取全域性元件 解析Vue全域性元件和區域性元件

vue中元件分為兩種 1.全域性元件 2.區域性元件 接下來我們看看兩種元件的區別 一 使用範圍 全域性元件使用範圍 可以在頁面中任何位置使用 區域性元件使用範圍 只能在定義它的el中使用，不能再其他位置使用，否則就無法生效 二 定義元件的方法 全域性元件 可以使用vue.component tag...

vue獲取全域性元件 Vue 全域性元件自動註冊

在 vue 中，我們通過 vue.component mycomponentname 的方式來進行全域性元件註冊，但如果需要全域性註冊的元件很多，這時 就會變得比較臃腫，例如 12 註冊 5 個全域性元件 import examplecomponent1 from components exampl...