面试题总结--vue

1-vue优点

    易学易用、双向数据绑定、组件化、虚拟dom、渐进式

2-组件通讯

    父传子：通过属性向子组件传递，子组件通过props接收

    子传父：通过this.$emit向父组件传递，父组件通过v-on监听

    跨级：eventBus

    全局：vuex

3-v-if和v-show

    同：都用于控制元素的显示与隐藏

    异：v-if本质是有点类似jquery的append和remove操作，会触发视图的重绘，切换开销大；v-show则控制的是css的              display属性，只编译一次

4-如何让css只作用于当前组件以及如何重置ui库的既定样式

    style增加scoped属性可以给css增加作用域

    可以再入口文件中重置ui库的样式

5-keep-alive的作用

    缓存组件，保留状态，避免重复刷新

6-vue的常用指令

    v-for、v-if、v-show、v-html、v-text、v-on、v-model

7-在vue中操作dom或子组件

    通过v-ref指令注册引用，在mounted中通过this.$refs.domName引用

8-如何强制更新组件或html

    this.$forceUpdate

    绑定key

9-key的作用

    给标签打标识，利于diff查找更新

10-项目常用目录结构

    assets   静态资源

    components   公共组件

    store    状态管理

    route    路由

    app.vue    根组件

    main.js    入口文件

11-computed计算属性和watch监听的对比

    同：两者都可以用以对某个data属性进行监听

    异：computed是基于缓存的，不会每次都调用，它多用于监听值被多个值共同影响的情况

            watch则用于监听值影响多个值的情况

12-v-on一次监听多个方法

    v-on接收一个对象：

13-$nextTick

    该函数可以认为是render之后的回调，会在页面更新或加载完成之后触发。因此此时直接获取向dom中获取是取不到值的。这可以从两个方面解释：1-每次重新render会经历beforeUpdate和updated两个阶段，在beforeUpdate时，dom中保存的仍是旧数据    2-当值改变时会在内存中生成栈队列，用以记录值的更新，在值更新过程中不会执行，直到确定为最终值后才会执行，因此可以认为是异步操作

14-data为什么必须是函数

    import会执行组件，因此每次都会执行data函数初始化一份状态，这样每个引用都维护了自己的一份状态；如果是对象的话，则每次都是上一次的状态，从而造成组件之间的相互影响

15-双向绑定

    数据劫持+发布订阅   本质是object.defineProperty

16-单页与多页

    单页：只有一个页面，对应一个根组件，通过路由组织子页面，在初始加载时会加载所有资源

    多页：多个页面

    优点：

        用户体验好、前后端分离

    缺点：

        不利于seo、不支持浏览器导航、初次加载时间过长

17-v-for与v-if

    v-for的优先级更高，在同一标签下使用，渲染的结果是每一个标签都添加v-if，这是一种性能浪费。如果只需要对特定的某一个判断，建议将v-if写在内

18-assets和static

    两者都是静态资源目录，前者会被打包，后者则不会经历此环节

19-事件修饰符

     .stop 阻止冒泡

    .prevent    阻止默认事件

    .once    只生效一次

    .self    只监听本身

    .capture    类似捕获，拦截子dom事件

    .passive    与prevent相反

20-vue核心

    数据驱动和组件化

21-vue和jq的区别

    jq是依赖dom的，它只是对dom操作做了一层封装，数据和界面仍是一体的；而vue则代理了dom操作，将数据层和视图层分离，开发者只需要关注数据层即可

22-优化首屏加载过慢

    路由懒加载、异步组件、cdn、配置nginx实现gzip压缩

23-路由跳转和location.href的区别

    路由跳转内部使用history.pushState，是一种局部更新；location.href则会重载整个页面

24-插槽

    插槽提供了一种将组件对本身内容的控制权交由父组件管理的方式

    默认情况下，匿名slot会作为默认值显示

    可以通过制定name属性，并在引用处通过v-slot:slotName来进行内容分发

    也可以通过属性绑定向引用处传参，引用处通过v-slot=‘参数别名’获取

25-router-link

    在移动端失效可能是由babel造成的

    如果事件不起作用，需要添加.native修饰符

    在ie失效则可能是将tag设置成了其他元素，可以尝试router.navigate插件

26-axios特点

    支持浏览器和服务端、支持异步、支持拦截，取消

27-params和query传参的区别

    params一般和name组合，query一般和path搭配

    query传参是明文的，会显示在地址后

    query传参不受刷新影响

28-vue初始化页面闪动

    原因是此时vue还未对视图代理，通过[v-clock]:{display:none}可解决

29-vue的那些数组操作会影响视图

    pop、push、shift、unshift、sort、splice、reverse

30-mvvm

    低耦合、可复用、独立开发

    vue是实现了双向数据绑定的mvvm框架，m即model，代表数据层，v即view代表视图层，vm即viewModel，相当          于一个中介者，通过数据劫持，发布订阅的方式关联vew和model，当view更新时改变model，反之亦然

31-$route和$router的区别

    $router是vueRouter的实例，通过该实例进行路由跳转，$route则是一次路由导航的信息对象，可以从中获取导航信       息

32-路由懒加载

    异步组件、import懒加载、配置webpack实现按需加载（require.ensure）

33-vuex

    在入口文件引入store下的根文件并注入根组件

    按文件模块每个文件设置state、mutations、actions、getters

    在根文件中通过modules注册

    在组件中通过mapState函数引入，通过this.$store.commit/dispatch更新