vue面试题总结

写在前面: 这是学习Vue2时一开始比较常见碰到的一些面试题,当然也涵盖了大部分的Vue基础知识,而且可以说是Vue的核心基础.

1. style=scoped

style=scoped的原理是给DOM元素加上了类似data-v-56ab186的属性，并且在写样式的时候也加上去。

2. Vue里面的data

在components组件里面data只能是函数,在new Vue中是可以作为对象的.当data是一个函数的时候,每个实例(页面)(组件)都能拥有独立的data,可以互不影响.

3. router和route的区别

router是VueRouter的实例,是一个全局路由对象,拥有路由跳转的方法,钩子函数等等,route是跳转的路由对象,里面有path,query,name,params等属性.

4. Vue响应式的原理

vue2的响应式只能针对单个属性做监听,响应式的原理是通过遍历和递归,给data里的所有属性添加getter和setter,所以vue2只能实现data里面的数据有响应式,而通过下标修改以及添加一个预先不存在的对象属性的方式是不能触发setter函数,也就没有响应式效果,所以需要用$set的方式进行添加. vue3的原理是proxy数据代理,可以监听一整个对象,所以对象里面的数据都能被监听到. 相当于每次访问和修改属性都会被拦截下来(类似请求拦截).

5. 常用的生命周期。

1. created （VM.$el还没生成，data已经完成响应式的处理 ,  用于请求数据）
2. mounted （vm.$el创建 , data已经响应式 ，挂载完成）
3. updated（数据更新，可多次获取执行）
4. activated （keep-alive标签的生命周期，激活时调用

5.watch属性相关

用法：直接监视某一个变量内容改变以及非dom元素的改变。

特性：第一次绑定时是不会监听的，而且普通watch监听不到对象里面的属性改变，需要进行深度监听。

技巧：把immediate属性设置为true，可以在第一次也进行监听（调用handler方法）如父传子的时候，子组件props首次监听到父组件传值就需要开启。深度监听就是把deep属性设置为true，但是会监听对象里面所有的属性。如果需要监听对象里面单个属性，需要用字符串形式。

如下:

watch: {
  	“cityName.name”: {
    	 handler(newName, oldName) {
           // ...      
        },
     	deep: true,
     	immediate: true
  	}
}

数组不需要深度监听，对象数组需要用深度监听。

6.组件传值方法。

1. props,父传子
2. $.emit(),子传父
3. vuex插件
4. $refs,父组件直接获取子组件的实例
5. v-solt,插槽
6. eventbus,简易vuex.先全局注册,然后通过this.$eventbus.$emit事件上传值,通过this.$eventBus.$on事件获取值

7.路由传参

1. 动态路由传参

        1.路由定义：{ path: '/admin/:id'}
        2.页面传参: {path : `/admin/${id} `}
        3.页面获取：this.$route.$query.id

2. parmas传参

        1.路由定义：{ path: '/admin/',name:home}
        
        2.页面传参:
            this.$route.$push({
                name: home,
                params:{
                    id:msg,
                }
            })
        
        3.页面获取：this.$route.$params.id

3.query传参

        1.路由定义：{ path: '/admin/',name:home}
        
        2.页面传参:	 
        this.$route.$push({
            name: home,
            query:{
                flog:msg,
            }
        })
        
        3.页面获取：this.$route.$params.flog

8. 路由懒加载：

components:() => import('@/components/home')

好处:

首屏优化
提升性能

9. 特定函数特定用途：

$nexttick()方法，用于立即获取更新后的dom
v-cloak属性，用于应对网速较慢时候屏幕闪烁的情况。
keep-alive标签用于保存数据频繁请求的组件，因为可以留下缓存。方便从缓存中快速渲染。可以利用transition标签加入动画。
transition标签给单个元素添加过度动画，transition-group给列表添加过度动画。
事件修饰符：
- .stop（阻止冒泡）
- .once（仅一次）
- .native（触发原生事件）
- .prevent（阻止默认行为
数据双向绑定修饰符： -.lazy(当失去焦点或者按下回车键再进行数据同步) -.trim(首位空格过滤) -.number(转换为字母)
路由导航守卫：在路由发生改变的时候执行，执行实际比beforecreated还早，可以用于token验证，判断是否有访问权限，提示跳转地址。

10. 数据请求：

设置跨域携带cookies：axios.defaults.widtcredentials = true.

基地址设置： axios.defaults.baseURL = "地址url"

Vue.prototype.$axios = axios

拦截器：

1. 请求拦截器

axios.interceptors.request.use(function (config) {
    // 可以在发请求之前在这里设置一些请求头
    //一般加token，username，等等，根据业务需求
    `config.headers.Authorization=token`
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

2. 响应拦截器

axios.interceptors.response.use(function (response) {
   // 可以在获取响应数据之后设置一些提示 如获取失败/成功
   `response.data.code == 200?`
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

加密方式(前端加密作用不大，主要还是靠后端加密) 1. md5，SHA1，base64

Vue面试题总结