一，基础篇

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传输的数据不会被保存