8 30知识总结

最新推荐文章于 2023-12-28 23:34:35 发布

m0_70021245

最新推荐文章于 2023-12-28 23:34:35 发布

阅读量184

点赞数

文章标签： servlet 服务器 java

本文链接：https://blog.csdn.net/m0_70021245/article/details/126610664

版权

v-指令

- v-text 元素的InnerText属性,必须是双标签
- v-html 元素的innerHTML
- v-if 判断是否插入这个元素
- v-else-if
- v-else
- v-show 隐藏元素如果确定要隐藏, 会给元素的style加上display:none

vue修饰符

- @click.prevent 阻止默认事件
- @click.stop 阻止冒泡
- @click.once 只触发一次
- @click.capture 在捕获阶段触发，而不是在冒泡阶段触发
- @click.self 直接点击自己的时候触发（也可以用来阻止冒泡）
- @click.passive 默认行为立即执行（演示：@scroll，@wheel）

cookie的原理

1. 用户在客户端输入username和password，提交到服务器端
2. 服务器端接收username和password，查询数据库，判断是否存在这条记录。
3. 如果存在这条记录，则登录成功，服务器返回客户端一个cookie，客户端存在本地。
4. 客户端以后每次请求这个网址，都会携带cookie，作为自己的身份标识

webStorage

1. 存储内容一半支持5MB左右，不同浏览器可能不一样

2. 浏览器通过window.sessionStorage和window.localStorage来实现本地存储机制

3. 相关API

添加内容

```js
xxxxxStorage.setItem("key","value")
```

获取内容

```js
xxxxStorage.getItem("key")
```

删除

```js
xxxxStorage.removeItem("key")
```

清空

```js
xxxxStorage.clear()
```

4. 备注

- sessionStorage存储的内容会随着浏览器窗口关闭而消失
- localStorage存储的内容，需要手动清除才会小时
- xxxStorage.getItem("key")如果key对应的value获取不到，那么getItem的返回值是null
- JSON.parse(null)的结果依然是null

# Vue2.0基础

## 计算属性和侦听属性

### 计算属性 computed

### 侦听属性 watch

深度监视

- vue中的watch默认不监测对象内部值的改变（一层）
- 配置deep:true，可以监测对象内部值的改变（多层）

> 备注：
>
> - vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
> - 使用watch时根据数据的具体解构，决定是否采用深度监视

### computed和watch区别

1. computed能完成的，watch一定能完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

> 注意：
>
> - 所有被vue管理的函数（methods，computed,watch函数），最好写成普通函数，这样this的指向才是vm或组件实例对象
> - 所有不被Vue所管理的函数（定时器回调函数、ajax回调函数、Promise回调函数），写成箭头函数，这样this的指向才是vm或组件实例对象

练习

样式绑定

style绑定

```css
:style="{color:activeColor,fontSize:fontSize+'px'}"
```

> 其中 activeColor/fontSize 是 data 属性

class绑定

1. :class="xxx"
2. 表达式是字符串：“classA”
3. 表达式是对象：{classA:isA,classB:isB}
4. 表达式是数组：['classA','classB']

计算属性的特点

定义的时候,要定义为"方法"
在使用计算属性的时候,当普通的属性使用即可

计算属性的好处

实现了代码的复用
只要计算属性中以来的数据源变化了,则计算属性会自动重新求值

用computed筛选列表的逻辑
第一步，搜索，就是将所有数据根据条件进行筛选，筛选出符合条件的，所有，需要经行filter 而筛选的条件就是根据搜索的关键字来进行寻找，找出来后，对其进行返回，然后是排序，排序有三个，一种是从大到小，一种是从小到大，还有一种是原数据排序，这时就需要上面的点击事件绑定一个数，根据条件判断点击的是哪个按钮，进行相应的排序，利用 sort排序，a-b为从小到大，b-a为从大到小，最后返回值即可。

.用watch筛选列表逻辑
利用监听来写筛选列表，需要先找到监听的对象，搜索的监听对象则需要他双向绑定的关键字，然后设置立即加载，handler获取到关键字发生变化是的val，然后，还是根据条件对数据进行筛选，返回筛选出来的值，而后面的排序，则需要监听数据发生改变，所以监听那个不同顺序的点击事件的变量，这里就是stype，获取到它的val ，首先判断他是否为0，为0 则渲染最初的顺序，不为0 时，再判断val为1 还是 2 ，为1 则从小到大排序，为2 则从大到小排序。

谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

一般结合路由和动态组件一起使用，用于缓存组件；
提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

2、组件中 data 为什么是一个函数？

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

// data
data() {
return {
message: "子组件",
childName:this.name
}
}

// new Vue
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

3、v-model 的原理？

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例：

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：
<ModelChild v-model="message"></ModelChild>

子组件：
<div>{{value}}</div>

props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小红')
},
},

4、Vue 组件间通信有哪几种方式？

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props / $emit 适用父子组件通信

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

5、你使用过 Vuex 吗？

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

6、使用过 Vue SSR 吗？说说 SSR？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下：

（1）服务端渲染的优点：

更好的 SEO：因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

更多的开发条件限制：例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；
更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

7、vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示：

switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}

其中，3 种路由模式的说明如下：

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

8、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search'：

https://www.word.com#search

hash 路由模式的实现主要是基于下面几个特性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

history 路由模式的实现主要基于存在下面几个特性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变化；
我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。