vue前端面試題

1.vue 的響應式原理是什麼?

const data={
   name:"ray",
   age:29,
   friend:{
      friendName:"小王"  
   }  
}

const oldArrayProto=Array.prototype;
const newArrProto=Object.create(oldArrayProto);
['push','pop'].forEach(methodName=>{
   newArrProto[methodName]=function(){
    console.info("跟新視圖")
    oldArrayProto[methodName].call(this,...arguments);
}

})

function observer(target){
   if(typeof target!=="object" || target===null){
     return target;  
   }
   if(Array.isArray(target)){
     target.__proto__=newArrProto;
   } 
   for(let key in target){
          defineReactive(target,key,target[key]);
   }
}

function defineReactive(target,key,value){
   observe(value)
   Object.defineProperty(target,key,{
        get(){
            return value;
        }
  }
  set(newValue){
    observer(newValue);
    if(newValue!==value){
        value=newValue;
        console.info("視圖更新");
    }
  }

}    

 2.動態組件如何使用，使用的場景是哪些？

 

3. 使用Vue.extend 創建組件

import Toast from './Toast.vue';

const ToastContructor=Vue.extend(Toast);

function showToast(text,duration){
   const toastDom=new ToastContructor({
       el:document.createElement("div"),
       data(){
           return {
              text:text,
              show:true
           }  
       }
  })


document.body.appendChild(toastDOM.$el);

setTimeout(()=>{
    toastDOM.show=false
},duration);

}

function toastRegistry(){
　　Vue.prototype.$toast=showToast;
}
export default toastRegistry();

 4.使用addRouter 添加動態路由？

 

let routers=[{
path:"/dashboard",
compoment:compoment
}]
this.$router.addRoutes(routers);

 5.如何將所有屬性快速傳遞給子組件？

可以動態構建一個對象，將這個對象一次性綁定到組件屬性上去，而不用一個個的進行綁定

比如一個控件有屬性
name ，age

我們可以構造一個對象 

var user={name:"ray",age:19}

<tmpuser v-bind="user">
  
  
<tmpuser 組件有 name 和 age的兩個屬性。
         

6.Vue 打包優化

在編譯腳本中 添加

"scripts":{
  "build":"vue-cli-service build --report"
}

安裝包分析插件:

npm install --save-dev webpack-bundle-analyzer

在vue.config.js增加

const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports={

    configureWebpack:{
         externals:{
            'vue' :"Vue",
            'vue-router':"VueRouter",
            'vuex','Vuex'
         },

         plugins:[

　　　　new BundleAnalyzerPlugin()

　　　　]

     }

}           

 外部的包可以使用cdn進行引入。

7.兄弟組件如何通訊？

使用 eventBus

import eventBus from './event-bus';
mounted(){
  eventBus.$on("addItem",this.handleAddTitle);
},
beforeDestory(){
  eventBus.$off("addItem",this.handleAddTitle);
}

 8.異步組件

在加載組件的時候，使用如下代碼進行加載。

components:{
  Test: ()=>{
     import (/* webpackChunkName: "test" */ './component/Test')
  }
}

使用如上代碼加載組件是，就不會一開始就加載，而是在點擊的時候才加載。

9.使用 keep-alive 對組件進行緩存

10.作用域插槽

子組件：

<template>
<h1>
<slot :user="user">
 {{user.name}}
</slot> 
</h1>
</template>
<script>
export default {
   data(){
        return {
          user:{
             name:"老王",
             age:20
          }
        }
   }
}
</script>

父組件編寫：

<current-user>
   <template v-slot:default="{user}">
           {{user.age}}
   </template>
</current-user>

 11.具名插槽

插槽
<slot name="header"></slot>
使用插槽
<template v-slot:header></template>

12. markdown 獲取 html
使用 markdown-it組件進行處理。