? 用了這么久的Vue2了你真的 知其然，知其所以然么？

?$今天博主就為大家帶來一篇對Vue核心功能的部分剖析$

?$后續(xù)文章會用更多小案例來幫助大家理解Vue的原理$

前言：

• 相信大家閱讀過很多關于Vue2的文章，我也閱讀過很多，但是大部分文章介紹的都是如何在項目中進行應用，技術點如果使用，功能如何實現(xiàn)；
• 今天小編為大家?guī)磉@篇Vue2的核心原理剖析就是為大家介紹我們常用的Vue2他是如何實現(xiàn)的核心內(nèi)容，我們簡單代碼的背后究竟他做了哪些，讓大家能夠 知其然，知其所以然

學習目標：

• 了解Object.defineProperty原理
• 了解set、get關聯(lián)使用
• 了解數(shù)據(jù)反應到識圖的過程
• 了解視圖更換如何影響數(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', {// 當我們訪問data1的name屬性的時候自動調(diào)用的方法// 并且get函數(shù)的返回值就是你拿到的值get() {console.log('你訪問了data1的name屬性')return 'aa'},// 當我們設置修改name屬性的時候自動調(diào)用的函數(shù)// 并且屬性最新的值會被當成實參傳入進來set(newValue) {console.log('你修改了data1的name屬性最新的值為', newValue)// 這個位置 只要你修改了name屬性就會得到執(zhí)行// 所以如果你想要在name變化的時候 完成一些自己的事情// 都可以放到這里來執(zhí)行// 1. ajax()// 2. 操作一塊dom區(qū)域}})// 以上是js中對象定義的另外一種方案，可以在訪問屬性和設置屬性的時候自動調(diào)用對應的函數(shù)// 訪問屬性：data.name data['name'] // 設置屬性：data.name = 'bb' data['name'] = 'bb'</script> 響應式的核心API

get、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中直接返回了一個固定的值,并且set函數(shù)中新值拿到了但是沒有做任何事情// 解決方案：通過聲明一個中間變量,讓get函數(shù)中return出去這個變量// 并且在set函數(shù)中把最新的值設置到這個中間變量身上,起到一個set和get操作的一個// 數(shù)據(jù)的效果</script>

數(shù)據(jù)反應到視圖

數(shù)據(jù)的變化可以引起視圖的變化(通過操作dom把數(shù)據(jù)放到對應的位置上去 如果數(shù)據(jù)變化之后就用數(shù)據(jù)最新的值再重新放一次)

方案一:命令式操作

document.querySelector(’#app’).innerText = data.name

set函數(shù)中重新執(zhí)行一下document.querySelector(’#app’).innerText = data.name

方案二:聲明式渲染
v-text指令的實現(xiàn)

<p v-text="name"></p>

核心邏輯：通過‘模板編譯’找到標記了v-text的元素,然后把對應的數(shù)據(jù)通過操作domapi放上去

<div id="app"><p v-text="name"></p><p></p></app>

1.通過app根元素找到所有的子節(jié)點 （元素節(jié)點，文本節(jié)點…） -> dom.nodeChilds
2.通過節(jié)點類型篩選出元素節(jié)點 （p） -> nodeType 1元素節(jié)點 3文本節(jié)點
3.通過v-text找到需要設置的具體的節(jié)點 <p v-text></p>
4.找到綁定了v-text標記的元素 拿到它身上所有的屬性 id class v-text=“name”
5.通過v-text=“name” 拿到指令類型 ‘v-text’ 拿到需要綁定的數(shù)據(jù)的屬性名 ‘name’
6.判斷當前是v-text指令 然后通過操作domapi 把name屬性對應的值放上去 node.innerText = data[name]
以上整個過程可以稱作‘模板編譯’

視圖的變化反映到數(shù)據(jù)

input元素 v-model雙向綁定 M -> V V -> M

M -> V

1.通過app根元素找到所有的子節(jié)點 （元素節(jié)點，文本節(jié)點…） -> dom.nodeChilds
2.通過節(jié)點類型篩選出元素節(jié)點 （p） -> nodeType 1元素節(jié)點 3文本節(jié)點
3.通過v-text找到需要設置的具體的節(jié)點 <p v-text></p>
4.找到綁定了v-text標記的元素 拿到它身上所有的屬性 id class v-text=“name”
5.通過v-model=“name” 拿到指令類型 ‘v-model’ 拿到需要綁定的數(shù)據(jù)的屬性名 ‘name’
6.判斷當前是v-model指令 然后通過操作domapi 把name屬性對應的值放上去 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})

以上總結：
1.數(shù)據(jù)的響應式
2.數(shù)據(jù)變化影響視圖
3.視圖變化影響數(shù)據(jù)
4.指令是如何實現(xiàn)的(常規(guī)實現(xiàn)邏輯)

優(yōu)化工作：
1.通用的數(shù)據(jù)響應式處理

data(){return {name:'cp',age:28}} 基于現(xiàn)成的數(shù)據(jù),然后都處理成響應式 Object.keys(data) // 由所有的對象的key組成的數(shù)組Object.keys(data).forEach(key=>{// key 屬性名// data[key] 屬性值// data 原對象// 將所有的key都轉(zhuǎn)成get和set的形式defineReactive(data,key,data[key])})function defineReactive(data,key,value){Oject.defineProperty(data, key, {get(){return value},set(newValue){value = newValue}})}

2.發(fā)布訂閱模式
問題：

<div><p v-text="name"></p><p v-text="name"></p><div v-text="age"></div></div>

name發(fā)生變化之后 我需要做的事情是更新倆個p標簽,而現(xiàn)在不管你更新了哪個數(shù)據(jù),所有的標簽都會被重新
操作賦值,無法做到精準更新

解決問題的思路：
1.數(shù)據(jù)發(fā)生變化之后最關鍵的代碼是什么？

node.innerText = data[name]

2.設計一個存儲結構
每一個響應式數(shù)據(jù)可能被多個標簽綁定 是一個‘一對多’的關系

{name: [()=>{ node(p1).innerText = data[name]},()=>{ node(p2).innerText = data[name]}...]}

發(fā)布訂閱（自定義事件） 解決的問題就是 ‘1對多’的問題
實現(xiàn)簡單的發(fā)布訂閱模式：
瀏覽器的事件模型
dom.addEventLister(‘click’,()=>{})
只要調(diào)用click事件，所有綁定的回調(diào)函數(shù)都會執(zhí)行 顯然是一個1對多的關系

const Dep = {map:{},collect(eventName,fn){// 如果從來沒有收集過當前事件就先初始化成數(shù)組if(!this.map[eventName]){this.map[eventName] = []}// 已經(jīng)初始化好了就直接往里面push添加this.map[eventName].push(fn)},trigger(eventName){this.map[eventName].forEach(fn=>fn())}}

使用發(fā)布訂閱模式優(yōu)化現(xiàn)存問題
先前的寫法 不管是哪個數(shù)據(jù)發(fā)生變化我們都是粗暴的執(zhí)行一下compile函數(shù)即可

現(xiàn)在的寫法 我們在compile函數(shù)初次執(zhí)行的時候 完成更新函數(shù)的收集 然后在數(shù)據(jù)變化的時候
通過數(shù)據(jù)的key找到相對應的更新函數(shù) 依次執(zhí)行 達到精準更新的效果

寫在最后

?$原創(chuàng)不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創(chuàng)作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$

看完文章啦 驗證大家對這篇文章的掌握 大家參與下方的投票呦！

總結

以上是生活随笔為你收集整理的Vue2的核心原理剖析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。