VUE面试题

学习vue

vue

以数据驱动视图的渐进式 MVVM 框架
渐进式：循序渐进的使用vue，可选择性强，可以只要是vue其中的一个小功能，
不必完全使用vue，不强制的意思
MVVM：m model-模型数据，v-view 视图；数据是双向绑定的，
使用数据改变导致视图改变
MVC：m：model-V：view-c：控制器 数据改变控制页面也改变

vue底层原理和vue描述

原理：Object.defineProperty
vue：
优点：虚拟dom，数据驱动，双向响应，模块化开发，浏览器统一兼容。
缺点：由于是js生成的虚拟dom，不利于seo爬虫爬取，首屏加载相对于静态页面

data为什么函数

因为组件的data会提升，而根实例上的data是对象，会导致一个合并，把data变成函数，
以调用的方式来使用，避免了覆盖和冲突。

什么是虚拟dom

使用js算法动态生成的dom叫虚拟dom，虚拟dom不会回流和重绘。性能更好，
不同框架不一定要虚拟dom，关键是看是否要频繁的引发大面积的dim操作

diff算法和key关系

同层对比，只有发现不一致的节点，就用新的dom替换旧的dom。
正是因为diff算出来的虚拟没有跟踪标识，
当一个循环出来的虚拟dom列表中任意一个元素被修改，diff算法没法找到它，
只能重新渲染一份新的dom，加了key之后，每个dom有了自己的唯一标识，
这样修改的时候可以精准的找到并修改，从而省了性能，
所以，key的值必须是唯一，而且不可以用随机数，用时间，不建议用下标。

生命周期

四个阶段八个函数，其中最大的问题是自动发起ajax请求问题，
如果是在浏览器中运行，则应该在mounted发起，如果是服务器端渲染，
应该在created发起
beforeCreate:骨架屏占位,日志上传
created:发起ajax请求.可以，但是不推荐。因为ajax异步，生命周期同步
beforeMount:可以对一些数据进行格式化
mounted:发起ajax【推荐】前端项目多大部分都是运行在浏览器，极少是服务器端渲染
beforeUpdate:可以二次对更新的数据修改
updated:只能是观察到更新的数据
beforeDestroy:清除常驻内容的垃圾.对用户的离开行为进行提示
destroyed

内置组件

slot 插槽

自定义组件的高级形式，多用于模板复用，动态渲染传入的内容或组件。
使用场景：插件的封装，网站结构布局等

匿名插槽

插槽组件中传入的散内容被slot标签接收

具名插槽

使用template标签，用v-slot指令绑定名字，
插槽组件中slot组件使用name属性给插槽取名字。

插槽传参

slot组件传递参数，上游组件的template接收
v-slot的缩写: #

keep-alive 缓存组件

语法：

<keep-alive>
<MyDom/> 
</keep-alive> 

凡是被它包裹的组件，都会被缓存，
属性：includes 只缓存被指定的组件 excludes不缓存指定的组件

生命周期：

activated 缓存的组件被激活了
deactivated 缓存的组件被停用了

component 动态加载组件

必须使用is属性动态加载组件的名称，解放了大量书写v-if或v-show的问题

transition 动画组件

使用name属性控制动画类名的前缀，从而可以产生不同的动画效果。
一般用于嵌套在路由视图组件或动态组件

template 模板

第一种作为vue模板标签使用，
第二个作为插槽的模板

nextTick

不常用，但很重要。
保证所有dom全部更新完毕才会触发，用于获取dom更新后的获取dom节点数据

在watch监听中，获取color值。这个值呢在被修改时不能同步到视图
就要用nextTick获取更新后的dom节点

ref

加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素。ref加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，
可以使用组件的所有方法。
比如用在表单，获取form表单实例。 之后用ref方法清空所有表单 。
也可以修改dom元素的样式
可以减少获取dom节点的消耗了

指令

v-html：专门渲染字符串dom片段的，底层做了防止注入攻击，将js内容转义 .xss
v-text：只能渲染文本内容
v-for：字符串，数字，对象，数组 ;
遍历数组和对象区别：对象有三个参数，值，键，小标。。 数组只有值和键
v-model：数据双向绑定指令，专门用在表单元素上。
v-on：缩写@，两种用法绑定原生事件，自定义事件
v-bind：
可以绑定原生的属性，
也可以绑定自定义的属性。
绑定给自定义组件上是传参方式。
动态绑定属性
v-bind:[name]='data
动态绑定属性值
v-bind:checked = 'state'
绑定class
v-bind:class = ‘{active : true/false }’
绑定style
v-bind:style = ‘{color : red}’
v-once：让元素的值永远保持第一次渲染，还是优化性能的一个手段，
比如给固定写死的静态dom加上之后，这里的dom将不会再更新了，不参与diff计算

v-pre：不会使用vue解析里面的内容，当字符串渲染
v-clock：防止闪烁，当一个值在页面使用时，如果该值是ajax的返回值，
那么值初始化的时候为空，则会导致页面闪烁 css的display：none
v-show：控制元素的显示与隐藏，css的display：none
v-if：控制元素的加载与销毁，如果频繁切换应该优先使用v-show
slot：插槽的指令，属性 #

watch监听和计算属性

都可以监听数据的变化
计算属性监听一个值，返回一个新值，如果这个值不用的话则监听不会触发；
没有数据类型的限制；
是立即执行，不能执行异步，只要写了受观察的数据，立即对数据监听；
默认只读的，想修改必须是对象写法，在set函数中修改被监听的数据
watch专门监听一个值的改变。如果监听数组或对象；
需要开启深度监听deep为true；
可以执行异步操作；
只能监听一个数据

修饰符

事件的：

once 事件只执行一次
native 绑定原生事件，当给子组件绑的时候
.stop 阻止冒泡
.prevent 阻止默认事件

属性的：

v-bind.sync 伪双向数据绑定
v-bind.prop 把属性转成不可见的属性
指令
v-model.lazy 当用户失去焦点后触发
v-model.number 尝试转成数字
v-model.trim 去掉首尾空字符串

按键

13 和 enter 监听回车
鼠标
right 右击
left 左击

订阅发布模式

订阅者：派发事物接收的对象，比如dom元素
发布者：事物委托对象，比如proxy

骨架屏优化
当页面基于数据渲染，数据尚未获取的时，使用骨架屏占位

动态绑定指令
v-bind:[name] -name是变量，赋予任意值。

组件通信

父传子：
父v-bind传递，子组件props接收
子传父：
父组件v-on函数，子组件$emit调用
父子双向：
v-model 自动注入value值和input函数
.sync 伪数据双向绑定
provider,indect
兄弟之间：
让父组件当中间人
$parent 获取到父组件实例
$children 获取到所有的子组件
跨级
$root 获取根实例对象
$on 和 $event 使用同一个父级，子用on发送，父用event监听
vue1.0 bus 中央事件池 。new一个vue让它作为中间人，基于on和event来处理

vue项目优化

按需加载组件的的懒加载，只有当用户访问该组件时才加载。
打包的时候关闭源码映射，可以提高打包速度
模块化代码复用
使用动态加载组件component
频繁切换的元素优先使用v-show
使用循环渲染的时候避免使用v-if
给大量子元素绑定事件的时候优先使用事件委托
使用精灵图优化加载小图标
使用骨架屏优化首屏加载慢的问题
防抖，input框，搜索。节流下拉加载，滚动

自定义系列(指令，过滤器，)插件

自定义指令directive

扩展vue没有的指令功能，举例：当页面打开后让input获取焦点
语法：

directives:{
focus:{
insert(el,binding,olnode){
// el是绑定的元素对象，binding是options，里面有value。olnode旧的虚拟dom
}
}
}

自定义过滤器filter

在不修改原数据情况下，对数据进行处理，返回新的数据。

语法：
声明
	filters:{
		add(value){
			return value + 666
		}
	}
使用
{{ n | add }}

对象.install 方法

vue插件是一个综合性的功能封装
`
声明plugin.js
export default {
	install(value,option){
			// vue.filters
		}
}
使用
Vue.use(plugin,{ lg:true })
`

v-model原型

Object.defineProperty

mixins 混入

减少当前组件的代码体积的，把一些无关紧要的代码提取到外面，可以给其他组件进行复用
混入是js代码复用
但是，它不要和全局使用，否则会出现冲突
如果混入里的值或函数和组件的重复了，一定要用组件的
如果混入里的声明周期和组件的复用了，先混入后组件，会合并掉

spa单页面应用

项目中只有一个html文件。

el 和 $mount 区别

el是配置，mount是方法
el比mount挂载的速度快

Vue.set 方法

因为Object.defineProperty方法的缺陷，导致动态添加或删除的属性不能被监听响应。
所以才用这个方法

路由底层原理

history
window.history
和
hash
window.location.hash

路由传参方式

query 用 ? 类似get请求方式传参
params 动态路由的动态字段
hash 非hash模式下使用#传参，会被 hash 接收
meta 元数据、元信息，路由配置时写死的
rooter-view 属性传参，凡是被它渲染出来的路由组件都会接收props属性

路由拦截器

全局守卫

beforeEach 进入前的守卫【做全局的路由权鉴】
afterEach 进入后的守卫没有next，上报日志
路由独享
beforeEnter 确认进入前

组件守卫

beforeRouteUpdate 更新 获取动态组件的字段
beforeRouteLeave 离开 确认用户离开行为，用于表单页面

路由模式

history,hash是地址栏有#的

route 和 router区别
router是new的vueRouter的示例对象，拥有路由的全部功能
route仅表示当前路由的信息
router包含route

跳转方式

push： 向历史记录中添加一条记录
go： 在历史记录中前进后退，值是数字
back ：后退
forward： 前进
replace： 用当前地址替换历史记录中最后一条

路由配置方式

动态路由 使用 /:name
嵌套路由 使用children
别名 alias可以设置多个，用数组包裹
重定向 name属性

路由组成部分

导航，视图，配置

路由组件懒加载

一个函数返回import函数加载组件
()=> import('./component)

监听滚动事件

scrollBehavior 方法可以设置滚动条初始位置，当路由跳转时候它会执行

声明式导航和编程式导航

声明式：<router-link>
编程式：this.$router.push

vuex工作原理

1.store里的state在组件中使用
2.组件使用dispatch调用action派发业务
3.action使用commit调用mutation
4.mutation调用state进行修改
5.当state改变后，store通知组件修改

vuex组成部分

state，
getters，
mutations，
actions，
modules

严格与非严格模式区别

严格模式：mutations只能运行同步代码，且只能在这里修改state
非严格模式：state可以在任何地方修改，mutations可以执行异步

辅助函数

mapState
mapGetters
mapMutations
mapActions

mutation 和 action区别

mutation是唯一修改state的，且只能运行同步代码。action专门用于处理异步操作，
只能通过调用mutation修改state

state 和 getters关系

state相当于组件里的data，getters相当于组件里的computed
getters是基于state计算的

vuex模块化

modules 用于大型项目开发，主要赋值独立模块的独享状态管理。

默认state和getters是归属于当前模块作用域的，
但是mutation和action函数会自动提升到根store对象下

所以需要开启命名空间，每个模块使用namespaced 属性开启

axios 封装

1.必须使用axios.create()：创建一个单独的实例。
2.BaseUrl： 设置公共的服务器地址
3.timeOut： 设置访问超时时间，默认5000sm
4.前置请求拦截器： axios.interceptors.request.use
5.后置请求拉拦截器： axios.interceptors.response.use

请求拦截:: axios.interceptors.resquest.use(config => {
为请求头对象添加token验证的 字段
这样就可以对有Authorization接口权限的请求 都可
config.headers.Suthorization = window.sessionStorage.getItem(‘token’)
return config
})

ui库的使用

Pc: element-ui 最常用组件，api，指令
el-from el-table
v-loading
移动：vant

node js是什么
是一个 JavaScript 运行时环境，有了它我们才可以使用npm的命令什么的来开启我们的服务

vue中data的属性可以和methods中的方法同名吗？

答：“不可以。methods 里面的方法会覆盖掉data里面的

vue中方法用箭头函数会怎样？

答：不能使用箭头函数，会报错。
箭头函数没有this。所以它的this指向不是vue实例，使用箭头函数打印this是undefined。
而普通函数的this指向运行时的作用域，可以修改

vue中 e.Target和 e.currentTarget 区别

e.currentTarget获取对象时指向事件所绑定的元素。e.Target始终指向事件所发生的的元素。
currentTarget 点击a或a中的任何元素，获取到的对象都为绑定事件的a
target，点击a就传a元素，点击到a中的某个子级元素就传a之中的某个元素

vue为什么要求组件模板只有一个根元素

有一个根元素就是 数据结构需要一个根作为遍历的起始点
如果有很多个跟，查找和遍历的效率会很低
而且diff算法不支撑多入口结构，为了保证计算机的性能也就只需要仅有一个节点入口

vue 哪些可以监听数组的变化，为什么

vue内部源码对array的中间代理
对push shift pop等做了代理。它对中转的数据做了监听

保存草稿功能

在input框中，监听，点击时判断它为开启true状态。
点击保存时就保存内容并让它的状态为false，取消就清空，状态为false。
当跳转路由时就可以判断它的状态。提示是否保存。保存后false状态跳转