国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频

5招讓你成為Vue.js大師

共 4094字，需瀏覽 9分鐘

 ·

2020-11-15 10:04

來源 |?https://segmentfault.com/a/1190000014085613

本文面向?qū)ο笫怯幸欢╒ue.js編程經(jīng)驗(yàn)的開發(fā)者。如果有人需要Vue.js入門系列的文章可以在評論區(qū)告訴我，有空就給你們寫。
對大部分人來說，掌握Vue.js基本的幾個(gè)API后就已經(jīng)能夠正常地開發(fā)前端網(wǎng)站。但如果你想更加高效地使用Vue來開發(fā)，成為Vue.js大師，那下面我要傳授的這五招你一定得認(rèn)真學(xué)習(xí)一下了。

第一招：化繁為簡的Watchers

場景還原：
created(){    this.fetchPostList()},watch: {    searchInputValue(){        this.fetchPostList()    }}

組件創(chuàng)建的時(shí)候我們獲取一次列表，同時(shí)監(jiān)聽input框，每當(dāng)發(fā)生變化的時(shí)候重新獲取一次篩選后的列表這個(gè)場景很常見，有沒有辦法優(yōu)化一下呢？

招式解析：
首先，在watchers中，可以直接使用函數(shù)的字面量名稱；其次，聲明immediate:true表示創(chuàng)建組件時(shí)立馬執(zhí)行一次。

watch: {    searchInputValue:{        handler: 'fetchPostList',        immediate: true    }}

第二招：一勞永逸的組件注冊

場景還原：
import BaseButton from './baseButton'import BaseIcon from './baseIcon'import BaseInput from './baseInput'
export default {  components: {    BaseButton,    BaseIcon,    BaseInput  }}
<BaseInput  v-model="searchText"  @keydown.enter="search"/><BaseButton @click="search">  <BaseIcon name="search"/>BaseButton>

我們寫了一堆基礎(chǔ)UI組件，然后每次我們需要使用這些組件的時(shí)候，都得先import，然后聲明components，很繁瑣！秉持能偷懶就偷懶的原則，我們要想辦法優(yōu)化！

招式解析：
我們需要借助一下神器webpack，使用?require.context()?方法來創(chuàng)建自己的（模塊）上下文，從而實(shí)現(xiàn)自動(dòng)動(dòng)態(tài)require組件。這個(gè)方法需要3個(gè)參數(shù)：要搜索的文件夾目錄，是否還應(yīng)該搜索它的子目錄，以及一個(gè)匹配文件的正則表達(dá)式。

我們在components文件夾添加一個(gè)叫g(shù)lobal.js的文件，在這個(gè)文件里借助webpack動(dòng)態(tài)將需要的基礎(chǔ)組件統(tǒng)統(tǒng)打包進(jìn)來。

import Vue from 'vue'
function capitalizeFirstLetter(string) {  return string.charAt(0).toUpperCase() + string.slice(1)}
const requireComponent = require.context(  '.', false, /\.vue$/   //找到components文件夾下以.vue命名的文件)
requireComponent.keys().forEach(fileName => {  const componentConfig = requireComponent(fileName)
  const componentName = capitalizeFirstLetter(    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')    //因?yàn)榈玫降膄ilename格式是: './baseButton.vue', 所以這里我們?nèi)サ纛^和尾，只保留真正的文件名  )
  Vue.component(componentName, componentConfig.default || componentConfig)})
最后我們在main.js中import 'components/global.js'，然后我們就可以隨時(shí)隨地使用這些基礎(chǔ)組件，無需手動(dòng)引入了。

第三招：釜底抽薪的router key

場景還原：
下面這個(gè)場景真的是傷透了很多程序員的心...先默認(rèn)大家用的是Vue-router來實(shí)現(xiàn)路由的控制。
假設(shè)我們在寫一個(gè)博客網(wǎng)站，需求是從/post-page/a，跳轉(zhuǎn)到/post-page/b。然后我們驚人的發(fā)現(xiàn)，頁面跳轉(zhuǎn)后數(shù)據(jù)竟然沒更新？！原因是vue-router"智能地"發(fā)現(xiàn)這是同一個(gè)組件，然后它就決定要復(fù)用這個(gè)組件，所以你在created函數(shù)里寫的方法壓根就沒執(zhí)行。通常的解決方案是監(jiān)聽$route的變化來初始化數(shù)據(jù)，如下：
data() {  return {    loading: false,    error: null,    post: null  }}, watch: {  '$route': {    handler: 'resetData',    immediate: true  }},methods: {  resetData() {    this.loading = false    this.error = null    this.post = null    this.getPost(this.$route.params.id)  },  getPost(id){
  }}

bug是解決了，可每次這么寫也太不優(yōu)雅了吧？秉持著能偷懶則偷懶的原則，我們希望代碼這樣寫：

data() {  return {    loading: false,    error: null,    post: null  }},created () {  this.getPost(this.$route.params.id)},methods () {  getPost(postId) {    // ...  }}

招式解析:

那要怎么樣才能實(shí)現(xiàn)這樣的效果呢，答案是給router-view添加一個(gè)unique的key，這樣即使是公用組件，只要url變化了，就一定會重新創(chuàng)建這個(gè)組件。（雖然損失了一丟丟性能，但避免了無限的bug）。

同時(shí)，注意我將key直接設(shè)置為路由的完整路徑，一舉兩得。

:key="$route.fullpath">

第四招: 無所不能的render函數(shù)

場景還原:
vue要求每一個(gè)組件都只能有一個(gè)根元素，當(dāng)你有多個(gè)根元素時(shí)，vue就會給你報(bào)錯(cuò)。