Vue的面试题

1、$on 和$emit 实现原理

 <my-component @my-event='fb'></my-component> =>ast  =>vnode

  this.$emit('my-event');



 Vue.prototype.$on=function(event:string|Array<string>,fn:Function):Component{

    const vm:Component=this;

    if(Array.isArray(event)){

        for(let i=0;l=event.length;i<l;i++){

            vm.$on(event[i],fn)

        }

    }else{



    }

}

 

2、$parent 和 $children 的实现原理

 

3、Vue 中的inject和provide的原理

 

4、谈一下你对vuex的理解

// 单向数据流，数据集中管理，多组件共享，数据无法持久化

// 如果实现数据的响应式

 

/****

 * 先表达出单向数据流的概念，及整个vuex的运行流程

 * 状态集中管理，实现多组件状态共享

 * Vuex的原理是通new Vue产生实例，达到响应式数据变化的目的

 */

 

5、Vue组件中写name选项有哪些好处和作用？

/**

 * - 写name的好处是可以给组件增添名字， vm.$options.name 获取名字

 * - 这里我们之前实现过$broadcast及$dispatch 都是根据名字来查找对应的组件 父辈和子辈来提交数据

 */

 

6、v-if v-model v-for 

let compiler =require("vue-template-compiler");



// v-if

const ast1=compiler.compile("<div v-if='false'></div>");

console.log(ast1.render);



// v-for 

const ast2=compiler.compile('<div v-for="i in 3"></div>');

console.log(ast2.render);



// v-model

const ast3=compiler.compile('input v-model="name"');

console.log(ast3.render);



// component

const ast4=compiler.compile('<component v-model="name"></component>');

console.log(ast4.render);



/* 

with(this){return (false)?_c('div'):_e()}

with(this){return _l((3),function(i){return _c('div')})}

with(this){return _c("div")}

with(this){return _c('component',{model:{value:(name),callback:function ($$v) {name=$$v},expression:"name"}})}

 */