面试题库分享4

1. 什么是同源策略？什么是非同源策略？非同源策略产生什么问题？如何解决跨域？jsonp什么原理？如何获取jsonp返回值？jsonp的优缺点？除了jsonp还有那些跨域手段？答：协议、域名、端口一致为同源策略，同源策略是浏览器为了安全访问网页内容而出现的一种措施。 【https协议的默认端口号443，http端口80】非同源策略就是当使用ajax请求时协议、域名、端口号中有一项不相同时出现的情况。非同源策略会产生跨域请求。前端可以使用jsonp解决，也可以借助nodejs作为代理请求。jsonp就是借助了script标签的src属性可以跨源获取脚本来实现跨域请求。获取数据需要前端与后端协商好回调函数，后端把数据放在回调函数中，前端预先声明好回调函数，当数据返回时前端的函数自动执行就可以获取数据了，如果后端不支持回调函数，则前端一般需要在window对象上查看找数据。【示例：http://xxx.com?list=1&callback=cb】jsonp的优点是兼容性好，几乎所有支持js的浏览器都可以使用，缺点是只能get方式请求，而且容易被注入攻击。除了jsonp外还可以使用nodejs、nginx，webpack、vueCli来代理请求接口
  
2. vue是什么？什么是单页面应用？什么是spa应用？vue的优缺点是什么？什么是MvvM模式？和MVC模式相比有什么不同？什么是渐进式框架？Vue和jq的对比有何不同？答：vue是一个以数据驱动视图的轻量级渐进式MVVM框架： 数据驱动视图:常规的js都是操作dom来开发程序，代表者jquery $('#box').on('click')，vue不用直接操作dom，用数据来控制元素的变化。单页面应用也叫spa应用，指的是整个项目中只有一个html页面，所有的内容都是在这个页面中呈现的。vue优缺点：优点是模块化开发，组件复用，开发效率快。缺点：首屏加载速度没有静态页面快，因为dom都是js生成的，导致seo爬虫不友好，页面被爬取的机率特别小。可以ssr服务端渲染来优化seo爬虫。MVVM:m是数据模型model，v是view视图。model是js，v是页面。模型到视图，视图到模型，数据的双向绑定的。数据的双向响应模式。MVC是严格的一种控制模式，在视图和模型之间多了一个控制层，两端MV修改后必须经过C层后才能更新。MVC其实最早是后端语言中的一种程序设计策略，前端里目前只有angular是MVC模式的框架，一般银行使用java+angular开发项目。
  

渐进式框架：我们可以只用vue中一小部分去开发，而不是说用了vue就必须全部使用vue的语法。可以让我们慢慢的一点点的接受vue开发项目。jq是一个用js封装的操作dom的库，而vue是一个以数据驱动视图的轻量级渐进式MVVM框架。

3. vue底层原理？vue响应式原理？vue的数据双向绑定原理？答：vue2的底层原理是基于 Object.defineProperty封装的一种发布订阅模式，利用它的get和set方法对对象的属性进行监听。vue3是基于es6的proxy封装的发布订阅模式。Object.defineProperty只能监听对象的属性并且不能监听动态添加的属性。es6的proxy可以监听一切。

4.vue常用指令？html和text的区别？show和if的区别？watch和computed的区别？答：v-html渲染字符串的dom片段，底层是js的innerHTML封装的。v-text只能渲染出字符串内容，底层是js的innerText封装的。v-show是控制css的display来显示隐藏元素，v-if是让元素生成或删除，v-if如果用在自定义组件上，则会重复触发组件的生命周期，开销大也会引起页面的回流。频繁切换应该使用v-show。watch是监听器，它只能每次监听一个数据。computed是计算属性，它可以监听多个值。监听器可以执行异步，而计算属性不可以执行异步。因为计算属性它需要立即return返回值，不能等异步执行完，所以不能执行异步。监听器没有缓存，而计算属性有缓存，当本次数据更新的值与上一次一致的时候则不会触发。监听器如果监听引用数据类型【对象或数组】需要开启深度监听，而计算属性可以监听任意类型的数据。

5. 什么是生命周期？生命周期函数有哪些？每个函数的功能是什么？从诞生到消亡的一个过程叫生命周期，在程序中表示从程序被初始化到销毁的过程。页面打开后在哪个函数中发起自动请求：mounted生命周期中请求，created中也可以。生命周期是同步的，请求是异步的，所以最好在挂载完以后执行。销毁生命周期用于释放常驻内存的变量：比如定时器，window对象下的全局变量不受当前组件控制。

6.内置组件有哪些？功能分别是什么？keep-alive 缓存组件；components组件 动态加载组件；slot插槽；template 模板；transition动画；

7.vue组件通信方式有哪些？父传子子传父兄弟=>用父组件作为中间代理来向所有的子组件提供数据交互v-model可以实现：它会向 子组件注入一个value值和一个input方法.sync <Son :data.sync='obj'> 子组件用特定语法实现：$emit('update:data', {xxx}) $children 获取直接所有子组件的实例$parent 获取直接的父组件实例 $root 获取根组件实例

8. vuex的工作（执行）流程是什么？答：state值在组件中使用，组件通过dispatch调用actions方法，actions里通过commit调用mutation方法，mutation修改state，state被改变后会通过数据双向绑定发布到所有使用state的组件上使组件更新。

9.vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？答：vue的路由底层是基于window对象的onhashchange封装的hash模式以及使用window.history封装的history模式。传参方式：prams和query方式跳转方式2种：router-link 标签跳转又叫声明式导航，$router.push js跳转又叫编程式导航。push向历史记录添加一个，replace是用当前记录替换最后一次记录，go，back路由拦截器和路由生命周期都是指的路由守卫。

10. 什么是模块化开发？答：把公共部分抽离成一个独立的文件/组件，这种模式就叫模块化开发。说白了，就是代码的复用。

11.xss攻击是什么？如何避免？

12.seo爬虫是什么？ 浏览器爬取网站内容的一种算法，也叫网络爬虫。 h1-h6 标题标签 seo只愿意进入网页爬取写死的dom，静态网页，但是vue的内容都是js生成的，所以seo不会执行js文件，所以它认为你的页面是空的，就走了再也不来。