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