vue面试题汇总之vue核心知识点

vue核心知识点

1.vue.js的两个核心是什么？

• 数据驱动,也叫双向数据绑定。 Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于...
• 组件系统。 vue组件的核心选项:

2.请说出vue几种常用的指令

• v-text：更新DOM对象的 textContent
• v-html：更新DOM对象的 innerHTML
• v-bind：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• v-on：绑定的事件定义在methods
• v-model：监听用户的输入事件以更新数据
• v-for：基于源数据多次渲染元素或模板块

3.请问 v-if 和 v-show 有什么区别

1.共同点

都是动态显示DOM元素

 

2.区别

（1）手段：

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（5）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

4、vue常用的修饰符

事件修饰符

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 --><form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>

按键修饰符

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl

.alt

.shift

.meta

f="https://cn.vuejs.org/v2/guide/events.html#exact-%E4%BF%AE%E9%A5%B0%E7%AC%A6">.exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --><button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 --><button @click.exact="onClick">A</button>5、v-on可以监听多个方法吗？

5.vue中 key 值的作用

“key值:用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 是必须的。”

1. vue中子组件调用父组件的方法

• 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
• 第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。（$emit）
• 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法（$props）

1. vue中 keep-alive 组件的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

include - 字符串或正则表达，只有匹配的组件会被缓存

exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

 

9、vue中如何编写可复用的组件？

10、什么是vue生命周期和生命周期钩子函数？

11、vue生命周期钩子函数有哪些？

12、vue如何监听键盘事件中的按键？

13、vue更新数组时触发视图更新的方法

14、vue中对象更改检测的注意事项

16、vue-cli工作中如何自定义一个过滤器？

17、vue等单页面应用及其优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中

优点：

         1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。

         2、前后端分离，比如vue项目

         3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

      缺点：

        1、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

        2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。

        3、页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

18、什么是vue的计算属性？

 

 

1. vue-cli提供的几种脚手架模板（5种）

我们用 vue init 命令来初始化项目：vue init

init：表示我们要用 vue-cli 初始化项目；

：表示模板名称，vue-cli官网为我们提供了5种模板：

1、webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载、linting、检测和CSS扩展；

2、webpack-simple：一个简单 webpack+vue-loader 模板，不包含其他功能，可以快速的搭建 vue 的开发环境；

3、browserify：一个全面的 Browserify+vueify 模板，功能包括热加载、linting、单元测试；

4、browserify-simple：一个简单的 Browserify+vueify 模板，不包含其他功能，可以快速的搭建 vue 的开发环境；

5、simple：一个最简单的单页应用模板。

20、vue父组件如何向子组件中传递数据？

子组件用props属性获取传的数据

1. vue-cli工程升级vue版本

1.先升级npm的版本

  npm install -g npm

2.再卸载之前的vue cli 2.9.6

npm uninstall -g @vue/cli

3.下载最新的vue cli版本

npm install -g @vue/cli