關(guān)于在組件的局部作用域引入css樣式

• 1. 通常使用做法:
  在組件內(nèi)部script標(biāo)簽內(nèi)引入, 會(huì)在該組件運(yùn)行時(shí)被加載, 并暴露到全局, 對(duì)同時(shí)運(yùn)行在實(shí)例中的的兄弟及父組件頁(yè)面, 可能會(huì)造成樣式污染的問(wèn)題
  

  image.png

• 2. 推薦在引入第三方css資源時(shí)使用的做法:
  在組件內(nèi)部加有 scoped 屬性的 style 標(biāo)簽內(nèi)部, 并且最好在該組件最外層容器的內(nèi)部進(jìn)行引入; 前提是要使用scss或者less預(yù)處理器進(jìn)行編譯, 否則無(wú)法這樣在選擇器內(nèi)引入css文件
  

  image.png

• 3. 針對(duì)在組件中單獨(dú)引入bootstrap.css但加scoped屬性引入無(wú)效, 造成無(wú)法實(shí)現(xiàn)局部引入bootstrap的處理方式
  問(wèn)題描述: 在項(xiàng)目中, 嘗試在組件內(nèi)單獨(dú)引入bootstrap, 使用第二種方式,并無(wú)法實(shí)現(xiàn), 有兩個(gè)問(wèn)題:

  1. 加scoped屬性會(huì)造成bootstrap樣式引入無(wú)效, 故需取消scoped屬性,
  2. 雖然取消了scoped 屬性,可以成功引入樣式, 但在組件內(nèi)部容器引入bootstrap.css文件, 并無(wú)法形成單獨(dú)的作用域,

  解決方法: 當(dāng)前使用的預(yù)處理器為scss, 同時(shí)在bootstrap-npm包中也提供有scss樣式資源, 需直接引入.scss樣式文件, 在vue解析的時(shí)候, 會(huì)通過(guò)預(yù)處理器 按照書寫及引入的先后順序編譯樣式同時(shí)引入資源, 引入的樣式會(huì)全部在所在組件容器里進(jìn)行編譯及渲染, 從而形成單獨(dú)的作用域
  

  image.png
  
  
  image.png

關(guān)于異步路由與異步組件

異步路由
使用異步路由可以根據(jù)URL自動(dòng)加載所需頁(yè)面的資源, 并且不會(huì)造成頁(yè)面阻塞,較適用于移動(dòng)端頁(yè)面, 建議主頁(yè)面直接import, 非主頁(yè)可使用異步路由

// 使用方式 : 
{
 path: '/order',
 component: () => import('./views/order.vue')
}

異步組件
不需要首屏加載的組件都可以使用異步組件的方式來(lái)加載, 包括需要觸發(fā)條件的動(dòng)作也使用異步組件(如彈框), 用v-if來(lái)控制顯示時(shí)機(jī), 引入組件的promise即可
演示:

// 在異步子組件中，mounted 函數(shù)中是無(wú)法獲取到子組件的實(shí)例的，所以我們需要對(duì)組件異步加載做了一些特殊的控制,
// 其中 import().then() 則是在加載完子組件的 .js 文件后，實(shí)例化子組件之前的回調(diào),
// 如果需要處理出錯(cuò)的情況，則 import().then().catch() 即可。
// 以上代碼只是注入了一個(gè) created 函數(shù)，如果要注入其他生命周期函數(shù)，例如 mounted，也是類似的:
<template>
  <div>
    <my-demo ref="demo"></my-demo>
  </div>
</template>

<script>
export default {
  components: {
    MyDemo: () => import('./Demo').then(component => {
      // 清理已緩存的組件定義
      component.default._Ctor = {}

      if (!component.default.attached) {
        // 保存原組件中的 created 生命周期函數(shù)
        component.default.backupCreated = component.default.created
        // 保存原組件中的 mounted 生命周期函數(shù)
        component.default.backupMounted = component.default.mounted
      }

      // 注入一個(gè)特殊的 created 生命周期函數(shù)
      component.default.created = function() {
        // 子組件已經(jīng)實(shí)例化完畢

        // this 即為子組件 vm 實(shí)例
        console.log(this)

        if (component.default.backupCreated) {
          // 執(zhí)行原組件中的 created 生命周期函數(shù)
          component.default.backupCreated.call(this)
        }
      }
      // 注入一個(gè)特殊的 mounted 生命周期函數(shù)
      component.default.mounted = function() {
        if (component.default.backupMounted) {
          // 執(zhí)行原組件中的 mounted 生命周期函數(shù)
          component.default.backupMounted.call(this)
        }
      }

      // 表示已經(jīng)注入過(guò)了 
      component.default.attached = true

      return component
    })
  }
}
</script>