vue面试题

1.vue生命周期函数

beforeCreate
created（可首次取到data值、服务端渲染时接口放此函数中）
beforeMount
mounted（可访问dom结构，使用$refs属性对dom进行操作，接口请求一般放此函数里，服务端渲染时不支持mounted）
beforeUpdate(更新数据，不会造成重渲染)
updated（数据更新完成，注意避免在此期间更改数据，因为可能会导致死循环更新）
beforeDestroy（发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器）
destroyed

从源码解读Vue生命周期，让面试官对你刮目相看

2.computed和watch

computed 有getter()和setter()方法，适用于一个数据属性在它所依赖的属性发生变化时而变化。
watch，适用于，当数据发生改变时，执行异步操作或比较大开销操作的情况。例如采购订单列表删除增加订单。
watch可以监听obj.key，可deep(深度)监听、immediate(初次绑定时执行)

3.$set 当data改变页面不渲染时使用，因为没有触发render函数。

4.v-for循环key的作用

key是唯一标识，作用是尽可能的复用dom元素，vue中渲染虚拟dom，数据改变时会进行diff算法，
若没有唯一标识，有可能会出现绑定错误的情况。
例如：新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
     需要在新旧children的节点中保存映射关系，以便能够在旧children的节点中找到可服用的节点。
     key也就是children中节点的唯一标识。

5.nextTick作用

    异步处理，延迟回调修改数据获取更新后的dom时用到。

6.组件传值（详细点儿）

    6.1 父传子  props

             父组件用bind绑定数据，子组件用props接受绑定数据

    6.2 子传父 $emit

            子组件用$emit方法返回事件名和数据，父组件绑定传回事件，并接受数据

    6.3 兄弟组件传值  $bus

            在main.js里创建  vue.prototype.$bus=new Vue()

             用$bus.$emit()返回事件和数据，用$bus.$on()监听事件接受数据

    6.4 跨组件传值

            vuex、sessionStorage、localStorage、cookie、路由组件传值

7.路由

    7.1 路由mode有两个值：hash、history

           hash的值实际就是URL中#后面的东西。

           history实际采用了HTML5中提供的API来实现，

                      主要有history.pushState()和history.replaceState()。

    7.2路由标签

 <router-link></router-link>、<router-view/>、<keep-alive></keep-alive>

            keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

            常用的两个属性 include/exclude，允许组件又条件的进行缓存，

                          可使用正则、数组、枚举方法，且exclude优先级高于include。

            两个生命周期函数activated/deactivated，用来得知当前组件是否处于活跃状态。

    7.3 路由跳转方式

            router-link、this.$router.push()、this.$router.replace()

    7.4 路由传参方法：直接携带参数、query、params

            7.4.1 直接携带参数

                     直接调用$router.push()实现携带参数的跳转，需要在对应路由配置。

                     例如：        this.router.push({path:`/aa/{id}`})

                     对应配置：{path:'/aa/:id',name:'aa',component:aa}

            7.4.2 query和params区别

                     1）query要用path引入，params只能用name

                     2）query类似于get在url里面显示，params类似于post地址栏里不显示

    7.5路由守卫

            7.5.1 全局守卫

                     beforeEach()  一般用来判断是否注册和登陆

                     afterEach()   可以解决页面下滑跳转页面之后，滚动条不在顶部

                                          设置 window.scrollTo(0,0)

            7.5.2 组件内守卫

                     beforeRouterEnter、beforeRouterLeave（去其他组件前判断是否离开）

            7.5.3  路由独享守卫：beforeEnter（只在当前路由起作用）

8.vuex（每个值的作用、同步、异步）

    1）state：基本数据，用来存储变量

    2）getters：相当于state的计算属性

    3）mutation：提交更新数据方法，同步操作，使用commit触发

    4）action：分发事件，异步操作，使用dispatch触发

    5）modules：模块化vuex，项目复杂时可以让每个模块都拥有自己的state......

9.v-for和v-if并行使用采坑（优先级问题）

    原因：v-for的优先级高于v-if，因此v-if会重复运行在每个v-for中。

    解决方法：在外面套一层盒子，v-for写在外层盒子上

10.v-if和v-show区别

     1）v-show只是简单的控制元素的display属性显示隐藏，而v-if才是条件渲染（条件为真，元素将会被渲染、条件为假，元素会被销毁）；

     2）v-show 首次渲染开销大，而v-if首次渲染开销要小很多；

     3）v-if切换开销高，而v-show切换开销小；

     4）v-if有配套的v-else-if和v-else，而v-show没有；

     5）v-if可以搭配template使用，而v-show不行

11.移动端运行vue白屏怎么办

     1）安装babel-polyfill

     2）webpack配置修改

/* 添加babel-polyfill */
entry: {
    app: ["babel-polyfill", "./src/main.js"]
},

12.页面下滑后，跳转页面不是从顶部开始，解决方法

mounted () {
    this.$router.afterEach((to, from, next) => {window.scrollTo(0, 0)})}}

13.如何实现路由懒加载

     箭头函数引用实现懒加载

14.深度拷贝，为何使用

      Json.Parse(Json.stringfiy())      为了防止多组件复用时，出现数据变动

15.webpack打包配置项

1、在工程目录下建个webpack.config.js
2、Webpack.config.js配置文件内容，如下：
	const path = require('path');
	const webpack = require('webpack');
	module.exports = {
	    //页面入口文件配置
	    entry: './app.js',
	    //入口文件输出配置
	    output: {
	        path:__dirname+'/build',
	        filename:'[name]-[chunkhash].js'
	    },
	    resolve: {
	        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
	        extensions: ['.js','.json']
	    },
	    target: 'node',
	    context: __dirname,
	    node: {
	        __filename: true,
	        __dirname: true
	    },
	    //加载器配置
	    module: {
	        rules: [
	            {
	                test: /\.js$/,
	                loader: 'babel-loader',
	                query: {
	                    presets: ['es2015','stage-0']
	                },
	                exclude:/node_modules/
	            }
	        ]
	    },
	    plugins: [
	        //newwebpack.optimize.UglifyJsPlugin()
	    ]
	};
3、在当前项目目录下，用命令行工具输入webpack，进行打包。（命令webpack）
4、打包完成后，当前工程目录下的build文件夹里会多出一个js文件，在build目录下使用命令行，输入 node + js文件名，只有光标显示就是启动成功了！

16.vue事件绑定原理

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

17.SSR了解吗？