本篇內(nèi)容主要講解“Vue的面試知識點(diǎn)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue的面試知識點(diǎn)有哪些”吧!

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、金臺ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的金臺網(wǎng)站制作公司

進(jìn)入正題,我相信不論什么項(xiàng)目幾乎都會有一個必不可少的功能，就是用戶操作反饋、或者提醒，像這樣(簡單的一個demo)。

其實(shí)在vue的中大型項(xiàng)目中,這些類似的小功能會更加豐富以及嚴(yán)謹(jǐn)，而在以Vue作為核心框架的前端項(xiàng)目中，因?yàn)閂ue本身是一個組件化和虛擬Dom的框架，要實(shí)現(xiàn)一個通知組件的展示當(dāng)然是非常簡單的。但因?yàn)橥ㄖM件的使用特性，直接在模板當(dāng)中書寫組件并通過v-show或者props控制通知組件的顯示顯然是非常不方便的并且這樣意味著你的代碼結(jié)構(gòu)要變，當(dāng)各種各樣的彈層變多的時候，我們都將其掛載到APP或者一個組件下顯然不太合理，而且如果要在action或者其他非組件場景中要用到通知，那么純組件模式的用法也無法實(shí)現(xiàn)。那么有沒有辦法即用到Vue組件化特性方便得實(shí)現(xiàn)一個通知組件的展現(xiàn)，那么我們可否用一個方法來控制彈層組件的顯示和隱藏呢？

目標(biāo)一

實(shí)現(xiàn)一個簡單的反饋通知，可以通過方法在組件內(nèi)直接調(diào)用。比如Vue.$confirm({...obj})

首先，我們來實(shí)現(xiàn)通知組件，相信這個大部分人都能寫出來一個像模像樣的組件，不啰嗦，直接上代碼：

<template>      <div          :class="type"          class="eqc-notifier">          <i              :class="iconClass"              class="icon fl"/>          <span>{{ msg }}</span>      <!-- <span class="close fr eqf-no" @click="close"></span> -->      </div>  </template>  <script>  export default {      name: 'Notification',      props: {          type: {              type: String,              default: ''          },          msg: {              type: String,              default: ''          }      },      computed: {          iconClass() {              switch (this.type) {                  case 'success':                      return 'eqf-info-f'                  case 'fail':                      return 'eqf-no-f'                  case 'info':                      return 'eqf-info-f'                  case 'warn':                      return 'eqf-alert-f'              }          }      },      mounted() {          setTimeout(() => this.close(), 4000)      },      methods: {          close() {          }      }  }  </script>  <style lang="scss">      .eqc-notifier {          position: fixed;          top: 68px;          left: 50%;          height: 36px;          padding-right: 10px;          line-height: 36px;          box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);          border-radius: 3px;          background: #fff;          z-index: 100; // 層級最高          transform: translateX(-50%);          animation: fade-in 0.3s;      .icon {          margin: 10px;          font-size: 16px;      }      .close {          margin: 8px;          font-size: 20px;          color: #666;          transition: all 0.3s;          cursor: pointer;          &:hover {              color: #ff296a;          }      }      &.success {          color: #1bc7b1;      }      &.fail {          color: #ff296a;      }      &.info {          color: #1593ff;      }      &.warn {          color: #f89300;      }      &.close {          animation: fade-out 0.3s;      }      }  </style>

在這里需要注意，我們定義了一個close方法，但內(nèi)容是空的，雖然在模板上有用到，但是似乎沒什么意義，在后面我們要擴(kuò)展組件的時候我會講到為什么要這么做。

創(chuàng)建完這個組件之后，我們就可以在模板中使用了<notification type="xxx" msg="xxx" />

實(shí)現(xiàn)通過方法調(diào)用該通知組件

其實(shí)在實(shí)現(xiàn)通過方法調(diào)用之前，我們需要擴(kuò)展一下這個組件，因?yàn)閮H僅這些屬性，并不夠我們使用。在使用方法調(diào)用的時候，我們需要考慮一下幾個問題：

•  顯示反饋的定位

•  組件的出現(xiàn)和自動消失控制

•  連續(xù)多次調(diào)用通知方法，如何排版多個通知

在這個前提下，我們需要擴(kuò)展該組件，但是擴(kuò)展的這些屬性不能直接放在原組件內(nèi)，因?yàn)檫@些可能會影響組件在模板內(nèi)的使用，那怎么辦呢？這時候我們就要用到Vue里面非常好用的一個API，extend，通過他去繼承原組件的屬性并擴(kuò)展他。

來看代碼

import Notifier from './Notifier.vue'  function install(Vue) {      VueVue.notifier = Vue.prototype.notifier = {          success,          fail,          info,          warn      }  }  function open(type, msg) {      let UiNotifier = Vue.extend(Notifier)      let vm = new UiNotifier({          propsData: { type, msg },          methods: {              close: function () {                  let dialog = this.$el                  dialog.addEventListener('animationend', () => {                      document.body.removeChild(dialog)                      this.$destroy()                  })                  dialog.className = `${this.type} eqc-notifier close`                  dialog = null              }          }      }).$mount()      document.body.appendChild(vm.$el)  }  function success(msg) {      open('success', msg)  }  function fail(msg) {      open('fail', msg)  }  function info(msg) {      open('info', msg)  }  function warn(msg) {      open('warn', msg)  }  Vue.use(install)  export default install

可以看到close方法在這里被實(shí)現(xiàn)了，那么為什么要在原組件上面加上那些方法的定義呢？因?yàn)樾枰谀０迳辖壎?，而模板是無法extend的，只能覆蓋，如果要覆蓋重新實(shí)現(xiàn)，那擴(kuò)展的意義就不是很大了。其實(shí)這里只是一個消息彈窗組件,是可以在模板中就被實(shí)現(xiàn),還有插件怎么注入，大家都可以自己抉擇。

同時在使用extend的時候要注意：

•  方法和屬性的定義是直接覆蓋的

•  生命周期方法類似余mixin，會合并，也就是原組件和繼承之后的組件都會被調(diào)用，原組件先調(diào)用

首先通過 let UiNotifier = Vue.extend(Notifier)，我們得到了一個類似于Vue的子類，接著就可以通過new UiNotifier({...options})的方式去創(chuàng)建Vue的實(shí)例了，同時通過該方式創(chuàng)建的實(shí)例，會有組件定義里面的所有屬性。

在創(chuàng)建實(shí)例之后，vm.$mount()手動將組件掛載到DOM上面，這樣我們可以不依賴Vue組件樹來輸出DOM片段，達(dá)到自由顯示通知的效果。

擴(kuò)展:

(

說一下$mount，我們也許很多項(xiàng)目的主文件是這樣的

new Vue({      router,      store,      el: '#app',      render: h => h(App)  })

其實(shí)el與$mount在使用效果上沒有任何區(qū)別，都是為了將實(shí)例化后的vue掛載到指定的dom元素中。如果在實(shí)例化vue的時候指定el，則該vue將會渲染在此el對應(yīng)的dom中，反之，若沒有指定el，則vue實(shí)例會處于一種“未掛載”的狀態(tài)，此時可以通過$mount來手動執(zhí)行掛載。值得注意的是如果$mount沒有提供參數(shù)，模板將被渲染為文檔之外的的元素，并且你必須使用原生DOM API把它插入文檔中，所以我上面寫的你應(yīng)該明白了吧！

這是$mount的一個源碼片段,其實(shí)$mount的方法支持傳入2個參數(shù)的，第一個是 el，它表示掛載的元素，可以是字符串，也可以是 DOM 對象，如果是字符串在瀏覽器環(huán)境下會調(diào)用 query 方法轉(zhuǎn)換成 DOM 對象的。第二個參數(shù)是和服務(wù)端渲染相關(guān)，在瀏覽器環(huán)境下不需要傳第二個參數(shù)。

)

好了，我們現(xiàn)在其實(shí)就可以在組件中:

this.notifier[state](msg)來調(diào)用了,是不是很方便？

進(jìn)階

我們剛才實(shí)現(xiàn)了在Vue中通過方法來進(jìn)行用戶反饋的提醒,再增加一個難度:

我們vue項(xiàng)目中應(yīng)該也遇到過這種情況，彈出一個對話框或是選擇框？不但要求用方法彈出，并且能接收到對話框交互所返回的結(jié)果。

這里就不詳細(xì)的分析了直接上代碼說(之前的代碼,用render來寫的組件，懶得改了，直接拿來用...)，先創(chuàng)建一個對話框組件---Confirm.vue。

<script>      let __this = null      export default {          name: 'Confirm',          data() {              return {                  config: {                      msg: '',                      ifBtn: '',                      top: null                  }              }          },          created() {              __this = this          },          methods: {              createBox(h) {                  let config = {}                  config.attrs = {                      id: '__confirm'                  }                  let children = []                  children.push(this.createContainer(h))                  children.push(this.createBg(h))                  return h('div', config, children)              },              createBg(h) {                  return h('div', {                      class: 'bg',                      on: {                          click: __this.$cancel                      }                  })              },              createContainer(h) {                  let config = {}                  config.class = {                      'box-container': true                  }                  if (__this.config.top) {                      config.style = {                          'top': __this.config.top + 'px',                          'transform': 'translate(-50%, 0)'                      }                  }                  let children = []                  children.push(this.createContentBox(h))                  children.push(this.createClose(h))                  if (__this.config.ifBtn) {                      children.push(__this.createBtnBox(h))                  }                  return h('div', config, children)              },              createContentBox(h) {                  let config = {}                  config.class = {                      'content-box': true                  }                  return h('div', config, [__this.createContent(h)])              },              createContent(h) {                  let config = {}                  config.domProps = {                      innerHTML: __this.config.msg                  }                  return h('p', config)              },              createClose(h) {                  return h('i', {                      class: 'eqf-no pointer close-btn',                      on: {                          click: __this.$cancel                      }                  })              },              createBtnBox(h) {                  return h(                      'div', {                          class: {                              'btn-box': true                          }                      }, [                          __this.createBtn(h, 'btn-cancel middle mr10', '取消', __this.$cancel),                          __this.createBtn(h, 'btn-primary middle mr10', '確定', __this.$confirm)                      ])              },              createBtn(h, styles, content, callBack) {                  return h('button', {                      class: styles,                      on: {                          click: callBack                      }                  }, content)              }          },          render(h) {              return this.createBox(h)          }      }      </script>        <style scoped>      #__confirm {          position: fixed;          top: 0;          left: 0;          z-index: 10;          width: 100%;          height: 100%;      }      #__confirm .bg {          position: fixed;          top: 0;          left: 0;          z-index: 0;          width: 100%;          height: 100%;      }      #__confirm .box-container {          position: absolute;          width: 500px;          padding: 20px;          padding-top: 30px;          border-radius: 3px;          background: #fff;          z-index: 1;          box-shadow: 2px 2px 10px rgba(0,0,0,0.4);          top: 50%;          left: 50%;          transform: translate(-50%, -50%);      }      #__confirm .content-box {          font-size: 14px;          line-height: 20px;          margin-bottom: 10px;      }      #__confirm .btn-box {          margin-top: 20px;          text-align: right;      }      #__confirm .close-btn {          position: absolute;          top: 15px;          right: 20px;          font-size: 16px;          color: #666666;      }      #__confirm .close-btn:hover {          color: #1593FF;      }          #__confirm .bg {              position: fixed;          }      </style>

然后創(chuàng)建confirm.js：

'use strict'  import Confirm from './Confirm.vue'  const confirmConstructor = Vue.extend(Confirm)  const ConfirmViewStyle = config => {      const confirmInstance = new confirmConstructor({          data() {              return {                  config              }          }      })      confirmInstanceconfirmInstance.vm = confirmInstance.$mount()      confirmInstanceconfirmInstance.dom = confirmInstance.vm.$el      document.body.appendChild(confirmInstance.dom)  }  const close = () => {      let dom = document.querySelector('body .modelServe-container')      dom && dom.remove()      Vue.prototype.$receive = null  }  const closeConfirm = () => {      let dom = document.getElementById('__confirm')      dom && dom.remove()      Vue.prototype.$confirm = null  }  function install(Vue) {      Vue.prototype.modelServe = {          confirm: (obj) => {              return new Promise(resolve => {                  Vue.prototype.$confirm = (data) => {                      resolve(data)                      closeConfirm()                  }                  ConfirmViewStyle(obj)              })          }      }      Vue.prototype.$dismiss = close      Vue.prototype.$cancel = closeConfirm  }  Vue.use(install)  export default install

思路很簡單，在我們創(chuàng)建的時候同時返回一個promise，同時將resolve通行證暴露給vue的一個全局方法也就是將控制權(quán)暴露給外部，這樣我們就可以向這樣，我上面的confiram.vue是直接把取消綁定成了$cancel,把確定綁定成了$confirm,所以點(diǎn)擊確定會進(jìn)入full，也就是.then中，當(dāng)然你也可以傳參數(shù)。

this.modelServe.confirm({      msg: '返回后數(shù)據(jù)不會被保存,確認(rèn)?',      ifBtn: true  }).then(_ => {      this.goBack()  }).catch()

寫的有點(diǎn)多，其實(shí)還可以擴(kuò)展出好多技巧，比如模態(tài)框中傳一個完整的組件，并展示出來，簡單地寫一下，其實(shí)只需改動一點(diǎn)。

import Model from './Model.vue'  const modelConstructor = Vue.extend(Model)  const modelViewStyle = (obj) => {  let component = obj.component  const modelViewInstance = new modelConstructor({      data() {          return {              disabledClick: obj.stopClick // 是否禁止點(diǎn)擊遮罩層關(guān)閉          }      }  })  let app = document.getElementById('container')  modelViewInstancemodelViewInstance.vm = modelViewInstance.$mount()  modelViewInstancemodelViewInstance.dom = modelViewInstance.vm.$el  app.appendChild(modelViewInstance.dom)  new Vue({      el: '#__model__',      mixins: [component],      data() {          return {              serveObj: obj.obj          }      }  })  }  ...  Vue.prototype.modelServe = {      open: (obj) => {          return new Promise(resolve => {              modelViewStyle(obj, resolve)              Vue.prototype.$receive = (data) => {                  resolve(data)                  close()              }          })      }  }

調(diào)用：

sendCallBack() {      this.modelServe.open({          component: AddCallback,          stopClick: true      }).then(data =>           if (data === 1) {              this.addInit()          } else {              this.goBack()          }      })

},

這里我們用了mixins,最后最后再簡單地介紹一下mixins,extend,extends的區(qū)別。

**- Vue.extend使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項(xiàng)的對象。

•     mixins 選項(xiàng)接受一個混入對象的數(shù)組。這些混入實(shí)例對象可以像正常的實(shí)例對象一樣包含選項(xiàng)，他們將在 Vue.extend() 里最終選擇使用相同的選項(xiàng)合并邏輯合并。舉例：如果你的混入包含一個鉤子而創(chuàng)建組件本身也有一個，兩個函數(shù)將被調(diào)用。Mixin 鉤子按照傳入順序依次調(diào)用，并在調(diào)用組件自身的鉤子之前被調(diào)用。

注意(data混入組件數(shù)據(jù)優(yōu)先鉤子函數(shù)將混合為一個數(shù)組，混入對象的鉤子將在組件自身鉤子之前調(diào)用,值為對象的選項(xiàng)，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。)

•     extends 允許聲明擴(kuò)展另一個組件(可以是一個簡單的選項(xiàng)對象或構(gòu)造函數(shù))，而無需使用 Vue.extend。這主要是為了便于擴(kuò)展單文件組件。這和 mixins 類似。**

概括

extend用于創(chuàng)建vue實(shí)例  mixins可以混入多個mixin，extends只能繼承一個  mixins類似于面向切面的編程（AOP），extends類似于面向?qū)ο蟮木幊?nbsp; 優(yōu)先級Vue.extend>extends>mixins

到此，相信大家對“Vue的面試知識點(diǎn)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享題目：Vue的面試知識點(diǎn)有哪些
文章源于：http://m.rwnh.cn/article8/ggdcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、電子商務(wù)、小程序開發(fā)

廣告

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