Vue2的核心原理剖析
? 用了這么久的Vue2了你真的 知其然,知其所以然么?
?今天博主就為大家?guī)硪黄獙?duì)Vue核心功能的部分剖析\textcolor{pink}{今天博主就為大家?guī)硪黄獙?duì)Vue核心功能的部分剖析}今天博主就為大家帶來一篇對(duì)Vue核心功能的部分剖析
?后續(xù)文章會(huì)用更多小案例來幫助大家理解Vue的原理\textcolor{green}{后續(xù)文章會(huì)用更多小案例來幫助大家理解Vue的原理}后續(xù)文章會(huì)用更多小案例來幫助大家理解Vue的原理
前言:
- 相信大家閱讀過很多關(guān)于Vue2的文章,我也閱讀過很多,但是大部分文章介紹的都是如何在項(xiàng)目中進(jìn)行應(yīng)用,技術(shù)點(diǎn)如果使用,功能如何實(shí)現(xiàn);
- 今天小編為大家?guī)磉@篇Vue2的核心原理剖析就是為大家介紹我們常用的Vue2他是如何實(shí)現(xiàn)的核心內(nèi)容,我們簡(jiǎn)單代碼的背后究竟他做了哪些,讓大家能夠 知其然,知其所以然
學(xué)習(xí)目標(biāo):
- 了解Object.defineProperty原理
- 了解set、get關(guān)聯(lián)使用
- 了解數(shù)據(jù)反應(yīng)到識(shí)圖的過程
- 了解視圖更換如何影響數(shù)據(jù)
- 掌握MVVM
Object.defineProperty
<script>// 1. 字面量定義let data = {name: 'aa'}data.name = 'bb' // 這種情況下我們并不能知道name屬性發(fā)生了變化// 2. Object.defineProperty let data1 = {}Object.defineProperty(data1, 'name', {// 當(dāng)我們?cè)L問data1的name屬性的時(shí)候自動(dòng)調(diào)用的方法// 并且get函數(shù)的返回值就是你拿到的值get() {console.log('你訪問了data1的name屬性')return 'aa'},// 當(dāng)我們?cè)O(shè)置修改name屬性的時(shí)候自動(dòng)調(diào)用的函數(shù)// 并且屬性最新的值會(huì)被當(dāng)成實(shí)參傳入進(jìn)來set(newValue) {console.log('你修改了data1的name屬性最新的值為', newValue)// 這個(gè)位置 只要你修改了name屬性就會(huì)得到執(zhí)行// 所以如果你想要在name變化的時(shí)候 完成一些自己的事情// 都可以放到這里來執(zhí)行// 1. ajax()// 2. 操作一塊dom區(qū)域}})// 以上是js中對(duì)象定義的另外一種方案,可以在訪問屬性和設(shè)置屬性的時(shí)候自動(dòng)調(diào)用對(duì)應(yīng)的函數(shù)// 訪問屬性:data.name data['name'] // 設(shè)置屬性:data.name = 'bb' data['name'] = 'bb'</script> 響應(yīng)式的核心APIget、set
<script>// let data = {// name: 'aa'// }let data = {}let _name = 'aa'Object.defineProperty(data, 'name', {get() {console.log('你訪問了data1的name屬性')return _name},set(newValue) {console.log('你修改了data1的name屬性最新的值為', newValue)_name = newValue}})// 問題產(chǎn)生的原因:get中直接返回了一個(gè)固定的值,并且set函數(shù)中新值拿到了但是沒有做任何事情// 解決方案:通過聲明一個(gè)中間變量,讓get函數(shù)中return出去這個(gè)變量// 并且在set函數(shù)中把最新的值設(shè)置到這個(gè)中間變量身上,起到一個(gè)set和get操作的一個(gè)// 數(shù)據(jù)的效果</script>數(shù)據(jù)反應(yīng)到視圖
數(shù)據(jù)的變化可以引起視圖的變化(通過操作dom把數(shù)據(jù)放到對(duì)應(yīng)的位置上去 如果數(shù)據(jù)變化之后就用數(shù)據(jù)最新的值再重新放一次)
方案一:命令式操作
方案二:聲明式渲染
v-text指令的實(shí)現(xiàn)
核心邏輯:通過‘模板編譯’找到標(biāo)記了v-text的元素,然后把對(duì)應(yīng)的數(shù)據(jù)通過操作domapi放上去
<div id="app"><p v-text="name"></p><p></p></app>1.通過app根元素找到所有的子節(jié)點(diǎn) (元素節(jié)點(diǎn),文本節(jié)點(diǎn)…) -> dom.nodeChilds
2.通過節(jié)點(diǎn)類型篩選出元素節(jié)點(diǎn) (p) -> nodeType 1元素節(jié)點(diǎn) 3文本節(jié)點(diǎn)
3.通過v-text找到需要設(shè)置的具體的節(jié)點(diǎn) <p v-text></p>
4.找到綁定了v-text標(biāo)記的元素 拿到它身上所有的屬性 id class v-text=“name”
5.通過v-text=“name” 拿到指令類型 ‘v-text’ 拿到需要綁定的數(shù)據(jù)的屬性名 ‘name’
6.判斷當(dāng)前是v-text指令 然后通過操作domapi 把name屬性對(duì)應(yīng)的值放上去 node.innerText = data[name]
以上整個(gè)過程可以稱作‘模板編譯’
視圖的變化反映到數(shù)據(jù)
input元素 v-model雙向綁定 M -> V V -> MM -> V
1.通過app根元素找到所有的子節(jié)點(diǎn) (元素節(jié)點(diǎn),文本節(jié)點(diǎn)…) -> dom.nodeChilds
2.通過節(jié)點(diǎn)類型篩選出元素節(jié)點(diǎn) (p) -> nodeType 1元素節(jié)點(diǎn) 3文本節(jié)點(diǎn)
3.通過v-text找到需要設(shè)置的具體的節(jié)點(diǎn) <p v-text></p>
4.找到綁定了v-text標(biāo)記的元素 拿到它身上所有的屬性 id class v-text=“name”
5.通過v-model=“name” 拿到指令類型 ‘v-model’ 拿到需要綁定的數(shù)據(jù)的屬性名 ‘name’
6.判斷當(dāng)前是v-model指令 然后通過操作domapi 把name屬性對(duì)應(yīng)的值放上去 node.value = data[name]
v-model和v-text除了指令類型不一致,使用的dom api不一致 其它的步驟是完全一致的
V -> M
本質(zhì):事件監(jiān)聽在回調(diào)函數(shù)中拿到input中輸入的最新的值然后賦值給綁定的屬性
node.addEventListener('input',(e)=>{data[name] = e.target.value})以上總結(jié):
1.數(shù)據(jù)的響應(yīng)式
2.數(shù)據(jù)變化影響視圖
3.視圖變化影響數(shù)據(jù)
4.指令是如何實(shí)現(xiàn)的(常規(guī)實(shí)現(xiàn)邏輯)
優(yōu)化工作:
1.通用的數(shù)據(jù)響應(yīng)式處理
2.發(fā)布訂閱模式
問題:
name發(fā)生變化之后 我需要做的事情是更新倆個(gè)p標(biāo)簽,而現(xiàn)在不管你更新了哪個(gè)數(shù)據(jù),所有的標(biāo)簽都會(huì)被重新
操作賦值,無法做到精準(zhǔn)更新
解決問題的思路:
1.數(shù)據(jù)發(fā)生變化之后最關(guān)鍵的代碼是什么?
2.設(shè)計(jì)一個(gè)存儲(chǔ)結(jié)構(gòu)
每一個(gè)響應(yīng)式數(shù)據(jù)可能被多個(gè)標(biāo)簽綁定 是一個(gè)‘一對(duì)多’的關(guān)系
發(fā)布訂閱(自定義事件) 解決的問題就是 ‘1對(duì)多’的問題
實(shí)現(xiàn)簡(jiǎn)單的發(fā)布訂閱模式:
瀏覽器的事件模型
dom.addEventLister(‘click’,()=>{})
只要調(diào)用click事件,所有綁定的回調(diào)函數(shù)都會(huì)執(zhí)行 顯然是一個(gè)1對(duì)多的關(guān)系
使用發(fā)布訂閱模式優(yōu)化現(xiàn)存問題
先前的寫法 不管是哪個(gè)數(shù)據(jù)發(fā)生變化我們都是粗暴的執(zhí)行一下compile函數(shù)即可
現(xiàn)在的寫法 我們?cè)赾ompile函數(shù)初次執(zhí)行的時(shí)候 完成更新函數(shù)的收集 然后在數(shù)據(jù)變化的時(shí)候
通過數(shù)據(jù)的key找到相對(duì)應(yīng)的更新函數(shù) 依次執(zhí)行 達(dá)到精準(zhǔn)更新的效果
寫在最后
?原創(chuàng)不易,還希望各位大佬支持一下\textcolor{blue}{原創(chuàng)不易,還希望各位大佬支持一下}原創(chuàng)不易,還希望各位大佬支持一下
👍 點(diǎn)贊,你的認(rèn)可是我創(chuàng)作的動(dòng)力!\textcolor{green}{點(diǎn)贊,你的認(rèn)可是我創(chuàng)作的動(dòng)力!}點(diǎn)贊,你的認(rèn)可是我創(chuàng)作的動(dòng)力!
?? 收藏,你的青睞是我努力的方向!\textcolor{green}{收藏,你的青睞是我努力的方向!}收藏,你的青睞是我努力的方向!
?? 評(píng)論,你的意見是我進(jìn)步的財(cái)富!\textcolor{green}{評(píng)論,你的意見是我進(jìn)步的財(cái)富!}評(píng)論,你的意見是我進(jìn)步的財(cái)富!
看完文章啦 驗(yàn)證大家對(duì)這篇文章的掌握 大家參與下方的投票呦!
總結(jié)
以上是生活随笔為你收集整理的Vue2的核心原理剖析的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 了解 Vue SSR 这一篇足以
- 下一篇: 苹果更新“过时产品”名单:首批搭载Tou