【前端面试】六、Vue 1-10

目录

1. 单页与多页应用的区别

2. v-if 和v-show

3. 不在同个元素上同时使用v-if和v-for指令

4. 为什么 v-for 中使用 :key

5. vue-router 和location.href区别

6. route和router区别

7. $nextTick()

8. 组件中data为什么是函数

9. 命名规范

10. watch、watchEffect和computed差异

---

1. 单页与多页应用的区别

单页（SPA）：只有一个主页面的应用 ，局部刷新组件、页面片段，多用于PC端场景

优点：体验好，快，改动内容局部刷新，不加载整个页面，前后端分离，效果酷炫

缺点：不利于SEO页面优化，初次加载慢，页面复杂度高，含HTML、CSS、JS

2. v-if 和v-show

v-show：实质是CSS的display属性block修改为none，不能用于权限设计操作，用于多次显示隐藏

v-if：实质是dom的创建于销毁，耗费性能

3. 不在同个元素上同时使用v-if和v-for指令

原因：v-for优先级 > v-if，循环遍历每个元素，然后检查v-if条件，推荐使用计算属性代替v-if

好处：

• 渲染效率更高，不会遍历所有元素

• 仅当依赖项更改时，才会重使用过滤后的列表

• 有助于将组件逻辑从模板中分离出来，使组件更具可读性

<!-- 不优雅的写法 -->
<!-- <div v-for="v in items" :key="v.id" v-if="v.count < 100"></div> -->

<!-- 优雅的写法 -->
<div v-for="v in countFilter" :key="v.id"></div>

computed: {
	countFilter() {
		return this.items.filter(v => v.count < 100)
	}
}

4. 为什么 v-for 中使用 :key

将key属性与v-for指令一起使用，每个元素都有唯一的键（常量）引用，Vue就可以跟踪组件状态，可更好预测Vue如何精确地处理DOM操作，尤其在使用动画或Vue转换时。

5. vue-router 和location.href区别

vue-router：实现了按需加载，减少了dom消耗，适用于内部页面，底层是js原生的history

location.href：简单方便，刷新页面，适用于跳转外部链接

按需加载：用户触发了动作（鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改）时才加载对应的功能（JS、图片、CSS、HTML）

6. route和router区别

$route：是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数

$router：“路由实例”对象包括了路由的跳转方法，钩子函数等。

7. $nextTick()

Dom更新后的延迟回调，数据更新渲染到页面上后获取数据

源码：

场景：父组件A包含子组件B ，组件获取b组件的数据

this.$nextTick ({ this.$refs.b.fn() })

8. 组件中data为什么是函数

组件：data 必须是一个函数，return 一个对象。因为组件可复用，存在对象引用问题，通过闭包实现组件的私有作用域。如果data返回一个对象，那么该data将在组件的所有实例之间共享。

new Vue 实例：data 可以直接是一个对象，new Vue 的实例是不会被复用的，不存在引用对象的问题

window.onload = function() {
    new Vue({
		el: "#app",
        data:{}
    })
}

9. 命名规范

有助于将组件逻辑从模板中分离出来，使组件更具可读性

• 事件中使用短横线命名：父组件中使用相同语法来侦听该事件，确保组件间一致性

// 子组件
this.$emit('handle-type')
// 父组件
<Parent @handle-type="handleEvent()" />

• 使用驼峰式声明 props，并在模板中使用短横线命名来访问 props：js中驼峰式声明是标准，HTML中是短横线命名

<!-- 不优雅的写法 -->
	<Son titleText="title" />
    props: {"title-text": String}
<!-- 优雅的写法 -->
	<Son title-text="title" />
    props: {"titleText": String}

10. watch、watchEffect和computed差异

watch：进行数据监听进行相应的操作，触发方法，比较耗性能

computed：数据改变进行相应的数据变化，由老数据return新的数据，会利用缓存机制缓存数据，当依赖数据变化时才会相应的变化