1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA(single-page application)仅在web页面初始化时加载相应的HTML,JavaScript和CSS.一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现HTML内容的变化,UI与用户的交互,避免页面的重新加载.
优点:
用户体验好,快.内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染
基于上面一点,SPA相对服务器的压力小.
前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理.
缺点:
初次加载耗时多:为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面按需加载.
前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理
SEO难度较大,由于所有的内容在一个页面中动态替换显示,所以在SEO上有着天然的弱势.
2、v-show 与 v-if 有什么区别？
v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,也是惰性的.如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块.
v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单的基于CSS的’display’属性进行切换.
所以v-if适用于在运行时很少改变条件,不需要频繁切换条件的场景.v-show则适用于非常频繁切换条件的场景.
3、Class 与 Style 如何动态绑定？
Class可以通过对象语法和数组语法进行动态绑定:
对象语法
<div v-bind:class="{active: isActive , 'text-danger': hasError}"></div>
数组语法
<div v-bind:class="[isActive ? activeclass:'', errorClass]"></div>
Style也可以通过对象语法和数组语法进行动态绑定
对象语法
<div v-bind:style="{ color : activeColor , fontSize : fontSize + 'px'}"></div>
数组语法
<div v-bind:style= "[styleColor ,styleSize]"></div>
5、computed 和 watch 的区别和运用的场景？
computed: 是计算属性,依赖其他属性值.并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值才会重新计算computed的值;
watch: 更多的是观察作用,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续的操作;
运用场景:
当我们需要进行数值计算,并且依赖于其他数据时,应该使用computed.
当我们需要在数据变化时执行异步操作或者开销较大的操作时,应该使用watch.
12、谈谈你对 keep-alive 的了解？
keep-alive 是Vue的一个内置组件,可以使被包含的组件保留状态,避免重新渲染.具有以下几个特性:
结合路由和动态组件一起使用,用于缓存组件;
提供include 和 exclude 属性,两者都支持字符串或正则表达式,include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件不会被缓存,exclude的优先级高于include.
对应两个钩子函数activated 和 deactivated,当组件被激活时,触发组件的activated,当组件被移除时,触发钩子函数deactivated.
15、Vue 组件间通信有哪几种方式？
Vue组件间的通信主要指3类通信:父子组件通信,隔代组件通信,兄弟组件通信.
(1)props/$emit 适用父子组件通信
(2)ref 与 parent/children 适用父子组件通信
ref 如果在普通的DOM元素上适用,引用指向的就是DOM元素;如果在子组件上,引用指向的就是组件实例
parent/children: 访问父/子实例
(3)eventBus (emit/on) 适用 父子,隔代,兄弟
通过一个空的Vue实例作为中央事件总线,用它来触发和监听事件,从而实现任何组件间的通信.
(4)attrs/listeners 适用于隔代组件
listeners:包含了父作用域中的(不含.native修饰)的v-on事件监听器,它可以通过v-on="listeners"传入内部组件
(5)provide/inject 适用于隔代组件
(6)vuex 适用于 父子,隔代,兄弟组件
Vuex 是一个专为Vue.js应用程序开发的状态管理模式.每一个Vuex应用的核心就是store仓库.