Vue面试题

最新推荐文章于 2021-03-17 16:44:32 发布

Lofan.

最新推荐文章于 2021-03-17 16:44:32 发布

阅读量278

点赞数

分类专栏： Vue 专栏文章标签： vue面试题 vue核心知识点 vue高频知识点

Vue 专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

篇幅较长，毕竟面试题，建议点击目录进行快速导航

文章目录

v-for 与 v-if 的优先级

永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将会经过如下运算：

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

正确的做法是：

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

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

相同点：两者都是在判断DOM节点是否要显示

不同点：

a. 实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；

c. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

d. 性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；

v-on可以监听多个方法吗？

可以

Vue 组件中 data 为什么必须是函数

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的

Vue实现数据双向绑定的原理：Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

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

答：数据驱动、组件系统

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

答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

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

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

`$route`和`$router`的区别

答： $r o u t e 是 “ 路由信息对象 ” ，包括 p a t h ， p a r a m s ， h a s h ， q u e r y ， f u l l P a t h ， m a t c h e d ， n a m e 等路由信息参数。而$ router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

css只在当前组件起作用

答：在style标签中写入scoped即可例如：<style scoped></style>

Vue 的diff算法，理解这个才好知道Vue中key值的作用

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

比如我们想在B和C之间加一个F：

Diff算法默认执行起来是这样的：

要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

参考 https://www.zhihu.com/question/61064119

Vue中key值的作用

key用来标识列表里那些元素被增删改，是唯一标识。
比如有下面列表，事先 v-for 的时候加了 :key 标识，现在分别做注释里的操作：

<ul>
	<!-- 此处插入一个 33 -->
	<li>aa</li>
	<li>bb</li>
	<li>cc</li>   <!-- 此处内容修改为 44 -->
	<li>dd</li>
	<li>ee</li>
	<!-- 此处插入一个 55 -->
</ul>

要理解key，要先知道diff算法。

因为有key作为每项的唯一标识，这三个操作都只会局部渲染。为什么？因为diff算法，33跟55一样，新增不会影响原来的key，更改44时，react会把它标为脏数据，跟之前的数据比较完了之后更新，也是只会更新改动过的那一处。

那如果没有设置 :key ，diff算法识别不到对应的节点，就会根据下标整体重新渲染全部。

Vue面试中，经常会被问到的面试题/Vue知识点整理