前端面试题---4

1.Vue的生命周期？

总共分为8个阶段

beforeCreate ---- 组件实例被创建之初，组件的属性生效之前

created ---- 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用

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

mounted ---- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

beforeUpdate ---- 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前

update ---- 组件数据更新之后

activited ---- keep-alive专属，组件被激活时调用

deadctivated ---- keep-alive专属，组件被销毁时调用

beforeDestory---- 组件销毁前调用

destoryed ---- 组件销毁后调用

17.Vue双向数据绑定是怎么实现的？

Vue实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

18.Vue父子之间传参

​ 父组件传给子组件：子组件通过props方法接受数据；

​ 子组件传给父组件：$emit 方法传递参数;

19.Vue中如何获取dom?

（1）使用DOM API直接找元素

​ mounted () {

​ let elm = this.$el.querySelector(‘#id’)

​ }

​ （2）refs

​ let avatar = this.$refs[‘avatar’]

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

v-if按照条件是否渲染，v-show是display的block或none；

21.Vue加key值的作用

key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

​ 准确：如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.

​ 快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

22.小程序包上传最大上传可以上传多少兆？

2M

24.let，const和var

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问，有变量提升。

​ 2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问，没有变量提升。
​ 3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

25.vue的常见指令

​ 1.v-once:只会执行一次渲染，当数据发生改变时，不会再变化

​ 2.v-show:v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性

​ 3.v-if、v-else、v-else-if

​ v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。 频繁切换的话使用v-show减少渲染带来的开销。

​ 说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用

​ v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数

​ 4.v-for：v-for可用来遍历数组、对象、字符串。

​ 5.v-text和v-html：v-text是渲染字符串，会覆盖原先的字符串；v-html是渲染为html。

​ 6.v-bind

​ 7.v-bind

​ 8.v-model：数据双向绑定指令，限制在 <input>、<select>、<textarea>、components中使用

26.vue修饰符

• stop：阻止事件的冒泡
• prevent：阻止事件的默认行为
• once：只触发一次
• self：只触发自己的事件行为时，才会执行

27.v-model的双向数据绑定

​ v-model本质上是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件

• text 和 textarea 元素使用 value 属性和 input 事件

• checkbox 和 radio 使用 checked 属性和 change 事件

• select 字段将 value 作为 prop 并将 change 作为事件

  v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性

28.vue的双向数据实现原理

​ Object.defineProperty()

​ 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。

29.hash和history

在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。

Vue底层对它们的实现方式不同:

hash模式是依靠onha图片精灵，代码精简图片用webp格式，传递的时候用base64或者转化2禁止流ange事件(监听location.hash的改变)

history模式是主要是依靠pushState() replaceState()

pushState()：可以创建新的历史记录

replaceState()：只能修改当前历史记录

当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生一个错误

30.优化

图片精灵，代码精简图片用webp格式，传递的时候用base64或者转化2禁止流