Vue 学习总结

Vue 是什么?

------------------------------------------------------------

Vue 是一个前端项目库

Vue 的核心

------------------------------------------------------------

Vue 的核心有两个,分别是组件化和数据驱动。

所谓组件化,就是把页面拆分成多个组件,其资源独立。并且组件在系统内部可复用、组件与组件可以嵌套。

所谓数据驱动,是指视图是由数据驱动生成,我们对视图的修改并不会直接操作 DOM,而是通过修改数据实现的。

Vue 的优点

------------------------------------------------------------

Vue 的优点有三个,分别是轻量高效、快速渲染和响应式组件。

轻量高效是因为 Vue 本身不是一个完整的框架,它有属于自己的生态系统,包括 vue-router 、 vuex 、 axios 。我们可以根据自己的项目所需来获取自己要用到的模块。

快速渲染是因为 Vue 操作的不是真实的 DOM ,而是通过真实场景渲染出来的虚拟 DOM(v-dom),通过操作虚拟 DOM 来提高整个项目的渲染和更新速度。

响应式组件现在还不清楚,待查阅后补充(官网未找到)

Vue 中的 axios

------------------------------------------------------------

axios 是 Vue 的请求插件,axios 已经十分完整了,但是对于不同的项目来说 axios 是不够的,我们需要针对不同的项目封装不同的 axios 。

如何实现组件的缓存

------------------------------------------------------------

缓存使用场景:一类场景是当 tab 选项卡进行切换之后,通常在刷新之后会回到初始的 tab 选项卡中而不是刷新之前的 tab 选项卡;还有一类场景是记录滚动条的位置。

解决方法:使用 keep-alive 进行缓存。因为 keep-alive 拥有自己的生命周期,它独立于默认的生命周期钩子函数之外。

数据更新

------------------------------------------------------------

当数据发生改变时,并不是所有的数组操作都会触发自动更新
具体方法见官网

关于金钱的处理

------------------------------------------------------------

在之前的项目中,我通常将金钱存储为元,但是这就导致了一个问题。因为 JavaScript 语言的精度缺失问题,小数点后的操作会不正确。所以我们通常在内部将金钱存储为分,在显示的时候显示为元,在操作的时候通过分进行操作即可。

单页应用(SPA)

------------------------------------------------------------

SPA 是什么?

SPA ,是单页应用的缩写(Single Page Application),表示不刷新浏览器,即可更新视图。

SPA 的原理是什么?

SPA 的原理分为两种,一种是通过 history,还有一种是通过 hash

history模式,通过history.pushStatehistory.replaceState更改URL,监听URL 的变化做出操作。

hash模式,通过window.location更改URL,监听URL作出操作。

SPA 的优缺点

优点:

  • 减轻了服务器的压力
  • 提高了用户体验

缺点:

  • 首次加载速度变慢
  • 不利于 SEO 的优化
  • 无法利用导航按钮实现自行前进、后退

什么是路由?如何实现?

------------------------------------------------------------

什么是路由?

路由就是通过监听 URL的改变,作出相应操作。

如何实现?

和 SPA 类似

Vue.js 生命周期

------------------------------------------------------------

Vue.js 生命周期是什么

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。

有几个阶段?各自的作用

生命周期总共有四个阶段,分别是 createmountupdatedestroy

四个阶段分别含有两个函数,分别是beforeed

create 阶段: 这个阶段是在进行必要的初始化属性操作,但是并未挂载。

beforeCreate中,无法访问属性。

created中,可以开始访问属性。

mounte阶段:这个阶段开始生成虚拟 DOM 并将其挂载到真实 DOM 中。

beforeMount中,只是生成了虚拟 DOM,还无法进行访问。

mounted中,虚拟DOM挂在成功,可以访问 DOM。

update阶段:这个阶段对应数据更新的时候。

beforeUpdate中,数据还未更改。

updated中,数据更改结束。

destroyestroy阶段:这个阶段对应组件销毁的时候。

beforeDestroy中,组件还未销毁,开始进行销毁动作。

destroyed中,销毁结束。

Diff 算法

------------------------------------------------------------

Diff 是啥

参考链接 https://juejin.im/post/5affd01551882542c83301da

在数据更新的时候,只改变一小块 DOM 而不是直接渲染整个 DOM 树,这就是 Diff

diff的过程就是调用名为patch的函数,一边比较新旧节点,一边给真实的DOM打补丁。

Vue.js 数据双向绑定原理

------------------------------------------------------------

Vue.js 实现数据双向绑定主要是采用数据劫持以及发布者-订阅者模式Vue.js通过Object.defineProperty劫持各个属性的settergetter,在数据变动的时候发布消息给订阅者,触发相应的操作。

Vue.js 事件机制

------------------------------------------------------------

Vue.js的事件API有四个,分别是$on$off$emit$once

$on用于在VM实例上监听自定义事件。

$emit用于触发指定的自定义事件。

$off用于移除自定义事件。

$once用于触发一次性事件,触发成功之后移除事件。

从 template 转换成真实 DOM 的实现机制

------------------------------------------------------------

首先会将模板template进行parse得到一个AST语法树,再通过optimize做一些优化,最后通过generate得到render以及staticRenderFns

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。