Vue的面试题

1、$on 和$emit 实现原理

  =>ast  =>vnode

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



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

    const vm:Component=this;

    if(Array.isArray(event)){

        for(let i=0;l=event.length;i

 

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("

"); console.log(ast1.render); // v-for  const ast2=compiler.compile('

'); console.log(ast2.render); // v-model const ast3=compiler.compile('input v-model="name"'); console.log(ast3.render); // component const ast4=compiler.compile(''); 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"}})}  */