说说你对MVVM的理解
-
Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来。
-
数据会绑定到viewModel 层并自动将数据渲染到页面中,视图变化时候会通知viewModel层更新数据。
vue2.x响应式数据/双向绑定原理
-
Vue数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过实践监听的方式来实现,所以Vue数据双向绑定的的工作主要是如何根据Data变化更新View
简述:
当你把一个普通的javaScript对象传入Vue实例作为data选项,Vue将遍历此对象所有的property,并使用Object.defineProperty把这些property全部转为getter/setter。
-
这些getter/setter对用户来说是不可兼得,但是在内部他们让Vue能够追踪依赖,在property被访问和修改时通知变更。
-
每个组件实例都对应一个watcher实例,他会在组件渲染的过程中吧“接触”过的数据Property记录为依赖之后当依赖项的setter触发时,会通知watcher,从而使他关联的组件重新渲染。
-
深入理解:
-
监听器 Observer:对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。
-
解析器 Compile:解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新。
-
订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新——这是一个典型的观察者模式
-
订阅器 Dep:订阅器采用 发布-订阅 设计模式,用来收集订阅者 Watcher,对监听器 Observer 和 订阅者 Watcher 进行统一管理。
-
你知道Vue3.x响应式数据原理吗?
Vue3.x改用Proxy替代Object.defineProperty。
-
因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
-
Proxy只会代理对象的第一层,Vue3是怎样处理这个问题的呢?
-
判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理, 这样就实现了深度观测。
-
监测数组的时候可能触发多次get/set,那么如何防止触发多次呢?我们可以判断key是否为当前被代理对象target自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行trigger。
Proxy 与 Object.defineProperty 优劣对比
-
Proxy 的优势如下:
-
Proxy 可以直接监听对象而非属性;
-
-
Proxy 可以直接监听数组的变化;
-
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的;
-
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;
-
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;
-
-
Object.defineProperty 的优势如下:
-
兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
-
-
VUEX篇
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
-
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化
-
主要包括以下几个模块:
-
State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
-
Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
-
Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
-
Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
-
Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
-
-
什么情况下使用 Vuex?
-
如果应用够简单,最好不要使用 Vuex,一个简单的 store 模式即可
-
需要构建一个中大型单页应用时,使用Vuex能更好地在组件外部管理状态
组件中的data为什么是一个函数?
-
一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。
-
如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。
子组件为什么不可以修改父组件传递的Prop?/怎么理解vue的单向数据流?
- Vue提倡单向数据流,即父级props的更新会流向子组件,但是反过来则不行。
-
这是为了防止意外的改变父组件状态,使得应用的数据流变得难以理解。
-
如果破坏了单向数据流,当应用复杂时,debug 的成本会非常高。
v-model是如何实现双向绑定的?
-
v-model是用来在表单控件或者组件上创建双向绑定的
-
他的本质是v-bind和v-on的语法糖
-
在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件
nextTick的实现原理是什么?
-
在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后立即使用 nextTick 来获取更新后的 DOM。
-
nextTick主要使用了宏任务和微任务。
-
根据执行环境分别尝试采用Promise、MutationObserver、setImmediate,如果以上都不行则采用setTimeout定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列。
Vue不能检测数组的哪些变动?Vue 怎么用
vm.$set()
解决对象新增属性不能响应的问题 ?
Vue 不能检测以下数组的变动:
- 第一类问题
// 法一:
Vue.set Vue.set(vm.items, indexOfItem, newValue)
// 法二:
Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) 复制代码
2. 第二类问题,可使用 splice:
vm.items.splice(newLength) 复制代码
-
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
-
当你修改数组的长度时,例如:vm.items.length = newLength
-
解决办法:
-
vm.
$set
的实现原理是:-
如果目标是数组,直接使用数组的 splice 方法触发相应式;
-
如果目标是对象,会先判读属性是否存在、对象是否是响应式,最终如果要对属性进行响应式处理,则是通过调用 defineReactive 方法进行响应式处理( defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法)
-
Vue事件绑定原理是什么?
-
原生事件绑定是通过addEventListener绑定给真实元素的,组件事件绑定是通过Vue自定义的
$on
实现的。
说一下虚拟Dom以及key属性的作用
-
由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。
-
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类,它定义在src/core/vdom/vnode.js中。)
-
虚拟 DOM 的实现原理主要包括以下 3 部分:
-
用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
-
diff 算法 — 比较两棵虚拟 DOM 树的差异;
-
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
-
-
key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速
-
更准确:因为带 key 就不是就地复用了,在 sameNode 函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
-
更快速:利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快
-
你的接口请求一般放在哪个生命周期中?
-
可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。
-
但是推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:
-
能更快获取到服务端数据,减少页面loading 时间;
-
ssr不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性;
路由篇
vue路由hash模式和history模式实现原理分别是什么,他们的区别是什么?
-
hash 模式:
-
#后面 hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面
-
通过监听 hashchange 事件可以知道 hash 发生了哪些变化,然后根据 hash 变化来实现更新页面部分内容的操作。
-
-
history 模式:
-
history 模式的实现,主要是 HTML5 标准发布的两个 API,pushState 和replaceState,这两个 API 可以在改变 url,但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作
-
-
区别
-
url 展示上,hash 模式有“#”,history 模式没有
-
刷新页面时,hash 模式可以正常加载到 hash 值对应的页面,而 history 没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向到首页路由
-
-
- 兼容性,hash 可以支持低版本浏览器和 IE。
Vue-router 导航守卫有哪些
-
全局前置/钩子:beforeEach、beforeResolve、afterEach
-
路由独享的守卫:beforeEnter
- 组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
说说你对keep-alive组件的了解
-
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其有以下特性:
-
一般结合路由和动态组件一起使用,用于缓存组件;
-
提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;
-
- 对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated。
说说你对SSR的了解
-
SSR也就是服务端渲染,也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端
-
SSR的优势
-
更好的SEO
-
首屏加载速度更快
-
-
SSR的缺点
-
开发条件会受到限制,服务器端渲染只支持beforeCreate和created两个钩子
-
当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于Node.js的运行环境
-
- 更多的服务端负载
你都做过哪些Vue的性能优化?
编码阶段
-
尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
-
v-if和v-for不能连用
-
如果需要使用v-for给每项元素绑定事件时使用事件代理
-
SPA 页面采用keep-alive缓存组件
-
在更多的情况下,使用v-if替代v-show
-
key保证唯一
-
使用路由懒加载、异步组件
-
防抖、节流
-
第三方模块按需导入
-
长列表滚动到可视区域动态加载
-
图片懒加载
-
SEO优化
-
预渲染
-
服务端渲染SSR
-
-
打包优化
-
压缩代码
-
Tree Shaking/Scope Hoisting
-
使用cdn加载第三方模块
-
多线程打包happypack
-
splitChunks抽离公共文件
-
sourceMap优化
-
-
用户体验
-
骨架屏
-
PWA
-
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
-
vue2.x中如何监测数组变化?
-
使用了函数劫持的方式,重写了数组的方法,Vue将data中的数组进行了原型链重写,指向了自己定义的数组原型方法,当调用数组api时,可以通知依赖更新。
-
如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。
说说你对 SPA 单页面的理解,它的优缺点分别是什么?
-
SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。
-
优点:
-
用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
-
基于上面一点,SPA 相对对服务器压力小;
-
前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
-
-
缺点:
-
初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
-
前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;
-
SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
-