一，基础篇
1，指令篇 v-if , v-show , v-for ，v-on ，v-once，自定义指令 常问问题
（1） v-if 和 v-show
都能控制元素的显示和隐藏，
v-show本质就是通过控制css中的display设置为none（切换开销比较小），v-if是动态的向DOM树内添加或者删除DOM元素（切换开销比较大），
（2） v-if 和 v-for
v-for 具有比 v-if 更高的优先级，所以不应该一起使用
（3）v-for和key
key属性可以用来提升v-for渲染的效率！key属性可以避免数据混乱的情况出现(和vue用的的diff算法有关)
（4）v-on和v-once
v-on事件；v-once: 只绑定一次
（5）自定义指令 directive
Vue.directive('focus', {el.focus() }}) 全局
directives: { focus: { inserted: function(el){el.focus() } }} 局部
自定义组件里面的钩子在vue3 里面跟组件的什么周期相似
2，生命周期篇
经典八项生命周期篇
beforeCreate：创建前
create：创建前完成
beforeMount：挂载前
mounted：挂载完成
beforeUpdate： 更新前
updated：更新完成
beforeDestory：销毁前
destroyed： 销毁完成
后面加入的三项
activated：被 keep-alive 缓存的组件激活时调用
deactivated：被 keep-alive 缓存的组件停用时调用
errorCaptured：当捕获一个来自子孙组件的错误时被调用
3，组件篇
（1），注册引入
通过 import 引入
Vue.component（）全局，频繁使用的需要用
components:{} 局部
（2），通讯
子组件 =》 接收值在props里面定义，向父组件提供方法（自定义方法）$emit， 调用父组件方法或值 this.$parent， 直接调用未定义的属性 $attrs
父组件 =》 传值v-model， 接收方法v-on，直接调用 $refs.name.
（3），插槽
未命名插槽 <slot /> 直接在里面写代码
具名插槽
不传值 <slot name=“name1” /> 使用 <template v- slot ="name1" > </template >
传值 <slot left="123" name=“name1” /> 使用 <template v- slot :name1="left" > </template >
（3），动态组件,name是组件名称
< component v-bind:is="name" />
4，计算属性和侦听器（自行了解）
二，vuex 篇
原理：建的一个store仓库，与vue组件中data类似，但是是一个全局对象
state： 存储数据
getters: 相当于计算属性，可以把state中的数据派生到getters中处理，定义 name:(state,getters)=>{return 1}
mutation： 同步函数， 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，定义 name(state,n){state.count = n} 使用store.commit('name',10)
Action： 异步函数，一般用于提交mutation中的方法，使其变成异步， 定义 name(上下文对象,products){处理方法，需要提交 commit } ，上下文对象的使用 { commit ，dispatch， getters ，rootGetters， rootState， state}，使用 store.dispatch('name',10)，
上下文对象包含： commit ，dispatch， getters ，rootGetters， rootState， state
map映射： state及getters在computed里面写， mutation和Action在methods里面写
引入： import{mapMutations}from'vuex'
两种映射： ...mapMutations(['name']) 和 ...mapMutations({add:'name'})
Module： 模块化，其实就是在里面分一下小组
三，路由 篇
1, hash 和 history 模式的区别
hash 本质上是改变window.location的href属性，你只能改变#后面的url片段。 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
history接口是HTML5新增的, history 它有五种模式改变URL而不刷新页面.
2.路由定义
2 路由传参
（1）params 刷新页面参数会丢失
传 <router-like to="user/name" /> 定义{path:user/:name''} 取 this.$route.params.name
传 this.$router.push({ name: 'news', params: { userId: 123 }}) 取 this.$route.params.userId
（2）query 刷新页面参数不丢失
传 his.$router.push({ path: '/news', query: { userId: 123 }}); 取 this.$route.query.userId
3， 路由守卫（其实就是监听路由状态）
全局守卫：
跳转前： router.beforeEach((to,from,next)=>{
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error)导航会被终止且该错误会被传递给 router.onError() 注册过的回调
})
跳转后 ： router.afterEach((to,from)=>{// ...})
可以在路由配置里面添加监听，
也可以在组件里面使用，但是名称变了： beforeRouteEnter beforeRouteUpdate（跳到当前页面） beforeRouteLeave
4.方法
router.push(url) 导航到新url，向 history栈添加一条新访问记录，等同于window.history.pushState
router.replace(url) 导航到新url，替换 history 栈中当前记录，等同于window.history.replaceState
router.go(n) 在 history 记录中向前或者后退多少步，类似 window.history.go(n)
router.go(1) 在浏览器记录中前进一步，等同于 history.forward()
router.go(-1) 后退一步记录，等同于 history.back()
router.go(0) 刷新当前页面
router.back() 导航回退一步，类似于router.go(-1)
router. forward() 导航前进一步，但是不刷新前进页的表单，类似于router.go(1)
四，存储篇
Cookie，localstorage、sessionstorage，vuex
Cookie： 采用键值对的方式存储（ document.cookie = 键= 值； 键= 值），可以定义过期时间(document.cookie ="expires=有效期")，存储大小4k
localstorage： 使用方法进行键值对的方式存储（getItem(键，值)），永久存储，但是可以根据方法清除， 存储大小5m
调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
调用getItem()方法，将名字传递出去，可以获取对应的值
调用removeItem()方法，名称作为参数，可以删除对应的数据
调用clear()方法，可以删除所有存储的数据
sessionstorage：跟 localstorage 方法一样，但是是单页面回话存储，跳转页面被清除，
vuex：相当于全局变量，刷新页面清除，想长久保持数据存在，只能使用Cookie和localstorage存储，然后再赋值回去
五，前端优化篇
1.图片处理
尽量使用字体图标和SVG图标，来代替传统的PNG等格式的图片，图片压缩，图片懒加载，图片寄放其他服务器，零碎图片集成采用精灵图
2.DOM的操作
减少DOM的频繁操作，主要是减少DOM的重绘和回流
3.js及css
js及css进行代码的合并和压缩，css处理动画的性能优于js，加载顺序：将css放在body上，将js放在body下
js避免“嵌套循环”和“死循环”，减少递归，进行js封装，减少冗余代码，
4请求
代码进行合并和压缩和采用精灵图来减少请求次数，接口合并较少接口调用次数
六，前端安全篇
1，创建一个唯一的令牌（token），对任何请求， 都检查二者是否一致，时常用于用户是否登录
2、对于任何重要的请求都需要重新验证用户的身份；
3.加密传输，采用特定的加密方式，进行加密解密传输
4.检查报头中的referer参数确保请求发自正确的网站
5，输入数据时进行数据验证，防止sql注入
6，保存的数据尽量使用post传输，因为post传输的数据不会被保存
