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.pushState
或history.replaceState
更改URL
,监听URL
的变化做出操作。
hash
模式,通过window.location
更改URL
,监听URL
作出操作。
SPA 的优缺点
优点:
- 减轻了服务器的压力
- 提高了用户体验
缺点:
- 首次加载速度变慢
- 不利于 SEO 的优化
- 无法利用导航按钮实现自行前进、后退
什么是路由?如何实现?
------------------------------------------------------------
什么是路由?
路由就是通过监听
URL
的改变,作出相应操作。
如何实现?
和 SPA 类似
Vue.js 生命周期
------------------------------------------------------------
Vue.js 生命周期是什么
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
有几个阶段?各自的作用
生命周期总共有四个阶段,分别是 create
,mount
,update
,destroy
。
四个阶段分别含有两个函数,分别是before
和ed
。
create
阶段: 这个阶段是在进行必要的初始化属性操作,但是并未挂载。在
beforeCreate
中,无法访问属性。在
created
中,可以开始访问属性。
mounte
阶段:这个阶段开始生成虚拟 DOM 并将其挂载到真实 DOM 中。在
beforeMount
中,只是生成了虚拟 DOM,还无法进行访问。在
mounted
中,虚拟DOM挂在成功,可以访问 DOM。
update
阶段:这个阶段对应数据更新的时候。在
beforeUpdate
中,数据还未更改。在
updated
中,数据更改结束。
destroy
estroy阶段:这个阶段对应组件销毁的时候。在
beforeDestroy
中,组件还未销毁,开始进行销毁动作。在
destroyed
中,销毁结束。
Diff 算法
------------------------------------------------------------
Diff 是啥
在数据更新的时候,只改变一小块
DOM
而不是直接渲染整个DOM
树,这就是Diff
。
diff
的过程就是调用名为patch
的函数,一边比较新旧节点,一边给真实的DOM
打补丁。
Vue.js 数据双向绑定原理
------------------------------------------------------------
Vue.js
实现数据双向绑定主要是采用数据劫持
以及发布者-订阅者模式
,Vue.js
通过Object.defineProperty
劫持各个属性的setter
和getter
,在数据变动的时候发布消息给订阅者,触发相应的操作。
Vue.js 事件机制
------------------------------------------------------------
Vue.js
的事件API
有四个,分别是$on
、$off
、$emit
、$once
。
$on
用于在VM
实例上监听自定义事件。
$emit
用于触发指定的自定义事件。
$off
用于移除自定义事件。
$once
用于触发一次性事件,触发成功之后移除事件。
从 template 转换成真实 DOM 的实现机制
------------------------------------------------------------
首先会将模板
template
进行parse
得到一个AST
语法树,再通过optimize
做一些优化,最后通过generate
得到render
以及staticRenderFns
。