1.vue生命周期
2.0 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated deactivated
3.0 beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted activated deactivated
2.双向绑定原理
双向绑定指的是视图层和数据层双向绑定,视图层到数据层的绑定比较容易实现,通过事件监听就可以实现,难点是数据层到视图层的绑定。vue通过Object.defineProperty数据劫持和发布订阅模式来实现。
vue在编译模板的过程中遇到数据对象,会通过Object.defineProperty对数据对象进行劫持,生成一个观察者观测其数据变动,它会维护一个订阅者队列,页面上每个用到该数据对象的地方都会生成一个订阅者添加到这个队列里面。当该数据对象发生变动的时候,会触发其get,观察者会通知队列里面的每个订阅者执行他们的更新函数更新页面元素,这就完成了从数据层到视图层的绑定。
3.diff算法
数据发生变化时,直接比较和操作真实dom的开销是很大的,因而vue设计了虚拟dom,虚拟dom是js对象,确切来说是真实dom的描述。
vue先根据真实dom生成虚拟dom,当虚拟dom某个节点数据发生变化的时候会生成一个新的vnode,vue会比较新的vnode和旧的vnode之间的差异,将差异更新到真实dom上。这个过程就是diff,一边比较差一边给真实的dom打补丁。
diff在比较新旧vnode的时候只会同层级进行比较,不会跨层级进行比较,这样就使这个算法的复杂度降为了O(n)。diff调用patch比较的时候,先判断新旧vnode是不是sameVnode,不是的话直接根据新vnode生成真实node替换原先的node,是sameNode的话调用patchVnode方法。
这个函数做了以下事情:
- 首先获取真实node,新的vnode的el属性指向真实node,然后进行分类判断
- 新的vnode和旧的vnode指向同一个对象,不用继续操作直接return
- 新的vnode和旧的vnode都是文本节点并且文本内容不一样,替换真实node的文本内容
- 新的vnode有子节点,旧的vnode没有子节点,将子节点添加到真实node中
- 新的vnode没有子节点,旧的vnode有子节点,删除真实node的子节点
- 如果新的vnode和旧的vnode都有子节点,则会调用updateChildren方法:
这个函数会将新旧vnode的子节点提取出来,子节点数组会分别维护一个头指针startIndex和尾指针endIndex,然后进行头头,尾尾,头尾,尾头四种方式比较,匹配可以复用的节点。
如果四种方式都没有匹配到并且设置了key,会根据key和index的映射map去寻找旧的子vnode进行匹配。如果匹配不到则创建新的node,匹配到就执行patchVnode并调整对应真实node的位置,然后将头指针或尾指针向中间靠拢。
当新旧子节点数组中有一个startIndex大于endIndex则结束循环,剩余未匹配的子节点进行插入或者删除操作。
4.绑定key值的作用
-
判断新旧vnode是不是sameVnode的时候会根据key值判断,加了key值影响判断sameVnode的结果,导致尽量移动真实node而不是尽量就地复用
-
新旧vnode的子节点数组进行比较的时候,如果头头,尾尾,头尾,尾头四种方式匹配不到可以复用的节点,设置了key就会根据key和index的映射map去寻找子vnode进行匹配,提高算法效率
5.vdiff做了哪些优化
- 同层节点进行diff
- diff过程中采用双端比较的算法
- 对触发了setter和getter的vnode进行diff,精准控制diff范围
6.什么场景下会使用到vuex
组件之间共享同一个数据状态时,一般在中大型的单页应用中使用,如果是小型项目一般采用更为轻量的解决方案,如eventBus
7.前端路由,hash模式和history模式的区别
在单页应用中,只有一个html页面,通过动态替换dom内容并同步修改url地址来模拟多页应用的效果。前端路由本质上是前端不同页面状态的管理器。
hash模式:url上面加上#,页面hash变化的时候不会向服务端发送请求,前端通过监听hashChange事件动态修改页面,并且hash的变化会被浏览器记录下来,这样浏览器的前进后退按钮都是可以使用的。
history模式:浏览器history对象维护了页面历史记录栈,H5之前只有访问页面历史记录栈的api(forward,back,go)。H5新加了一些操作页面历史记录栈的api,pushStata和replaceState。调用这些api不会向服务端发送请求并且会同步修改地址栏地址,history模式就是基于这些api实现的。页面历史记录出栈时可以通过监听popState事件获取到当前出栈页面的state。但是在history模式下,浏览器直接输入url和刷新当前页面是会向服务端发送请求的,因而需要服务端进行配置,匹配不到url则返回html页面,不然就会出现404。
8.vue渲染数组的时候使用index作为key会有问题吗
渲染数组使用index作为key,假设现在删除了一个元素,则删除元素之后的所有元素index变为index-1,对于vue来说总是删除最后一个元素并且把index之后的元素就地复用。插入一个新的元素也是同样的道理。
这种行为通常情况下不会出现问题,但是假如渲染的元素不依赖于任何响应式数据,那么就会出现问题。
9.单页面应用(SPA)的原理和优缺点
只有一个html页面,通过动态替换dom内容并同步修改url地址来模拟多页应用的效果。
优点:前后端高度分离,可以获得更好的交互体验,同时只有一个html页面可以减轻服务端压力
缺点:
-
首屏加载缓慢:vue-router懒加载,异步加载组件,服务端渲染
-
不利于SEO:seo本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说,搜索引擎的基础爬虫的原理就是抓取url,然后获取html源代码并解析。如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。这样就很不利于内容被搜索引擎搜索到
-
不适用于大型项目