vue基础

$nextTick 的含义

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

vue 组件中的data为什么必须是一个函数

data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

assets 和static 目录的区别

一般在 static 里放一些类库的文件，绝对路径直接引用，assets 里放属于项目的资源文件。相对路径。会被 webpack 打包进代码

vue常用的修饰符含义

.stop：阻止事件冒泡
.prevent: 阻止默认事件
.capture: 触发事件捕获
.self：当事件在该元素本身触发回调
.once: 只执行一次

vue和jQuery的区别

jquery侧重样式操作，动画效果等
Vue的数据与视图分离，以数据驱动视图（只关心数据变化，DOM操作被封装

delete 和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组改变了数组的键值。

Vue-router跳转和location.href有什么区别

ue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次

vue slot的作用

Vue2.6 中把普通插槽和作用域插槽给合并了
插槽就是一个返回VNode的函数而已

v-show 和 v-if指令共同点和不同点

共同点：都是dom渲染
不同点：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。v-if如果条件为假则不渲染dom元素

如何让css只在当前组件中起作用

将当前组件的<style>修改为<style scoped>

<keep-alive>的作用是什么？

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，
一般用应于选项卡

如何获取dom

在html元素上设置ref属性
在js里面this.$refs

vue的指令以及含义

v-for：基于一个数组来渲染一个列表
v-html：更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 绑定事件监听器语法糖@
v-bind：动态绑定一个或者多个attribute，或一个组件prop到表达式
v-pre：不需要表达式跳过这个元素和它的子元素的编译过程
v-cloak：不需要表达式可以隐藏未编译的 Mustache 标签直到实例准备完毕

//css
[v-cloak] {
  display: none;
}
//html
<div v-cloak>
  {{ message }}
</div>

v-once: 不需要表达式只渲染元素和组件一次

为什么使用key

无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素
key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速

v-model是哪两个指令的语法糖

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

分别简述computed和watch的使用场景

computed 是计算属性，有缓存可以获取多个值输出一个
watch 是监听一个影响多个

v-on可以监听多个事件的写法

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur}">//可以正常执行不同方法
<div v-on="{ mousedown:onInput,mouseup:onFocus,mouseenter:onBlur}" >盒子</div>
//可以正常执行不同方法
<div v-on="{click:onInput,click:onFocus,click:onBlur}">盒子</div>
//绑定多个相同事件，只执行最后一个方法
<div @click="{onInput,onFocus,onBlur}">盒子</div> 
//这样绑定无效

params和query的区别

//query传参: 
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })  
//接收参数:
this.$route.query.id

//params传参: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
//接收参数:
this.$route.params.id

params传参，push里面只能是 name:'xxxx'，不能是path:'/xxx'，因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined。
使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求

vue初始化页面闪动问题，看到{{message}}的原因和处理

[v-cloak] {
    display: none;
}

created 和mounted 的区别

created 阶段可以获取到Vue中的data和methods中的数据
mounted 可以获取到dom元素进行操作

vue获取数据在那个周期函数

可以在钩子函数 created、beforeMount、mounted 中进行调用，
ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性

vue-router是什么？有哪些组件

路由模块，主要来实现路由。常用的组件有router-link、router-view

active-class 是哪个组件的属性

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

怎么定义vue-router 的动态路由，怎么获取传过来的值

可以通过query，param两种方式
区别：query通过url传参，刷新页面还在；params刷新页面不在

$route 和$ router 的区别

route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象

vue-router的两种模式

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

vuex是什么？哪种场景使用他

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

vuex有哪几种属性

state getters mutations actions modules