VUE.JS面试题总结

一、vue的相关理论
1、对于Vue是一套渐进式框架的理解
渐进式指的就是弱主张,开发者完全可以在原有大系统上面,把一两个vue组件引用实现功能,当jQurey用;也可以整个用他的全家桶开发,当Angular用;
2、vue.js的两个核心
数据驱动(双向绑定)和组件化。
3、vue的生命周期钩子
记住vue实例初始化后是beforeCreate。
初始化注入和校验是created
vue实例挂载完el是mounted
4、vue 的双向绑定的原理是什么?
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

二、vue语法
1、v-if和v-show的区别
实现原理不同,v-if判断是否在Dom书上删除或创建元素节点。v-show是元素已经渲染,通过css的display来控制显隐。
频繁切换用v-show。
2、vue常用的修饰符
①键盘、鼠标事件监听.enter .space .left等
②防止事件冒泡.stop,事件只触发一次.once,激活事件.native
③子组件修改父组件属性,父组件传值使用.sync
④过滤空格.trim
3、v-on可以绑定多个事件,一个事件可绑定多个方法。
4、vue中key的作用
使用key来给每个节点做一个唯一标识。
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
否则vue只会替换其内部属性而不会触发过渡效果。
5、v-for的优先级大于v-if
6、vue常用指令
v-if、v-for、v-on、v-model、v-bind、v-once、v-else、v-text、v-html、v-slot
7、如果data是对象,多个data指向一个内存地址,无法独立维护。
由于js只有函数构成作用域,为保证每个实例都有独立作用域。

三、vue组件知识
1、子组件调用父组件的方法
①this.parent.function //直接调用 ②子组件用emit向父组件触发事件,父组件监听该方法this.emit('fatherMethod'); ③子组件在props定义方法,父组件把方法传入到子组件,子组件直接使用就行 2、父组件调用子组件的方法 父组件引用子组件是使用ref属性<children ref="child"></children>, 调用时直接this.refs.child.method
3、父组件给子组件传值
a.父组件在引用子组件的时候使用v-bind :name="老杨" :age="30"传递属性信息
b.子组件通过props:['name','age']接收值。
4、子组件给父组件传值
a.在子组件中使用this.emit('事件名=postdata','数据')触发一个自定义的事件,事件名自定义 b.父组件在应用子组件的地方@postdata="fanction()"监听子组件触发的事件,并在父组件中定义方法fanction(data),用来接传递过来的数据,data则为子组件传过来的数据。 5、父组件修改子组件的数据 props是单向绑定的,当父组件修改子组件属性时,将传导给子组件,子组件该属性的值也会跟着变化,但反之则不可以。 而且不允许子组件直接修改父组件中的数据,报错。 6、子组件修改父组件的数据 解决方式: 方式1:如果子组件想把它作为局部数据来使用,可以将数据存入另一个变量中再操作,就不会影响父组件中的数据。 方式2:如果子组件想修改数据并且同步更新到父组件,两个方法: 方法1:父组件引用子组件传值时,在要被修改的属性后使用name.sync修饰符,子组件显式的触发一个事件this.emit('update:name','alice')。
方法2:可以将父组件的数据包装成对象,然后在组件中修改对象的属性(因为对象是引用类型,指向同一个内存空间)
7、组件间传值
①vue-router跳转传值
②本地缓存localStorge
③使用vuex数据状态管理
④使用eventBus。首先定义evenBus.js并挂载到Vue实例上,使用的子组件引入js
子组件A发布(声明)事件(通常在created或mounted中):
created() {
     eventBus.on('getTarget', target => {       console.log(target);      });    } 子组件B订阅(触发)事件: methods: {     addCart(event) {       eventBus.emit('getTarget', event.target);
     }
   }
8、动态挂载切换组件
<component :is="comName"></component>
// 组件名称是 字符串
Vue.component('login', {
template: '<h3>登录组件</h3>'
})

    Vue.component('register', {
        template: '<h3>注册组件</h3>'
    })

通过comName变量的值是login还是register,来切换组件内容。
9、keep-alive内置组件的作用
保留组件状态,避免重新渲染。比如点击列表操作进入页面详情,详情页返回时,不需要重新刷新列表,则可对列表组件进行缓存<keep-alive></keep-alive>,这样就可以从缓存中渲染,而不是重新渲染。
两个属性:(正则或字符串)include:匹配才会缓存。exclude:匹配不会被缓存。
一般配合router-view使用。所有路径下的组件都会被缓存。

四、vue路由router
五、vue状态管理vuex
1、vuex有几种特性
五驾马车:state、getters、mutations、actions、module
2、vuex中state的特性
①store就是个仓库,其中state就是数据记录的地方
②state中的数据是响应式的,数据的变化,任何引用的都会跟着变化
③mapstate是vuex针对state操作的辅助函数,把全局state和getters银蛇到当前组件commputed属性中,方便使用。
3、vuex的getters特性
①getters可以对state数据进行运算
②通过getters的function对state数据进行运算,有助于state数据的复用,可以传参。
4、vuex的mutations特性
①用于修改state的数据
②mutations中只能使用同步函数,而action选项中可以使用异步函数。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354