vue

vue的keepalive

拥有三个参数：

include：包含
exclude：排除
max：限制可被缓存的最大组件实例数

<KeepAlive include="a,b"> 
    <component :is="view" /> 
</KeepAlive> 
<!-- 正则表达式 (需使用 `v-bind`) --> 
<KeepAlive :include="/a|b/"> 
    <component :is="view" /> 
</KeepAlive> 
<!-- 数组 (需使用 `v-bind`) --> 
<KeepAlive :include="['a', 'b']">
    <component :is="view" /> 
</KeepAlive>


<!-- 传入 `max` prop 来限制可被缓存的最大组件实例数 --> 
<KeepAlive :max="10"> 
    <component :is="activeComponent" /> 
</KeepAlive>

vue路由守卫

全局路由钩子：
		beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from)；
	独享路由钩子：
		beforeEnter(to,from, next)；
	组件内路由钩子：
		beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)
	导航守卫回调参数
		to：目标路由对象；
		from：即将要离开的路由对象；
		next：他是最重要的一个参数，他相当于佛珠的线，把一个一个珠子逐个串起来。以下注意点务必牢记：
		1.但凡涉及到有next参数的钩子，必须调用next() 才能继续往下执行下一个钩子，否则路由跳转等会停止。
		2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。（主要用于登录验证不通过的处理）
		3.当然next可以这样使用，next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。意思是当前的导航被中断，然后进行一个新的导航。可传递的参数与router.push中选项一致。
		4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。
		5.next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
	当点击切换路由时：
		beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter的next的回调

	beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

	不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

	beforeRouteEnter (to, from, next) {
  	  next(vm => {
   	     // 通过 `vm` 访问组件实例
 	     })
	  }

	完整的导航解析流程
		1、导航被触发。
		2、在失活的组件里调用 beforeRouteLeave 守卫。
		3、调用全局的 beforeEach 守卫。
		4、在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
		5、在路由配置里调用 beforeEnter。
		6、解析异步路由组件。
		7、在被激活的组件里调用 beforeRouteEnter。
		8、调用全局的 beforeResolve 守卫(2.5+)。
		9、导航被确认。
		10、调用全局的 afterEach 钩子。
		11、触发 DOM 更新。
		12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

vue自定义指令

指令钩子

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

简化形式

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>


app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

uniapp

小程序怎么解决低版本api问题

查看微信小程序的低版本兼容

移动端适配

1）viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2）rem

rem是一个相对于页面根元素html的font-size的一个单位

uniapp跳转

1. 内部页面

内部页面的跳转，可以通过如下方式：navigateTo、reLaunch、switchTab

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({ url: "/pages/home/home" });

// 关闭所有页面，打开到应用内的某个页面
uni.reLaunch({ url: "/pages/home/home" });

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.switchTab({ url: "/pages/home/home" });

// 2. 外链跳转使用 
# uni.navigateTo({url: "https://www.taobao.com"})

js

301和302

301、302、304 是 HTTP 状态码，表示服务器返回的响应状态，分别表示：

301 Moved Permanently：永久重定向。表示请求的资源已经被永久移动到新的 URL，所有的后续请求应该使用新的 URL 访问。301 状态码告诉搜索引擎，原来的 URL 已经不存在了，应该把权重值传递给新的 URL。 302 Found：临时重定向。表示请求的资源已经被临时移动到新的 URL，所有的后续请求应该使用新的 URL 访问。302 状态码告诉搜索引擎，原来的 URL 仍然存在，权重值不应该传递给新的 URL。 304 Not Modified：未修改。表示请求的资源没有被修改，客户端可以使用本地缓存的版本。304 状态码通常在客户端使用缓存时返回，表示客户端的缓存版本是最新的，无需重新下载资源。

区别：

301 和 302 的主要区别在于，301 表示被请求的资源已经被永久移动到新的 URL，而 302 表示被请求的资源只是暂时被移动到了新的 URL。 301 对搜索引擎更友好，因为搜索引擎会把新的 URL 视为原来的 URL，传递原来 URL 的权重值。而 302 对搜索引擎不友好，因为搜索引擎会认为原来的 URL 仍然存在，权重值不应该传递给新的 URL。 304 表示客户端的缓存版本是最新的，无需重新下载资源，节省了带宽和时间。总之，301 和 302 用于重定向，而 304 用于缓存。

XSS攻击与CSRF攻击

CSRF与 XSS 区别通常来说 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还可以是直接通过命令行发起请求等）。本质上讲，XSS 是代码注入问题，CSRF 是 HTTP 问题。 XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面(Token验证可以避免)。

防御

验证码；强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 csrf，但是用户体验比较差。 Referer check；请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。 token；token 验证的 CSRF 防御机制是公认最合适的方案。(具体可以查看本系列前端鉴权中对token有详细描述)若网站同时存在 XSS 漏洞的时候，这个方法也是空谈。

ws与轮询

客户端拉取 —— 以一定间隔向服务器请求更新；代表：长轮询，短轮询
服务端推送 —— 服务端主动将更新推送到客户端；代表：WebSocket，SSE

git工作流

前端浏览器数据库

indexedDB

中断http请求

XMLHttpRequest.abort()方法将终止该请求

js分两种数据类型：

js的六或七大数据类型：Number, String, Boolean, Undefined , Null , Object，Symbol（ES6）
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。
引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

a标签点击不跳转的几种方法

onclick事件中返回false <a href="http://www.baidu.com" onclick="return false" >不能跳到百度</a>
用href=”javascript:void(0)”这种伪协议；最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。 <a href="javascript:void(0);" onclick="js_method()" >不能跳到百度</a>
利用空代码这种方法跟跟2种类似，区别只是执行了一条空的js代码。 <a href="javascript:;" onclick="js_method()">不能跳到百度</a>
使用 (#) <a href="#" class="demo" onclick="del()" >删除</a>。//总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转的感觉。不推荐使用

面试复习

vue

vue的keepalive

vue路由守卫

vue自定义指令

指令钩子

简化形式

uniapp

小程序怎么解决低版本api问题

移动端适配

uniapp跳转

1. 内部页面

js

301和302

XSS攻击与CSRF攻击

ws与轮询

git工作流

前端浏览器数据库

中断http请求

js分两种数据类型：

a标签点击不跳转的几种方法

promise

面试复习

vue

vue的keepalive

vue路由守卫

vue自定义指令

指令钩子​

简化形式​

uniapp

小程序怎么解决低版本api问题

移动端适配

uniapp跳转

1. 内部页面

js

301和302

XSS攻击与CSRF攻击

ws与轮询

git工作流

前端浏览器数据库

中断http请求

js分两种数据类型：

a标签点击不跳转的几种方法

promise

指令钩子

简化形式