小实训第四周面试题

1.keep-alive 组件缓存

使用keep-alive组件时会产生两个生命周期函数 activated deaactivated
想要组件被缓存：

这样就会缓存你输入的值
如=如果想要一个组件缓存一个组件不缓存那么就可以找个东西在路由中标记一个。所以我们就可以在路由中写一个条件：

在主组件里面写入的代码：

2.nextTick

nextTick获取更新之后的DOM元素

为什么要用nextTick

因为vue的渲染过程是异步操作的，
进行异步操作还进行批量渲染

3.mixins

mixins相当于把组件里面的公共的数剧方法或者生命周期函数，vuex提取的是公共的状态，定义的规则是非常严格的，数据必须用响应的方法去改，
mixins相当于分发我们可复用的方法，数据，提取出来
先创建一个.js文件，用来存放组件之间公共的数据与方法

showMixins是公共文件起的名字
在需要使用的组件里先引入这个公共文件，然后用mixins:[‘起的名字’] 这是一个数组格式

如果用的是…showmixins的话，公共文件里面的属性会和组件里的属性有所冲突，下面的属性会覆盖上面的属性

mixins 混入 提供了一种非常灵活的方式，来分发vue组件中的可复用功能，一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被‘混合’ 进入组件本身的选项。

获取所有的data this.$options.data获取所有的方法this.$options.methods

使元素居中的几种方法： 如果有父子元素

在父子盒子嵌套下，让子盒子居中的方式：

第一种方法：margin-auto，使用边框，但是margin使用会影响其他盒子的使用，不太推荐使用；
第二种方法：position，使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半，这是最长用的方法;
第三种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center;
第四种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px);
第五种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0；
补充：在第五种方法上，加上top:0,bottom:0，可以实现垂直和水平都居中

5.如何判断一个对象是否具备某个属性？如何判断对象为空对象？

使用“!==”进行判断
使用in操作符，如果返回ture则存在

hasOwnProperty()
propertyIsEnumerable() 是hasOwnProperty() 的增强版

使用JSON.stringify把对象转为字符串,再判断字符串是否等于"{}"

什么是原型，什么是原型链

原型：在声明了一个函数之后，浏览器就会自动按照一定的规则光剑一个对象，这个对象就是原型对象
函数.prototype查看函数的原型
对象.__prop__查看本函数生成的对象原型
原型链：只要是对象就有原型，原型就是对象，因此只要定义了一个对象，那么我们就可以找到他的原型，如此反复操作就可以构成一个对象的序列，这个结构就是原型链。

浏览器有一个canvas，放大缩小会不会失桢

会失真

全局组件与局部组件的区别：

全局组件的使用是先定义组件，是用componedt（{}）来定义的
局部组件的使用时写在定义好的vue中，是用components:{}

实例之前就是全局组件 实例之后就是局部组件

v-if与v-show的优先级：

v-show的优先级比v-if高，因为v-show无论条件是否成立都会执行，而v-if是只有当条件成立的时候才会执行

vue的双向绑定原理是什么：以及缺点：

答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty()
这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。（大家可以自己手写下，加深自己的理解~）

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

Object.defineProperty 存在如下缺点：

监听数组的方法不能触发Object.defineProperty方法中的set操作(如果要监听的到话，需要重新编写数组的方法)。
必须遍历每个对象的每个属性，如果对象嵌套很深的话，需要使用递归调用。

数据劫持的原理：

订阅专栏
在vue生命周期中的 created阶段,data中声明的数据,都会被getter/setter劫持并赋值到this组件实例上面,这也是在其他组件,如计算属性compute,方法methods,侦听器watch中能够直接使用this.数据而不是data.数据的原因;

原理:
利用Object.defineProperty()方法对数据进行处理:

Object.defineProperty():可以 定义新属性或修改原有的属性;
在操作vue数据之前,先来操作一个对象中的数据来进行体验:

目的是令obj中data中的数据可以直接通过obj.属性名进行读取和修改

vue的响应式原理：

核心机制就是观察者模式，数据时被观察的一方，当数据方式改变的时候，通知所有的观察者，这样观察者就可以做出响应，比如：重新渲染然后更新视图

v-model的实现原理：

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

插槽：

指令为v-slot vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。
使用场景：复用公共组件

this的指向：

在构造函数中this代表了生成的对象
在事件中this代表了正在被触发的事件对象–标签
在forEach中this代表了顶层对象
箭头函数的this指向上下文
普通函数的this指向调用他的函数

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

router与route的区别：

router是路由实例
route是路由信息对象 包括 name patch

vue中data的值发生改变的时候，页面中会不会立即同步更新到，因为vue的渲染是异步的

sass里面有什么：

解决页面闪烁：

v-clock

让css只在当前页面有效：

在style标签里加入scoped属性

jsonp的原理：

动态插入script标签

路由的两种模式，以及他们的区别：

hash与history
区别：
1.url 展示上，hash 模式有“#”，history 模式没有

2.刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由

3.兼容性，hash 可以支持低版本浏览器和 IE。

嵌套路由

在路由中定义children
路由跳转的两种方式：
声明式：router-link的to
编程式：push的方式

MVVM与MVC的区别：

mvc 和 mvvm 其实区别并不大。都是一种设计思想，主要区别如下：
1.mvc 中 Controller演变成 mvvm 中的 viewModel

2.mvvm 通过数据来驱动视图层的显示而不是节点操作。

3.mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步

4.mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

如何获取动态参数：

$router.params.参数名

如何实现自定义指令

directive有两个参数 第一个参数是指令的名字，第二个参数是对象或者数组方式的函数

axios是干什么的?

官方解释：axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中（感觉没啥用）

简单理解：axios负责与后端交互，get、post后端接口信息，相当前后端的窗口

在vue调用接口，怎样避免跨域？

在配置文件里面设置一个api

vue3

vue3简介

vue3是2020年9月18号发布的，代号：‘one piece’

vue3特点

体积小 运行速度快 。
更小 体积更小
更快 下载更快
加强TypeScript支持
加强API设计一致性
提高自身可维护性
开放更多底层功能

从输入URL到页面加载的全过程

概述
　　从输入URL到页面加载的主干流程如下：

1、浏览器构建HTTP Request请求

2、网络传输

3、服务器构建HTTP Response 响应

4、网络传输

5、浏览器渲染页面