Vue题库

1.Vue是什么？

  Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue的核心是什么？

我觉得是“组件化“和”数据驱动“。
组件化就是可以将页面和页面中可复用的元素都看做成组件，写页面的过程，就是写组件，然后页面是由这些组件“拼接“起来的组件树。
数据驱动就是让我们只关注数据层，只要数据变化，页面（即视图层）会自动更新，至于如何操作dom，完全交由vue去完成，咱们只关注数据，数据变了，页面自动同步变化了，很方便。

3.vue常用基本指令有哪些？

v-if：根据表达式的值的真假条件渲染元素。可以配合 v-else 和 v-else-if 使用。
v-show：根据表达式之真假值，切换元素的 display CSS 属性。
v-for：循环指令，基于一个数组或者对象渲染一个列表，Vue 2.0以上必须需配合 key值 使用。
v-bind：动态地绑定一个或多个属性，或一个组件 prop 到表达式。简写为 ：
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。简写为 @
v-model：实现表单输入和应用状态之间的双向绑定
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

4.v-if和v-show的区别

v-if和v-show都可以显示和隐藏一个元素，但有本质区别
v-if的值为false就不会加载对应元素，为true才动态加载对应元素。如果动态改变的话，是直接销毁改元素。
v-show是无论为true和为false都会加载对应html代码，但为false时用display:none隐藏不在页面显示。
如果是频繁的切换元素建议使用v-show，可以优化性能。

5.vue自定义指令如何实现的和适用场景？

自定义创建的两种方式：
全局自定义指令：Vue.directive(‘指令名’,{ inserted(el) { } })
局部自定义指令：directives:{ }

6.vue过滤器做什么的以及实用场景？

全局过滤器：

Vue.filter(‘过滤器名’,function(参数1,参数2,…) {
    // ………..
      return 要返回的数据格式
})

局部过滤器：在组件内部添加filters属性来定义过滤器

fitlers:{
   过滤器名(参数1,参数2,,…参数n) {
       //………..
      return 要返回的数据格式
    }
}

7.vue生命周期钩子函数有哪些，分别什么时候触发？

初创期：

1. beforeCreate： 实例创建之前调用，数据没有挂载，不能访问数据。
2. created：组件实例创建完成，在该时机可以访问实例中的data的属性和methods中的方法，但不能操作dom。
3. beforeMount：编译模板已经完成（模板和数据都已经准备就绪了） 虚拟dom已经存在 还没有进行进行渲染
4. mounted 真实的dom元素已经存在, 可以获取节、修改数据，而且修改数据会触发update函数（页面已经渲染，替换了之前的dom元素）

更新期：

1. beforeUpdate：组件将要更新，数据更新之前触发（数据更新：就是dom上的数据发生变化）
2. updated：组件更新完成，数据修改后执行 修改数据要可能造成死循环（在这里尽量不要修改数据）

销毁期：
3. beforeDestroy：组件将要销毁，销毁之前 要做一些清理工作，防止内存泄漏
4. destroyed：组件销毁完成。常在该时机移除耗时操作，比如计时器等

激活动态组件：
5. activated：keep-alive 激活动态组件时调用
6. deactivated：keep-alive 卸载动态组件时调用（已经销毁的时候执行）
7. errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

8. vue组件通讯（即传值）有哪几种形式，分别是如何实现的？

1. 父传子：主要通过props来实现的
2. 子传父：主要通过$emit来实现
3. 兄弟之间传值：vuex实现

9.vue路由或前端路由实现原理

第一种：利用H5的history API实现
主要通过history.pushState 和 history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache]

第二种：利用url的hash实现
我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，路由里的 # 不叫锚点，我们称之为 hash，我们说的就是hash,主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新
第三种：abstract
abstract : ⽀持所有 JavaScript 运⾏环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会⾃动强制进⼊这个模式.

10. vue中methods,computed,watch的区别?

methods：放函数的地方，都是封装好的函数，无论是否有变化只要触发就会执行。
computed: computed:是vue独有的特性计算属性，和methods的区别是computed是可缓存的，也就是说computed中的依赖项没有变化，则computed中的值就不会重新计算，而methods中的函数是没有缓存的。
watch：Watch是监听data和计算属性中的新旧变化。监听的元素发生变化就会执行.

11.vue工程目录结构

build:项目构建目录
config:项目配置，包括代理配置，线上和线下环境配置
node_modules:node包目录，npm install安装的包都在这个目录
src:平时开发时的目录
static:存入一些静态资源资源目录，我们可以把一些图片，字体，json数据放在这里。

12.vuex是啥?

vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，每⼀个 Vuex 应⽤的核⼼就是 store（仓库）。“store”基本上就是⼀个容器，它包含着你的应⽤中⼤部分的状态 ( state )。

13.vuex有啥？

主要包括state,actions,mutations,getters和modules 5个要素，主要流程：组件通过dispatch到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的数据做提前处理的.再说到辅助函数的作用.

14.MVVM是啥？

MVVM 源⾃于经典的 Model–View–Controller（MVC）模式 ，MVVM 的出现促进了前端开发与后端业务逻辑的分离，极⼤地提⾼了前端开发效率，MVVM 的核⼼是 ViewModel 层，它就像是⼀个中转站（valueconverter），负责转换 Model 中的数据对象来让数据变得更容易管理和使⽤，该层向上与视图层进⾏双向数据绑定，向下与 Model 层通过接⼝请求进⾏数据交互，起呈上启下作⽤。
（1）View 层
View 是视图层，也就是⽤户界⾯。前端主要由 HTML 和 CSS 来构建 。
（2）Model 层
Model 是指数据模型，泛指后端进⾏的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
（3）ViewModel 层
ViewModel 是由前端开发⼈员组织⽣成和维护的视图数据层。、

15.对于即将到来的 vue3.0 特性你有什么了解的吗？

1. 更⼩
2. 更快
3. 加强TypeScript⽀持
4. 加强API设计⼀致性
5. 提⾼⾃身可维护性
6. 开放更多底层功能

16.对 Vue 项目进行哪些优化？

v-if 和 v-show 区分使⽤场景
computed 和 watch 区分使⽤场景
v-for 遍历必须为 item 添加 key，且避免同时使⽤ v-if
事件的销毁
图⽚资源懒加载
路由懒加载
keep-alive
第三⽅插件的按需引⼊
优化⽆限列表性能
服务端渲染 SSR or 预渲染

17. vue 如何实现 深度监听 以及什么时候需要用到深度监听

深度监听需要用到的情况：
watch:{} 可监听数据，数据发生变化， 处理函数，watch虽可监听，但只是浅监听，只监听数据第一层
或者第二层，例如对象里面套对象data: {obj: {a: 123} }
深度监听使用方法： deep: true

18. vue slot 具体用法 你项目怎么使用slot

slot用于封装组件中，写在子组件 接收父组件动态传递子组件内容片断
slot插槽的使用方法其实就是类似于一个子组件或者标签的引用的过程，在父组件里面定义一个slot，给
她起个name，然后组件引入到子组件，子组件里面有个元素的属性slot值等于name，然后父组件里面没
有值的时候就可以显示子组件里面的信息了（切记：插槽slot要写在父组件里面！！！）

19.vue如何实现自定义事件?

使用 v­on 绑定自定义事件
每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName)触发事件Vue的事件系统分离自浏览器的EventTargetAPI。尽管它们的运行类似，但是$on 和 $emit 不是
addEventListener 和 dispatchEvent 的别名。
另外，父组件可以在使用子组件的地方直接用 v­on 来监听子组件触发的事件。

20. this.$nextTick 使用过没? 具体用于什么场景

定义：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
（当data中的某个属性改变的时候，这个值并不是立即渲染到页面上，而是先放到watcher队列上（异
步），只有当前任务空闲的时候才会去执行watcher队列上的任务。）
优点：想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue
就会给我们做这个工作。

21.组件中 data 为什么是⼀个函数？

因为组件是⽤来复⽤的，且 JS ⾥对象是引⽤关系，如果组件中 data 是⼀个对象，那么这样作⽤域没有隔离，⼦组件中的 data 属性值会相互影响，如果组件中 data 选项是⼀个函数，那么每个实例可以维护⼀份被返回对象的独⽴的拷⻉，组件实例之间的 data 属性值不会互相影响；⽽ new Vue 的实例，是不会被复⽤的，因此不存在引⽤对象的问题。

22.谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的⼀个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
⼀般结合路由和动态组件⼀起使⽤，⽤于缓存组件；
提供 include 和 exclude 属性，两者都⽀持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级⽐ include ⾼；
对应两个钩⼦函数 activated 和 deactivated ，当组件被激活时，触发钩⼦函数 activated，当组件被移除时，触发钩⼦函数 deactivated。