• <object id="wee46"></object>
  • <center id="wee46"><tt id="wee46"></tt></center><kbd id="wee46"></kbd>
  • <sup id="wee46"></sup>
  • 廈門IT培訓
    美國上市IT培訓機構

    13429669395

    2020年Web前端面試問題總結之VUE問題

    • 時間:2020-11-04 14:02
    • 發布:廈門達內IT培訓
    • 來源:企業面試題

    今天小編要跟大家分享的文章是關于2020年Web前端面試問題總結之VUE問題。準備參加Web前端面試的小伙伴們來和小編一起看一看吧,希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助。

    2020年Web前端面試問題總結

    VUE問題

    1.聊聊對vue的理解

    vue是一個漸進式的JS框架。他易用,靈活,高效;可以把一個頁面分隔成多個組件;當其他頁面有類似功能時,直接讓封裝的組件進行復用;他是構建用戶界面的聲明式框架,只關心圖層;不關心具體是如何實現的

    2.V-model的原理是什么?

    Vue的雙向數據綁定是由數據劫持結合發布者訂閱者實現的。數據劫持是通過Object.defineProperty()來劫持對象數據的setter和getter操作。在數據變動時作你想做的事

    原理 通過Observer來監聽自己的model數據變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通信橋梁,達到數據變化->視圖更新 在初始化vue實例時,遍歷data這個對象,給每一個鍵值對利用Object.definedProperty對data的鍵值對新增get和set方法,利用了事件監聽DOM的機制,讓視圖去改變數據

    3.談談對生命周期的理解

    · beforeCreate階段:vue實例的掛載元素el和數據對象data都是undefined,還沒有初始化。

    · created階段:vue實例的數據對象data有了,可以訪問里面的數據和方法,未掛載到DOM,el還沒有

    · beforeMount階段:vue實例的el和data都初始化了,但是掛載之前為虛擬的dom節點

    · mounted階段:vue實例掛載到真實DOM上,就可以通過DOM獲取DOM節點

    · beforeUpdate階段:響應式數據更新時調用,發生在虛擬DOM打補丁之前,適合在更新之前訪問現有的DOM,比如手動移除已添加的事件監聽器

    · updated階段:虛擬DOM重新渲染和打補丁之后調用,組成新的DOM已經更新,避免在這個鉤子函數中操作數據,防止死循環

    · beforeDestroy階段:實例銷毀前調用,實例還可以用,this能獲取到實例,常用于銷毀定時器,解綁事件

    · destroyed階段:實例銷毀后調用,調用后所有事件監聽器會被移除,所有的子實例都會被銷毀

    4.VUE和REACT有什么區別?

    react整體是函數式的思想,把組件設計成純組件,狀態和邏輯通過參數傳入,所以在react中,是單向數據流;

    vue的思想是響應式的,也就是基于是數據可變的,通過對每一個屬性建立Watcher來監聽,當屬性變化的時候,響應式的更新對應的虛擬dom。

    5.vuex的流程

    頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation。

    mutation會修改state中對于的值。最后通過getter把對應值跑出去,在頁面的計算屬性中

    通過mapGetter來動態獲取state中的值

    6.vuex有哪幾種狀態和屬性

    · state中保存著共有數據,數據是響應式的

    · getter可以對state進行計算操作,主要用來過濾一些數據,可以在多組件之間復用

    · mutations定義的方法動態修改state中的數據,通過commit提交方法,方法必須是同步的

    · actions將mutations里面處理數據的方法變成異步的,就是異步操作數據,通store.dispatch來分發actions,把異步的方法寫在actions中,通過commit提交mutations,進行修改數據。

    · modules:模塊化vuex

    7.vue路由的兩種模式

    · hash ——即地址欄URL中的#符號(此hsah 不是密碼學里的散列運算) hash 雖然出現URL中,但不會被包含在HTTP請求中,對后端完全沒有影響,因此改變hash不會重新加載頁面。

    · history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法

    這兩個方法應用于瀏覽器的歷史記錄站,在當前已有的back、forward、go 的基礎之上,它們提供了對歷史記錄進行修改的功能。只是當它們執行修改是,雖然改變了當前的URL,但你瀏覽器不會立即向后端發送請求。

    8.vue中 key 值的作用

    當 Vue.js 用v-for正在更新已渲染過的元素列表時,它默認用“就地復用”策略。如果數據項的順序被改變,Vue 將不會移動 DOM 元素來匹配數據項的順序,而是簡單復用此處每個元素,并且確保它在特定索引下顯示已被渲染過的每個元素。

    key的作用主要是為了高效的更新虛擬DOM。

    9.$route和$router的區別

    · $route是“路由信息對象”,包括path,params,hash,query,fullPath,matched,name等路由信息參數。

    · $router是“路由實例”對象包括了路由的跳轉方法,鉤子函數等。

    10.vue-router守衛

    · 導航守衛 router.beforeEach 全局前置守衛

    · to: Route: 即將要進入的目標(路由對象)

    · from: Route: 當前導航正要離開的路由

    · next: Function: 一定要調用該方法來 resolve 這個鉤子。(一定要用這個函數才能去到下一個路由,如果不用就攔截) 執行效果依賴 ext 方法的調用參數。

    · next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。

    · next(false): 取消進入路由,url地址重置為from路由地址(也就是將要離開的路由地址)。

    // main.js 入口文件

    import router from './router'; // 引入路由

    router.beforeEach((to, from, next) => {

    next();

    });

    router.beforeResolve((to, from, next) => {

    next();

    });

    router.afterEach((to, from) => {

    console.log('afterEach 全局后置鉤子');

    });

    組件內的守衛 你可以在路由組件內直接定義以下路由導航守衛

    const router = new VueRouter({

    routes: [

    {

    path: '/foo',

    component: Foo,

    beforeEnter: (to, from, next) => {

    // ...

    }

    }

    ]

    })

    組件內的守衛 你可以在路由組件內直接定義以下路由導航守衛

    const Foo = {

    template: `...`,

    beforeRouteEnter (to, from, next) {

    // 在渲染該組件的對應路由被 confirm 前調用

    // 不!能!獲取組件實例 `this`

    // 因為當守衛執行前,組件實例還沒被創建

    },

    beforeRouteUpdate (to, from, next) {

    // 在當前路由改變,但是該組件被復用時調用

    // 舉例來說,對于一個帶有動態參數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,

    // 由于會渲染同樣的 Foo 組件,因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。

    // 可以訪問組件實例 `this`

    },

    beforeRouteLeave (to, from, next) {

    // 導航離開該組件的對應路由時調用,我們用它來禁止用戶離開

    // 可以訪問組件實例 `this`

    // 比如還未保存草稿,或者在用戶離開前,

    將setInterval銷毀,防止離開之后,定時器還在調用。

    }

    }

    11.axios是什么?怎么使用?描述使用它實現登錄功能的流程?

    請求后臺資源的模塊。

    $ npm install axios -S裝好 復制代碼

    然后發送的是跨域,需在配置文件中config/index.js進行設置。后臺如果是Tp5則定義一個資源路由。js中使用import進來,然后.get或.post。返回在.then函數中如果成功,失敗則是在.catch函數中

    12.vue修飾符

    · stop:阻止事件的冒泡

    · prevent:阻止事件的默認行為

    · once:只觸發一次

    · self:只觸發自己的事件行為時,才會執行

    13.vue項目中的性能優化

    1.不要在模板里面寫過多表達式

    2.循環調用子組件時添加key

    3.頻繁切換的使用v-show,不頻繁切換的使用v-if

    4.盡量少用float,可以用flex

    5.按需加載,可以用require或者import()按需加載需要的組件

    6.路由懶加載

    14.vue.extend和vue.component

    · extend 是構造一個組件的語法器。然后這個組件你可以作用到Vue.component這個全局注冊方法里 還可以在任意vue模板里使用組件。也可以作用到vue實例或者某個組件中的components屬性中并在內部使用apple組件。

    · Vue.component 你可以創建 ,也可以取組件。

    以上就是小編今天為大家分享的關于2020年Web前端面試問題總結之VUE問題的文章,希望本篇文章能夠對正準備參加Web前端面試的小伙伴們有所幫助,想要了解更多Web前端知識記得關注達內Web培訓官網,最后祝愿小伙伴們工作順利,成為一名優秀的Web前端工程師

    【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

    預約申請免費試聽課

    怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

    上一篇:2020年Web前端面試問題總結之React問題
    下一篇:網絡運維工程師就業前景真的好嗎?

    如何讓自己的簡歷脫穎而出

    運維的職業發展現狀及前景

    2021年Java面試題及答案匯總

    Java程序員面試如何獲得高薪

    • 關注微信公眾號

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    深夜办公室完整版在线观看,中文文字幕在线电影,尹人在线最新香蕉视频,欧美,日韩,国产,专区