vue面试题 基础知识整理

vue2 声明式渲染  选项式

一个 Vue 应用会将其挂载到一个 DOM 元素上

---

`v-if` 和 `v-show` 是 Vue.js 中两种常用的指令，它们在 DOM 操作、编译过程、性能消耗等方面有所不同：

• 手段：
  • `v-if` 通过动态地向 DOM 树内添加或删除 DOM 元素来实现内容的显示与隐藏。
  • `v-show` 通过设置 DOM 元素的 `display` 样式属性和 CSS 的 `visibility` 来控制元素的可见性。
• 编译过程：
  • `v-if` 有一个局部编译和卸载的过程，当条件初次变为真时开始局部编译，之后切换时会进行局部卸载。
  • `v-show` 简单地基于 CSS 实现切换，不需要额外的编译步骤。
• 编译条件：
  • `v-if` 是惰性的，只有当条件第一次变为真时才会执行局部编译。
  • `v-show` 无论条件是否为真都会触发编译，但 DOM 元素会保留，直到下次切换才清除缓存并重新计算。
• 性能消耗：
  • `v-if` 通常会有较高的切换消耗，因为它涉及到对 DOM 树的修改。
  • `v-show` 可能会有较高的初始渲染消耗，但它不会引起频繁的 DOM 操作。
• 使用场景：
  • `v-if` 适合用于条件不太可能经常变化的场景，如某些数据绑定的情况。
  • `v-show` 更适合于需要频繁切换显示和隐藏的场景，因为它的性能开销较低。

---

v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定(简写v-model,看下方的代码你就知道简写在哪了)。

v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-model的绑定是双向的,不仅将data中的数据对标签内进行绑定,还会将标签中的数据反向绑定到data中,标签数据改变后data中的数据也会同步改变。

v-on绑定的是事件(函数)是vue中methods中的数据,触发v-on绑定,就会执行其所绑定的事件。

其实本质上双向绑定v-model是v-bind以及v-on配合使用的语法糖。<input type="text" v-model="vmodel">的作用就相当于<input type="text" :value="vbind" @input="vbind=$event.target.value">

  select input textarea用v-model

---

v-model修饰符

.lazy:一种非同步修改,默认情况下,我们将文本框双向绑定后,我们的任何改变都会被立即同步进入数据,但这种同步在大多数时候是没有必要的,我们可以等待用户全部输入结束后在进行同步,可以节省资源。

.number:可以看成强制类型转换,将用户输入的内容强制转换成为数字。

.trim:去除空格(去除文本开头和结尾的所有空格,文本中间如果出现空格则不会去除)

---

注册组件的方式

全局注册 Vue.component

局部注册 引入文件，之后写到component内

props接收传入的数据，单向下行绑定，可以访问 不能修改

$emit

.sync 双向绑定   :title.sync=“xxx” this.$emit('update:title', xxx)

.sync实际上是监听 属性的同时 监听update的事件 回传数据修改属性的值<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>

---

.sync v-model区别

1. v-model 默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。

2. 一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

3 v-model比较有局限性，绑定的属性名只能叫value，而.sync可以任意取名，如果你希望只传value值的话，可以使用v-model，反之，使用.sync

---

生命周期钩子

created：已创建，在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted：已挂载，在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些操作。

updated 在实例更新完成后被调用，此时实例的数据已经重新渲染到DOM上。可以在这个阶段对DOM进行操作，但要避免无限循环的更新。

beforeDestroyed ：即将执行销毁过程，一般在此阶段停止定时器、取消eventbus等操作

---

插值 {{}} 加v-once后只能执行一次插值，插值出内容不会更新

---

2.6开始新增动态参数 :[参数变量]=xxx  []内表达式不能有空格和引号

---

computed 计算属性 计算属性基于响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。不支持异步

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

---

watch监听支持异步操作,`watch`选项中的函数有两个参数，一个是旧的值，另一个是新的值。

`computed`适合于需要计算多个数据属性的复杂属性值，而`watch`适合于监听单一或多个数据属性，并在数据变化时执行操作，包括异步操作。

---

class动态绑定{xxx:xxx} [xxx,xxx] 三目运算符 [{xxx:xxx},xxx]

Style内联样式 :style=“{}” 或绑定对象 :style=“xxx”   :style=“[xxx,xxx]”

---

Vue会复用已有元素，不需复用添加key

---

同一节点，v-for 的优先级比 v-if 更高

---

阻止事件的方式

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

.passive 不阻止默认事件  处理事件函数中不会调用preventDefault函数，就会减少了额外的监听，从而提高了性能。所以不能和.prevent修饰符一同使用，否则浏览器会报错。

---

字符串模板：指的是在组件选项里用 template:"" 指定的模板，换句话说，写在 js 中的 template:"" 中的就是字符串模板。

var tmp = new Vue({  

template:""  

});  

Dom 模板就是写在 html 文件中，一打开就会被浏览器进行解析渲染的，所以要遵循 html 结构和标签的命名，否则浏览器不解析也就不能获取内容了

---

混入mixins

数据对象冲突时以组件数据优先

同名钩子函数合并为一个函数，混入对象的钩子 在组件自身钩子之前调用；

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

---

注册全局自定义指令Vue.directive 如果想注册局部指令，组件中也接受一个 directives 的选项：directives: {}

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

---

插件通常用来为 Vue 添加全局功能。通过全局方法 Vue.use() 使用插件。Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

---

过滤器filters {{ message | filterA | filterB }}

当全局过滤器和局部过滤器重名时，会采用局部过滤器。过滤器可以串联，可以接收参数

---

$store：对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 里面有方法和共享数据，但是这个方法只能对里面的共享数据操作，传参也只是配合方法对这个共享数据操作。

---

Vue组件更新是异步的。当更新了状态(数据后),需要对新DOM做一些操作,但是这时我们其实获取不到更新后的DOM，因为还没有重新渲染,这个时候我们需要使用nextTick方法。

---

Promise是一个构造函数，异步编程的一种解决方法

async关键字实际是通过Promise实现，如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误，那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数（比如内部含有promise），该函数应用async修饰。

---

Babel es6转es5

---

dependencies： 表示生产环境下的依赖管理；

devDependencies： 表示开发环境下的依赖管理；

---

axios  基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1. 支持Promise API：Axios基于Promise实现，支持链式调用，使得代码更加简洁易读。1
2. 跨浏览器支持：Axios可以在浏览器和Node.js环境下运行，提供了一致的API，方便在不同环境中使用。
3. 自动转换数据：Axios可以根据响应的Content-Type自动转换响应数据为JSON对象，减少了手动处理的步骤。
4. 拦截器：Axios提供了拦截器，可以在请求和响应被发送或接收之前进行拦截和处理，方便在请求过程中进行统一的处理逻辑，例如添加请求头、错误处理等。
5. 基于原生XHR开发：Axios基于原生的XHR开发，XHR架构本身不清晰，而Axios基于原生的XHR开发，架构更加清晰。2
6. 异步模型友好：Axios因为是基于Promise实现的，异步模型友好，可以使用Async/await。

CORS头部通过设置 Access-Control-Allow-Origin* 开头的 HTTP 头部信息来允许跨域请求

http 默认端口号是80，https 默认端口号是443

---

箭头函数内无this指向

---

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

const store = new Vuex.Store({}) this.$store.commit(‘调用方法’)

Vuex 使用单一状态树，通过在根实例( const app = new Vue({}) )中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

---

cookie和session的区别

cookie数据存放在浏览器上，session存放在服务器上

cookie一般在客户端有大小限制，一般为4K，session没有限制，但是考虑到服务器性能，一般不能存放太多数据

cookie可以设置过期时间，否则一直有效，session在超过一定的时间（通常30min）后就会失效，当关闭浏览器时，会自动调用session.invalidate()方法，清除掉session中的信息

cookie安全性较低，一般不用于存放敏感信息（如用户密码），session存储在服务器上，安全性较高

cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或二进制数据，session中能够存储任何类型的数据，包括但不限于string,integer,list,map等

cookie的用处：

• 会话管理：用户账号密码
• 个性化：用户偏好设置
• 追踪：记录和分析用户行为

cookie的特点：

• 大小限制在4k以内
• 不加密则不安全
• 会消耗网络的带宽
• 使用JS操作cookie比较复杂

session是一种服务端解决方案，是服务器为了保存用户状态而创建的一个特殊对象，客户端请求服务端，服务端会为请求开辟一块空间，session弥补了HTTP无状态特性

session的创建过程：

当浏览器第一次访问服务器时，服务器会创建一个session对象（该对象有唯一的ID，即SessionID），服务器会将SessionID以cookie的方式返回浏览器，当浏览器再次访问服务器时，会将SessionID发送过来，服务器依据SessionID就可以找到对应的session对象

session的缺点：

A服务器存储了session，做了负载均衡后，加入一段时间内A的访问量激增，会转发到B进行访问，但是B服务器中没有存储A的session，会导致session的失效

---

cookie，localStorage，sessionStorage的区别

cookie可设置失效时间，默认为关闭浏览器后失效，sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后就会被清除，localStorage除非手动清除，否则永久有效

cookie存储数据大小在4K以内，sessionStorage和localStorage可以保存5M的信息

在进行请求时，cookie每次都会携带在请求头中，浪费带宽，如果cookie保存过多数据会产生性能问题，sessionStorage和localStorage仅在浏览器中保存，不参与和服务器的通信

从安全性来说，cookie安全性较低，所以一般不用来保存敏感信息，其他两个似乎也不安全。

cookie区分域，不区分端口，同ip下的不同端口cookie是共享的，sessionStorage和localStorage不可共享

应用场景：

cookie可以用于识别用户登录

sessionStorage可用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数

localStorage可以用来传递在页面传递参数

---