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组件进行处理。