vue常用问题

1 nextTick()

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM;
使用场景：①在Vue生命周期的created()钩子函数进行的DOM操作（在created()里的nextTick()中调用相当于mouted，不同的是nextTick方法会等所有组件加载完成后更新dom）； ②在数据变化后要执行的某个操作

2 ref,$refs

ref 有三种用法：
ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
利用 v-for 和 ref 获取一组数组或者dom节
注意：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs点;

3 模板字符串

用法：用单引号 ` 标识。它可以当作普通普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量或表达式。
用途：
表示多行字符串，所有的空格、缩进和换行都会被保留在输出中；
可嵌入变量，要将变量名写在${}之中；
调用函数;
模板字符串之间还可以进行嵌套;
标签模板函数"第一个参数是字符串模板的常量数组，后面的每一个参数为表达式的计算结果，函数名称可以任意指定

4 vue 插槽（solt）

用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性；
用法示例:

vue slot 使用示例

若父组件未填写内容，会显示slot中的默认内容，否则显示父组件内容；

5异步加载

ajax,
nextTick(vue生命周期)，
setTimeout,
js文件引入放在head中/body中

6 object属性的set方法

一般向对象中添加新的属性，如果更新此属性的值并不会更新视图；可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：Vue.set(objName, 'propName', propValue);(实例写法：this.$set(objName, 'propName', propValue))

7 axios 封装配置

参考页面
①基本设置
const http = axios.create({
    timeout: 1000 * 30,//指定请求超时的毫秒数
    withCredentials: true,//跨域请求时是否需要使用凭证，默认为false
   headers: { //即将被发送的自定义请求头
   'Content-Type': 'application/json; charset=utf-8'
}
   })
②请求拦截设置
http.interceptors.request.use(config => {
    config.headers['token'] = Vue.cookie.get('token') // 请求头带上token(请求之前的操作)
   return config
}, error => {
return Promise.reject(error)
});
拦截器可移除：
varmyInterceptor=axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.request.eject(myInterceptor);
③响应拦截设置
http.interceptors.response.use(response => {
    if (response.data && response.data.code === 401) { // 401, token失效
      clearLoginInfo() //清楚本地缓存
    router.push({ name: 'login' }) //跳转到登录页面
    }
return response
}, error => {
    return Promise.reject(error)
})

④请求地址处理
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}
⑤get请求数据封装
http.adornParams = (params = {}, openDefultParams = true) => {
   var defaults = {
't': new Date().getTime()
   }
return openDefultParams ? merge(defaults, params) : params
}
⑥post请求数据封装
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = {
      't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

8 关于promise

参考1 参考2

promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。
promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。
promise的本质是什么：分离异步数据获取和业务；

promise基本使用

9 Vue双向绑定

①基本原理
通过Object.defineProperty()方法(设置对象的属性及控制属性的一些特有操作<读写权、是否可以枚举等>)来进行数据劫持以及发布者-订阅模式来实现的，Vue实例化的时候会去遍历所有的属性，给这些属性添加get和set方法进行数据劫持；

实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者；
实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图；
实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

②使用方法
v-model <input v-model="theVal"> <=> <input :value="text" @input="e => text = e.target.value" >
sync修饰符 <my-dialog :visible.sync="dialogVisible" /> <=> <my-dialog :visible="dialogVisible" @update:visible="newVisible => dialogVisible = newVisible">

10 MVC、MVP与MVVM

View：它是提供给用户的操作界面，是程序的外壳；
Model：是程序需要操作的数据和信息；
Controller：接收View层传递过来的指令，选取Model层对应的数据，进行相应操作；
Presenter：与mvc中的controller类似，封装了业务的复杂度，将UI和业务逻辑拆分开来，使UI和业务都可以独立的进行变化，完成相应的业务逻辑；
ViewModel:View和Model的关系映射,负责转换Model中的数据对象，使得数据变得更加易于管理和使用
①mvc Model-View-Controller即模型-视图-控制器
模型与视图代码分离，实现过程：首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回的数据，并通过表示层呈现给用户
②mvp Model-View-Presenter即模型-视图-主持器
在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部
③mvvm Model-View-ViewModel即模型-视图-视图模型
核心是数据驱动。

11 keep-alive

Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染；
用法：
<keep-alive>
    <component>
        
    </component>
</keep-alive>
props
    include - 字符串或正则表达，只有匹配的组件会被缓存； exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有，否则不存在
可在路由中定义参数来决定某个页面是否需要被缓存；

keep-alive 路由控制

router 参数控制keep-alive

12 关于 element ui 中select框使用的问题、

遇到过这样的情况:el-select 有默认值v-model 不为空，由于change的时候需要获取多个值，所以 option中的value绑定的是item(即整个object)，那么默认的时候 v-model也是一个object；那么此时 select框所有值会被默认选中；element-ui 给select 提供了 value-key属性，使用时需注意：value-key作为属性直接写在select中，不需要“:”绑定，也不能绑定在option中，且值要和option中绑定的key一致；如图

value-key使用注意