小編給大家分享一下Vue使用技巧有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)建站已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、花都網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

數(shù)據(jù)不響應(yīng)，可能是用法有問(wèn)題

前幾天有朋友給我發(fā)了一段代碼，然后說(shuō)Vue有bug，他明明寫的沒(méi)問(wèn)題，為啥數(shù)據(jù)就不響應(yīng)呢，一定是Vue的bug？我感覺(jué)他比尤雨溪要牛逼，高攀不起，就沒(méi)有理他了。但是確實(shí)有時(shí)候我們?cè)陂_(kāi)發(fā)時(shí)候會(huì)遇到數(shù)據(jù)不響應(yīng)的情況，那怎么辦呢？比如下面這段代碼:

<template>    <div>      <div>        <span>用戶名: {{ userInfo.name }}</span>        <span>用戶性別: {{ userInfo.sex }}</span>        <span v-if="userInfo.officialAccount">          公眾號(hào): {{ userInfo.officialAccount }}        </span>      </div>      <button @click="handleAddOfficialAccount">添加公眾號(hào)</button>    </div>  </template>  <script>  export default {    data() {      return {        userInfo: {          name: '子君',          sex: '男'        }      }    },    methods: {      // 在這里添加用戶的公眾號(hào)      handleAddOfficialAccount() {        this.userInfo.officialAccount = '前端有的玩'      }    }  }  </script>

在上面的代碼中，我們希望給用戶信息里面添加公眾號(hào)屬性，但是通過(guò)this.userInfo.officialAccount = '前端有的玩' 添加之后，并沒(méi)有生效，這是為什么呢？

這是因?yàn)樵赩ue內(nèi)部，數(shù)據(jù)響應(yīng)是通過(guò)使用Object.definePrototype監(jiān)聽(tīng)對(duì)象的每一個(gè)鍵的getter,setter方法來(lái)實(shí)現(xiàn)的，但通過(guò)這種方法只能監(jiān)聽(tīng)到已有屬性，新增的屬性是無(wú)法監(jiān)聽(tīng)到的，但我就是想監(jiān)聽(tīng)，小編你說(shuō)咋辦吧。下面小編提供了四種方式，如果有更多方式，歡迎下方評(píng)論區(qū)告訴我。

1. 將本來(lái)要新增的屬性提前在data中定義好

比如上面的公眾號(hào)，我可以提前在userInfo里面定義好，這樣就不是新增屬性了，就像下面這樣

data() {      return {        userInfo: {          name: '子君',          sex: '男',          // 我先提前定義好          officialAccount: ''        }      }    }

2. 直接替換掉userInfo

雖然無(wú)法給userInfo里面添加新的屬性，但是因?yàn)閡serInfo已經(jīng)定義好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面這樣寫

this.userInfo = {    // 將原來(lái)的userInfo 通過(guò)擴(kuò)展運(yùn)算法復(fù)制到新的對(duì)象里面    ...this.userInfo,    // 添加新屬性    officialAccount: '前端有的玩'  }

3. 使用Vue.set

其實(shí)上面兩種方法都有點(diǎn)取巧的嫌疑，其實(shí)對(duì)于新增屬性，Vue官方專門提供了一個(gè)新的方法Vue.set用來(lái)解決新增屬性無(wú)法觸發(fā)數(shù)據(jù)響應(yīng)。

Vue.set 方法定義

/**  * target 要修改的對(duì)象  * prpertyName 要添加的屬性名稱  * value 要添加的屬性值  */  Vue.set( target, propertyName, value )

上面的代碼使用Vue.set可以修改為

import Vue from 'vue'  // 在這里添加用戶的公眾號(hào)  handleAddOfficialAccount() {    Vue.set(this.userInfo,'officialAccount', '前端有的玩')  }

但是每次要用到set方法的時(shí)候，還要把Vue引入進(jìn)來(lái)，好麻煩，所以為了簡(jiǎn)便起見(jiàn)，Vue又將set方法掛載到了Vue的原型鏈上了，即Vue.prototype.$set = Vue.set,所以在Vue組件內(nèi)部可以直接使用this.$set代替Vue.set

this.$set(this.userInfo,'officialAccount', '前端有的玩')

小編發(fā)現(xiàn)有許多同學(xué)不知道什么時(shí)候應(yīng)該用Vue.set，其實(shí)只有當(dāng)你要賦值的屬性還沒(méi)有定義的時(shí)候需要使用Vue,set，其他時(shí)候一般不會(huì)需要使用。

4. 使用$forceUpdate

我覺(jué)得$forceUpdate的存在，讓許多前端開(kāi)發(fā)者不會(huì)再去注意數(shù)據(jù)雙向綁定的原理，因?yàn)椴徽撌裁磿r(shí)候，反正我修改了data之后，調(diào)用一下$forceUpdate就會(huì)讓Vue組件重新渲染，bug是不會(huì)存在的。但是實(shí)際上這個(gè)方法并不建議使用，因?yàn)樗鼤?huì)引起許多不必要的性能消耗。

針對(duì)數(shù)組的特定方式

其實(shí)不僅僅是對(duì)象，數(shù)組也存在數(shù)據(jù)修改之后不響應(yīng)的情況，比如下面這段代碼

<template>    <div>      <ul>        <li v-for="item in list" :key="item">          {{ item }}        </li>      </ul>      <button @click="handleChangeName">修改名稱</button>    </div>  </template>  <script>  export default {    data() {      return {        list: ['張三', '李四']      }    },    methods: {      // 修改用戶名稱      handleChangeName() {        this.list[0] = '王五'      }    }  }  </script>

上面的代碼希望將張三的名字修改為王五，實(shí)際上這個(gè)修改并不能生效，這是因?yàn)閂ue不能檢測(cè)到以下變動(dòng)的數(shù)組:

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如: this.list[index] = newValue

3. 修改數(shù)組的length屬性,例如: this.list.length = 0

所以在上例中通過(guò)this.list[0] = '王五' 是無(wú)法觸發(fā)數(shù)據(jù)響應(yīng)的，那應(yīng)該怎么辦呢？像上面提到的Vue.set和$forceUpdate都可以解決這個(gè)問(wèn)題，比如Vue.set可以這樣寫

Vue.set(this.list,0,'王五')  復(fù)制代碼

除了那些方法之外，Vue還針對(duì)數(shù)組提供了變異方法

在操作數(shù)組的時(shí)候，我們一般會(huì)用到數(shù)據(jù)提供的許多方法，比如push,pop,splice等等，在Vue中調(diào)用數(shù)組上面提供的這些方法修改數(shù)組的值是可以觸發(fā)數(shù)據(jù)響應(yīng)的，比如上面的代碼改為以下代碼即可觸發(fā)數(shù)據(jù)響應(yīng)

this.list.splice(0,1,'王五')

實(shí)際上，如果Vue僅僅依賴getter與setter，是無(wú)法做到在數(shù)組調(diào)用push,pop等方法時(shí)候觸發(fā)數(shù)據(jù)響應(yīng)的，因此Vue實(shí)際上是通過(guò)劫持這些方法，對(duì)這些方法進(jìn)行包裝變異來(lái)實(shí)現(xiàn)的。

Vue對(duì)數(shù)組的以下方法進(jìn)行的包裝變異:

• push

• pop

• shift

• unshift

• splice

• sort

• reverse

所以在操作數(shù)組的時(shí)候，調(diào)用上面這些方法是可以保證數(shù)據(jù)可以正常響應(yīng)，下面是Vue源碼中包裝數(shù)組方法的代碼:

var original = arrayProto[method];    def(arrayMethods, method, function mutator () {      // 將 arguments 轉(zhuǎn)換為數(shù)組      var args = [], len = arguments.length;      while ( len-- ) args[ len ] = arguments[ len ];      var result = original.apply(this, args);      // 這兒的用法同dependArray(value)，就是為了取得dep      var ob = this.__ob__;      var inserted;      switch (method) {        case 'push':        case 'unshift':          inserted = args;          break        case 'splice':          inserted = args.slice(2);          break      }      // 如果有新的數(shù)據(jù)插入，則插入的數(shù)據(jù)也要進(jìn)行一個(gè)響應(yīng)式      if (inserted) { ob.observeArray(inserted); }     // 通知依賴進(jìn)行更新      ob.dep.notify();      return result    });

文本格式化，filter更簡(jiǎn)單

使用filter 簡(jiǎn)化邏輯

我想把時(shí)間戳顯示成yyyy-MM-DD HH:mm:ss的格式怎么辦？是需要在代碼中先將日期格式化之后，再渲染到模板嗎？就像下面這樣

<template>    <div>      {{ dateStr }}      <ul>        <li v-for="(item, index) in getList" :key="index">          {{ item.date }}        </li>      </ul>    </div>  </template>  <script>  import { format } from '@/utils/date'  export default {    data() {      return {        date: Date.now(),        list: [          {            date: Date.now()          }        ]      }    },    computed: {      dateStr() {        return format(this.date, 'yyyy-MM-DD HH:mm:ss')      },      getList() {        return this.list.map(item => {          return {            ...item,            date: format(item.date, 'yyyy-MM-DD HH:mm:ss')          }        })      }    }  }  </script>

像上面的寫法，針對(duì)每一個(gè)日期字段都需要調(diào)用format，然后通過(guò)計(jì)算屬性進(jìn)行轉(zhuǎn)換？這時(shí)候可以考慮使用Vue提供的filter去簡(jiǎn)化

<template>    <div>      <!--使用過(guò)濾器-->      {{ dateStr | formatDate }}      <ul>        <li v-for="(item, index) in list" :key="index">          <!--在v-for中使用過(guò)濾器-->          {{ item.date | formatDate }}        </li>      </ul>    </div>  </template>  <script>  import { format } from '@/utils/date'  export default {    filters: {      formatDate(value) {        return format(value, 'yyyy-MM-DD HH:mm:ss')      }    },    data() {      return {        date: Date.now(),        list: [          {            date: Date.now()          }        ]      }    }  }  </script>

通過(guò)上面的修改是不是就簡(jiǎn)單多了

注冊(cè)全局filter

有些過(guò)濾器使用的很頻繁，比如上面提到的日期過(guò)濾器，在很多地方都要使用，這時(shí)候如果在每一個(gè)要用到的組件里面都去定義一遍，就顯得有些多余了，這時(shí)候就可以考慮Vue.filter注冊(cè)全局過(guò)濾器

對(duì)于全局過(guò)濾器，一般建議在項(xiàng)目里面添加filters目錄，然后在filters目錄里面添加

// filters\index.js  import Vue from 'vue'  import { format } from '@/utils/date'  Vue.filter('formatDate', value => {    return format(value, 'yyyy-MM-DD HH:mm:ss')  })

然后將filters里面的文件引入到main.js里面，這時(shí)候就可以在組件里面直接用了，比如將前面的代碼可以修改為

<template>    <div>      <!--使用過(guò)濾器-->      {{ dateStr | formatDate }}      <ul>        <li v-for="(item, index) in list" :key="index">          <!--在v-for中使用過(guò)濾器-->          {{ item.date | formatDate }}        </li>      </ul>    </div>  </template>  <script>  export default {    data() {      return {        date: Date.now(),        list: [          {            date: Date.now()          }        ]      }    }  }  </script>

是不是更簡(jiǎn)單了

開(kāi)發(fā)了插件庫(kù)，來(lái)安裝一下

在使用一些UI框架的時(shí)候，經(jīng)常需要使用Vue.use來(lái)安裝， 比如使用element-ui時(shí)候，經(jīng)常會(huì)這樣寫:

import Vue from 'vue';  import ElementUI from 'element-ui';  import 'element-ui/lib/theme-chalk/index.css';  Vue.use(ElementUI,{size: 'small'});

使用了Vue.use之后，element-ui就可以直接在組件里面使用了，好神奇哦（呸，娘炮）。接下來(lái)我們實(shí)現(xiàn)一個(gè)簡(jiǎn)化版的element來(lái)看如何去安裝。

了解Vue.use的用法

Vue.use是一個(gè)全局的方法，它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成，Vue.use的參數(shù)如下

/**  * plugin: 要安裝的插件 如 ElementUI  * options: 插件的配置信息 如 {size: 'small'}  */ Vue.use(plugin, options)

模擬element-ui的安裝邏輯

想一下，使用Vue.use(ElementUI,{size: 'small'}) 之后我們可以用到哪些element-ui提供的東西

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 可以直接在組件里面用element-ui的組件，不需要再import

3. 可以直接使用v-loading指令

4. 通過(guò)this.$loading在組件里面顯示loading

5. 其他... 

// 這個(gè)是一個(gè)按鈕組件  import Button from '@/components/button'  // loading 指令  import loadingDirective from '@/components/loading/directive'  // loading 方法  import loadingMethod from '@/components/loading'  export default {    /**     * Vue.use 需要插件提供一個(gè)install方法     * @param {*} Vue Vue     * @param {*} options 插件配置信息     */    install(Vue, options) {      console.log(options)      // 將組件通過(guò)Vue.components 進(jìn)行注冊(cè)      Vue.components(Button.name, Button)      // 注冊(cè)全局指令      Vue.directive('loading', loadingDirective)      // 將loadingMethod 掛載到 Vue原型鏈上面，方便調(diào)用      Vue.prototype.$loading = loadingMethod    }  }

通過(guò)上面的代碼，已經(jīng)實(shí)現(xiàn)了一個(gè)丐版的element-ui插件，這時(shí)候就可以在main.js里面通過(guò)Vue.use進(jìn)行插件安裝了。大家可能會(huì)有疑問(wèn)，為什么我要用這種寫法，不用這種寫法我照樣可以實(shí)現(xiàn)功能啊。小編認(rèn)為這種寫法有兩個(gè)優(yōu)勢(shì)

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 標(biāo)準(zhǔn)化，通過(guò)提供一種統(tǒng)一的開(kāi)發(fā)模式，無(wú)論對(duì)插件開(kāi)發(fā)者還是使用者來(lái)說(shuō)，都有一個(gè)規(guī)范去遵循。

3. 插件緩存，Vue.use 在安裝插件的時(shí)候，會(huì)對(duì)插件進(jìn)行緩存，即一個(gè)插件如果安裝多次，實(shí)際上只會(huì)在第一次安裝時(shí)生效。

插件的應(yīng)用場(chǎng)景

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 添加全局方法或者 property。

3. 添加全局資源：指令/過(guò)濾器/過(guò)渡等。

4. 通過(guò)全局混入來(lái)添加一些組件選項(xiàng)。

5. 添加 Vue 實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn)。

6. 一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能。如element-ui

提高Vue渲染性能，了解一下Object.freeze

當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的 property 加入到 Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些 property 的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。但是這個(gè)過(guò)程實(shí)際上是比較消耗性能的，所以對(duì)于一些有大量數(shù)據(jù)但只是展示的界面來(lái)說(shuō)，并不需要將property加入到響應(yīng)式系統(tǒng)中，這樣可以提高渲染性能，怎么做呢，你需要了解一下Object.freeze。

在Vue官網(wǎng)中，有這樣一段話：這里唯一的例外是使用 Object.freeze()，這會(huì)阻止修改現(xiàn)有的 property，也意味著響應(yīng)系統(tǒng)無(wú)法再_追蹤_變化。這段話的意思是，如果我們的數(shù)據(jù)使用了Object.freeze，就可以讓數(shù)據(jù)脫離響應(yīng)式系統(tǒng)，那么該如何做呢?

比如下面這個(gè)表格，因?yàn)橹皇卿秩緮?shù)據(jù)，這時(shí)候我們就可以通過(guò)Object.freeze來(lái)優(yōu)化性能

<template>    <el-table :data="tableData" >      <el-table-column prop="date" label="日期" width="180" />      <el-table-column prop="name" label="姓名" width="180" />      <el-table-column prop="address" label="地址" />    </el-table>  </template>  <script>  export default {    data() {      const data = Array(1000)        .fill(1)        .map((item, index) => {          return {            date: '2020-07-11',            name: `子君${index}`,            address: '大西安'          }        })      return {        // 在這里我們用了Object.freeze        tableData: Object.freeze(data)      }    }  }  </script>

有的同學(xué)可能會(huì)有疑問(wèn)，如果我這個(gè)表格的數(shù)據(jù)是滾動(dòng)加載的，你這樣寫我不就沒(méi)法再給tableData添加數(shù)據(jù)了嗎？是，確實(shí)沒(méi)辦法去添加數(shù)據(jù)了，但還是有辦法解決的，比如像下面這樣

export default {    data() {      return {        tableData: []      }    },    created() {      setInterval(() => {        const data = Array(1000)          .fill(1)          .map((item, index) => {            // 雖然不能凍結(jié)整個(gè)數(shù)組，但是可以凍結(jié)每一項(xiàng)數(shù)據(jù)            return Object.freeze({              date: '2020-07-11',              name: `子君${index}`,              address: '大西安'            })          })        thisthis.tableData = this.tableData.concat(data)      }, 2000)    }  }

以上是“Vue使用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：Vue使用技巧有哪些
文章出自：http://chinadenli.net/article40/joeeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)