常见问题

• 1.vuex的作用？
• 2.vue中的路由拦截器的作用？
• 3.axios的作用？
• 4.列举vue的常见指令。
• 5.列举Http请求中常见的请求方式？
• 6.对于MVVM的理解
• 7.Vue的生命周期
• 8.Vue实现数据双向绑定的原理：Object.defineProperty（）
• 9.Vue组件间的参数传递
• 10.Vue的路由实现：hash模式 和 history模式
• 11.vue路由的钩子函数 
• 12.vue-cli如何新增自定义指令？
• 13.vue如何自定义一个过滤器？
• 14.对keep-alive 的了解？
• 15.v-if 和 v-show 区别
• 16.vue几种常用的指令
• 17.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
• 18.vue常用的修饰符？
• 19.vue.js的两个核心是什么？
• 20.vue中 key 值的作用？

几种路由

1、 路由出口 ：  

2、 声明式导航：

                         修改任务
                       
                   

跳转后的页面使用： 

        if(this.query.type == "add"){

        }

            body.taskInfo.id = this.query.data.id;

            this.query = this.$route.query

3、编程式导航： 

dowm(idx){
        // router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
        // this.$router.push({path: "/handsonPage", query: { ...this.$route.query,project_id: idx}})
        this.$router.push({path: "/handsonPage", query: { project_id: idx}})
      },     

什么是localStorage和sessionStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

1. sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

2. localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在’

3. localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
   sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
   localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
   sessionStorage作用域是窗口、协议、主机名、端口

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

sessionStorage语法：

sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。

sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。

sessionStorage.clear() //清除 sessionStorage 对象所有的项

json对象： 

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom  

localStorage语法:

localStorage.setItem('hou', JSON.stringify(info));

localStorage.setItem('zheng', str);

if(localStorage.length>0){

            }

工具封装

https://www.jb51.net/article/131264.htm

监听storage变化

用途： 需要一个两个数据在全局共享，vue虽然提供了vuex模块来解决此问题，但是为了一两个数据的共享引入vuex未免小题大做，所以我们选择使用storage来保存共享数据，但有个问题就是如何监听storage的变化

范围：Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

如果在另外一个路由(比如路由B)中，我们想根据watchStorage的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听：

created() {
        window.addEventListener('setItem', ()=> {
            console.log(sessionStorage.getItem('username'))
            }
        }
  },

登录拦截-requireAuth:true

例子：

vue登录权限实现(登录拦截)_duansamve的博客-CSDN博客_vue登录权限

https://www.jianshu.com/p/5f96e120171e

axios的作用

    vue中的ajax，用于向后台发起请求