学习笔记（2020）

1 什么是同源策略？

同源策略（same-origin policy）是一种出于浏览器安全方面的考虑而出台的一种策略，它可以保证用户信息的安全，防止恶意的网站窃取。同源策略只允许与本域下的接口交互，不同源 的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

“同源”指的是什么？

1.同协议

2.同域名

3.同端口

端口号在域名的后面，一般80端口可以省略。

同源策略的限制范围：

1.Cookie，localStorage，IndexDB无法读取

2.DOM无法获得

3.AJAX请求不能发送

2 跨域是什么？

由于同源策略的影响，当我们从一个域名的网页去请求另一个域名的资源时，就无法成功获取资源。如果我们要想成功获取资源，那么就要用到跨域。

JSONP

JSONP是浏览器与客户端跨域通信常用的一种方法。

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。要注意JSONP只支持GET方式的请求，不支持POST请求。

script标签可以加载其它域下的js，我们可以利用这个特性实现从其它域下获取数据。

通过<script src="http://127.0.0.1:8080/getNews"></script>

这时会向接口发送获取数据，获取数据后作为js来执行。但是这个数据是JSON格式的，直接作为js运行的话如何去得到这个数据去操作呢？这时候我们可以在src后面加上一个回调函数showData。

<script src="http://127.0.0.1:8080/getNews？callback=showData"></script>

这个请求到达后端后，后端会去解析callback这个参数获取到字符串showData，在对数据进行处理。

<script>
  function showData(news){
 console.log(news)
}
</script>
<script src="http://117.0.0.1:8080/getNews?callback=showData"></script>

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

CORS

CORS的全称是跨源资源共享，是一种ajax跨域请求资源的方式，支持现代浏览器，IE支持到10以上。cors的实现方式很简单，当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

（1）res.setHeader('Access-Control-Allow-Origin','http://localhost:8080'）
//允许http://localhost:8080的请求
（2）res.setHeader('Access-Control-Allow-Origin',' ')
//允许所有的请求

在用http://127.0.0.1:8080进行请求时

使用http://localhost:8080进行跨域的时候

postMessage

postMessage是HTML5引入的一个全新的API：跨文档通信API。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

postMessage(data, origin)接受两个参数

1. data：要传递的数据
2. 字符串参数，指明目标窗口的源。postMessage()方法只会将message传递给指定窗口，当然也可以把参数设置为“ ”，这样可以传递给任意窗口，如果要指定和当前窗口同源的话可以设置为“/”。

父窗口http://father.com向子窗口http://son.com发送消息

var msg = window.open("http://son.com", "title")
msg.postMessage("hello world", "http://son.com")

子窗口向父窗口发送消息的写法：

window.opener.postMessage("nice to meet you", "http://father.com")

作者：柳岸花茗
链接：https://zhuanlan.zhihu.com/p/451450663
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3 vue 面试题

1.Vue 2 和 Vue 3的区别？

Vue2 使用的是options API，也叫选项API，该API类似于对象内属性和方法的调用，缺点是方法和data过于分散，不内聚。（高内聚，低耦合）
**Vue3 **使用的是compositions（组合、方式、方法） API，基于函数的API。

 import {ref} from Vue

2. watch、computed和methods有什么区别？

computed和methods相比，computed是有缓存的，如果computed依赖的属性没有发生变化的话，那么computed属性就不会进行重新计算。不支持异步。
methods则是看到一次计算一次。
watch是监听，computed是计算出一个值，watch则是监听一个值，当这个值发生变化的时候进行其他操作。支持异步

3. v-if和v-show的区别？

v-show的元素总是会被渲染，并且只是简单的进行css切换。
v-if动态的向DOM树内添加或者删除DOM元素，它可以确保在切换的过程中条件块内的事件监听器和子组件适当的被销毁或重建。

4. 列表遍历时key有什么用？

key主要用在Vue的虚拟DOM算法中，虚拟DOM算法会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

5. Vue有哪些生命周期函数？分别有什么作用？

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。

created：在实例创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测、property和方法的运算、watch/event事件的回调。
然而，挂载阶段还未开始，$el.property还不可用。

beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。

mounted：实例被挂载后调用，这时el被新创建的vm.$el替换了。

beforeUpdate: 数据更新时调用，发生在虚拟DOM打补丁之前，比如手动移除已添加的事件监听器。

updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy: 实例销毁之前调用，在这一步，实例仍然完全可用。(可以清除定时任务 clearInterval)

destroyed: 实例销毁后调用，该钩子被调用后，对应vue实例的所有指令都被解绑，所有事件监听器被移除，所有的子实例也都被销毁。

6. Vue如何实现组件通信？(需要写一个demo)

父子组件：属性传递和使用v-on通过事件传递
父组件 ==》子组件： props
子组件 ==》父组件：

​ 爷孙组件：provide和inject
​ 用于父组件向子孙组件传递数据
父组件：provide(){
​ return {
​ }
​ }
子组件：inject: []

任意组件：使用 eventBus=new Vue() 来通信，eventBus.$on 和 eventBus.$emit 是主要API
任意组件：使用Vuex通信。

7. data为什么是函数？

避免组件中的数据互相影响。
同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。
之所以是函数是因为，函数在每次使用的时候都会创建并返回一个新的实例，从而实现数据独立。
而如果使用对象，则是把内存的指向赋值给每个父组件，指向一样，那么修改的也就是同一个值。
为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

8. Vue数据响应式原理？

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，
data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，

自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,
生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，
最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

9. nextTick怎么用？原理是什么？

数据的变动不会导致视图立即进行渲染，当修改数据后，如果想尽早得到渲染后的DOM，可以使用this.nextTick(()=>{})

this.$forceUpdate()解决页面改变data数据不重新渲染问题

10. Vuex怎么用？

Vuex是一个专门为Vue应用程序开发的一个状态管理工具：
state：全局数据
getter： 由state的变化派生的数据
mutation：对state直接进行修改
action： action提交的是mutation，而不是直接变更状态，可以包含任意异步操作。
module： 将整个状态管理划分为更细的粒度。

11. VueRouter怎么用？

hash模式：监听hash的change，决定渲染对应的模块。
history模式：通过H5的pushState和replaceState，这两个API可以改变URL的同时而不发送请求，这样就可以监听URL的变化来实现更新页面部分内容的操作。

router-link、this.router.push、this.route.params

12. VueRouter如何做登录跳转？

router.beforeEach((to,from,next)=>{ })

13. Vue如何进行权限管理？

通过router.addRoutes()方法，动态添加路由。

14. Vue路由懒加载

const List = () => import(’@/components/list.vue’)

15. vue2.0响应式的原理。

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，
data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，
自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,
生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，
最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

16. vueRouter传参

命名路由： 在注册路由的时候给路由添加name的属性

params

跳转的时候： this.$router.push(name{:}^{\prime }new{s}^{\prime },params:userId:123)接收参数：this.$route.params.userId

query

查询参数： this.$router.push(path{:}^{\prime }/new{s}^{\prime },query:userId:123)接收参数：this.$route.query.userId

区别

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。

• 用法上的

  刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

  注意接收参数的时候，已经是$route而不是$router了哦！！

• 展示上的

  query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

  params是路由的一部分,必须要有。

  query是拼接在url后面的参数，没有也没关系。

  params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

  正确

  错误

• params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失，

17. v-if不要和v-for连用，

因为for优先级高于if，每次循环再进行if判断是没有意义的，浪费性能，推荐在父容器里添加v-if判断是否渲染

18. Vue代码优化

v-if和v-show区分使用场景
路由懒加载
使用keep-alive缓存组件
引入UI库的时候按需引入

19. v-for的key为什么不推荐用index？

因为使用index的话在插入数据或者删除数据的时候，会导致一些没有变化的项的key发生变化，导致重新渲染而影响性能。

20. 注册一个指令

Vue.directives()

21. Vue常用指令：

v-bind: 给元素绑定属性

22. axios拦截器：

request.interceptors.response.use(res=>{ //请求拦截 可以添加自己的token

})
request.interceptors.response.use(res=>{ //响应拦截 可以验证登录状态

})

23. 路由元信息

在子路由 meta: { requiresAuth: true }
router.beforeEach((to,from,next)=>{
对to.meta.requireAuth进行判断
})

24. vue常用指令：

v-once
v-show
v-if
v-html
v-bind
v-on
v-model

25. Vue常用修饰符

.lazy
.trim
.number (v-model修饰符)

.stop 阻止事件冒泡
.prevent 阻止默认行为
.self 只有元素本身才能触发该事件
.once 事件只能执行一次