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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354