我个人在面试上遇到的常问问题

我个人在面试上遇到的常问问题

老师们 同学们大家好 我是你们的小蚂蚱 今天我想分享一下我常被问到的面试题

html5 的标签

footer header mark（高亮） nav main

css3常用属性

transform （向元素2/3D转换） transition 过渡 text-shadow 阴影 word-wrap：强制转换 border-radius

es6

箭头函数 promise 解构赋值 模板字符串 类

vue的生命周期

beforecreate created
beformoute mouted （操作dom）
beforeupdate updated
befordestroy destroyed（删除计时器）

mounted生命周期是 100% 有dom  不一定有数据
created 生命周期 是100% 有数据 不一定有dom

vuex生命周期

Sate 存放东西 $store.state … mapState
Getter 计算操作
Mutation 事件操作 （更改Vuex的store中的状态的唯一方法是提交Mcution）
Action 异步操作 （提交的是 mutation，而不是直接变更状态。）
Module (相当于前面四个生命周期的总和不管它

vuerouter的生命周期：

1.全局路由钩子函数
每次路由跳转，都会执行beforeEach和afterEach，一般写在main.js可以做权限控制

2.单个路由钩子函数
beforeEnter有三个参数：to/from/next

3.组件内路由钩子函数
三个参数：to/from/next
beforeRouteEnter：进入这个组建路由之前
beforeRouteLeave：离开这个组建路由
beforeRouteUpdate：再本路由的下级路由切换才会触发beforeRouteUpdate

Svn与Git的区别

1. 最核心的区别Git是分布式的，而Svn不是分布的
   2)Git把内容按元数据方式存储，而SVN是按文件
2. Git没有一个全局版本号，而SVN有
3. Git的内容的完整性要优于SVN

axios

1.安装axios

npm install --save axios

2. 在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用。

import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的，不需要我们再npm安装一个
 
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;

3.在项目里愉快的使用axios啦

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(function(res){
            console.log(res.data)
                  //控制台打印请求成功时返回的数据
               //bind(this)可以不用
          }.bind(this))
          .catch(function(err){
            if(err.response) {
              console.log(err.response)
                //控制台打印错误返回的内容
            }
                //bind(this)可以不用
          }.bind(this)

vuex

npm install vuex --save

新建个store 文件夹 里面有个 store.js
在mian.js里面引用

动态路由

循环路由的时候会加个判断 v-if item.meta.role == B

保留组件的 是 keep-alive 组件

router/index.js

// 初始化路由
export default new Router({  
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]  
});
// 动态路由 meta 定义了role
export const powerRouter =[    
    { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
      children: [
        { path: '/red', name: 'red', component: red,},
        { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
        { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
      ]
    }
];

store/modules/login.js actions部分

Logins({ commit }, info){
          return new Promise((resolve, reject) => {
              let data={};
              loginByUserInfo.map(function (item) { //获取所以用户信息
                  if(info.username === item.username || info.pew === item.pew){
                      commit('SET_USERNAME',item.username);  //将username和role进行存储
                      sessionStorage.setItem('USERNAME', item.username); //存入 session 
                      commit('SET_ROLE',item.role);
                      sessionStorage.setItem('ROLE', item.role);
                      return data={username:item.username,introduce:item.introduce};
                  }else{
                      return data;
                  }
            });  
              resolve(data);
        }).catch(error => {
            reject(error);
        });
      },
      Roles({ commit }, newrouter){
        return new Promise((resolve, reject) => {
              commit('SET_NEWROUER',newrouter); //存储最新路由
              resolve(newrouter);
        }).catch(error => {
            reject(error);
        });
      },

main.js

router.beforeEach((to, from, next) => {
    if(store.getters.role){ //判断role 是否存在
        
        if(store.getters.newrouter.length !== 0){  
               next() //resolve 钩子
        }else{
            let newrouter
               if (store.getters.role == 'A') {  //判断权限
                newrouter = powerRouter
            } else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                        if(route.meta.role == store.getters.role){
                            return true
                        }
                        return false
                    }else{
                        return true
                    }
                });
                newrouter = powerRouter
                newrouter[0].children = newchildren
            }
            router.addRoutes(newrouter) //添加动态路由
            store.dispatch('Roles',newrouter).then(res => { 
                next({ ...to })
            }).catch(() => {       

            })
        }      
    }else{
           if (['/login'].indexOf(to.path) !== -1) { 
           next()
        } else {
           next('/login')
        }
    }
})

components/index.vue

// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

...mapGetters([
        'newrouter'
    ])

vue的路由跳转

1、方式一：标签跳转 router-link
① 不传参

<li >
  <router-link to="user">点击验证动画效果 </router-link>   
</li>

② 跳转时传参

// 先要配置路由
path: '/user/:id'

<router-link :to="'/user/' + this.id"> <router-link/>

// 接收参数
this.$route.params.id

2、方式二：事件跳转 this.$router.push()
描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
用法：
① 字符串

this.$router.push('/home')

② 对象

this.$router.push({path:'/home'})

③ query 传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取

// 变成 /user?id=2
this.$router.push({ 
    path:'/user',
    query:{
        id:this.id
    }
})

④ params 传参，相当于post请求，页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取

this.$router.push({ 
    path:'/user',
    params:{
        id:this.id
    }
})

注：传参是 router，接收参数是 route

路由需要一个 一个实例new Router
然后 里面有一个routes的配置项
routes是个数组 里面每一个对象都是一个路径

.cookie localStroage与sessionStorage的区别

1.cookie
　　Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。由于cookie的安全性不高，所以一般不把密码保存在cookie中；

2.localStorage
　　①相当于一个5M大小的前端数据库；
　　②存储的所有数据类型都为字符串型，如果要求其他类型，取出的时候要自行转换；
　　③localStorage的值在浏览器为隐私模式时无法读取；
　　④localStorage不会被网站爬虫读取到；
　　⑤localStorage具有同源策略，所以不能在不同网站之间使用；
　　⑤localStorage的存储：
　　　　1. localStorage.a=1;
　　　　2. localStorage[“a”]=1;
　　　　3. localStorage.setItem（“a”,1）；（取的时候为localStorage . getItem,删的时候为localStorage.removeItem(“a”)或者localStorage.clear()删除全部。）
　　　　4.key()方法，相当于遍历，获取 / 删除localStorage中的第几个数据

3.sessionStorage
　　sessionStorage与localStorage的一点区别就是会化结束时，sessionStorage的值会消失，而localStorage的值则会永久保存；