簡(jiǎn)述Vue的響應(yīng)式原理（vue的響應(yīng)式原理描述）
本篇文章給大家談?wù)労?jiǎn)述Vue的響應(yīng)式原理，以及vue的響應(yīng)式原理描述對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、解析vue響應(yīng)式原理
- 2、vue2響應(yīng)式原理總結(jié)
- 3、vue2數(shù)據(jù)響應(yīng)式原理
- 4、能說說vue的響應(yīng)式原理嗎？
- 5、Vue3.0 響應(yīng)式原理
- 6、vue數(shù)組響應(yīng)式原理
解析vue響應(yīng)式原理
import Dep from './dep'
import VNode from '../vdom/vnode'
import { arrayMethods } from './array'
import {
? def,
? warn,
? hasOwn,
? hasProto,
? isObject,
? isPlainObject,
? isPrimitive,
? isUndef,
? isValidArrayIndex,
? isServerRendering
} from '../util/index'
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
/**
* In some cases we may want to disable observation inside a component's
* update computation.
*/
export let shouldObserve: boolean = true
export function toggleObserving (value: boolean) {
? shouldObserve = value
}
/**
* Observer class that is attached to each observed
* object. Once attached, the observer converts the target
* object's property keys into getter/setters that
* collect dependencies and dispatch updates.
*/
export class Observer {
? value: any;
? dep: Dep;
? vmCount: number; // number of vms that have this object as root $data
? constructor (value: any) {
? ? this.value = value
? ? this.dep = new Dep()
? ? this.vmCount = 0
? ? def(value, '__ob__', this)
? ? if (Array.isArray(value)) {
? ? ? if (hasProto) {
? ? ? ? protoAugment(value, arrayMethods)
? ? ? } else {
? ? ? ? copyAugment(value, arrayMethods, arrayKeys)
? ? ? }
? ? ? this.observeArray(value)
? ? } else {
? ? ? this.walk(value)
? ? }
? }
? /**
? * Walk through all properties and convert them into
? * getter/setters. This method should only be called when
? * value type is Object.
? */
? walk (obj: Object) {
? ? const keys = Object.keys(obj)
? ? for (let i = 0; i keys.length; i++) {
? ? ? defineReactive(obj, keys[i])
? ? }
? }
? /**
? * Observe a list of Array items.
? */
? observeArray (items: Array) {
? ? for (let i = 0, l = items.length; i l; i++) {
? ? ? observe(items[i])
? ? }
? }
}
// helpers
/**
* Augment a target Object or Array by intercepting
* the prototype chain using __proto__
*/
function protoAugment (target, src: Object) {
? /* eslint-disable no-proto */
? target.__proto__ = src
? /* eslint-enable no-proto */
}
/**
* Augment a target Object or Array by defining
* hidden properties.
*/
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array) {
? for (let i = 0, l = keys.length; i l; i++) {
? ? const key = keys[i]
? ? def(target, key, src[key])
? }
}
/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
*/
export function observe (value: any, asRootData: ?boolean): Observer | void {
? if (!isObject(value) || value instanceof VNode) {
? ? return
? }
? let ob: Observer | void
? if (hasOwn(value, '__ob__') value.__ob__ instanceof Observer) {
? ? ob = value.__ob__
? } else if (
? ? shouldObserve
? ? !isServerRendering()
? ? (Array.isArray(value) || isPlainObject(value))
? ? Object.isExtensible(value)
? ? !value._isVue
? ) {
? ? ob = new Observer(value)
? }
? if (asRootData ob) {
? ? ob.vmCount++
? }
? return ob
}
/**
* Define a reactive property on an Object.
*/
export function defineReactive (
? obj: Object,
? key: string,
? val: any,
? customSetter?: ?Function,
? shallow?: boolean
) {
? const dep = new Dep()
? const property = Object.getOwnPropertyDescriptor(obj, key)
? if (property property.configurable === false) {
? ? return
? }
? // cater for pre-defined getter/setters
? const getter = property property.get
? const setter = property property.set
? if ((!getter || setter) arguments.length === 2) {
? ? val = obj[key]
? }
? let childOb = !shallow observe(val)
? Object.defineProperty(obj, key, {
? ? enumerable: true,
? ? configurable: true,
? ? get: function reactiveGetter () {
? ? ? const value = getter ? getter.call(obj) : val
? ? ? if (Dep.target) {
? ? ? ? dep.depend()
? ? ? ? if (childOb) {
? ? ? ? ? childOb.dep.depend()
? ? ? ? ? if (Array.isArray(value)) {
? ? ? ? ? ? dependArray(value)
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? return value
? ? },
? ? set: function reactiveSetter (newVal) {
? ? ? const value = getter ? getter.call(obj) : val
? ? ? /* eslint-disable no-self-compare */
? ? ? if (newVal === value || (newVal !== newVal value !== value)) {
? ? ? ? return
? ? ? }
? ? ? /* eslint-enable no-self-compare */
? ? ? if (process.env.NODE_ENV !== 'production' customSetter) {
? ? ? ? customSetter()
? ? ? }
? ? ? // #7981: for accessor properties without setter
? ? ? if (getter !setter) return
? ? ? if (setter) {
? ? ? ? setter.call(obj, newVal)
? ? ? } else {
? ? ? ? val = newVal
? ? ? }
? ? ? childOb = !shallow observe(newVal)
? ? ? dep.notify()
? ? }
? })
}
/**
* Set a property on an object. Adds the new property and
* triggers change notification if the property doesn't
* already exist.
*/
export function set (target: Array | Object, key: any, val: any): any {
? if (process.env.NODE_ENV !== 'production'
? ? (isUndef(target) || isPrimitive(target))
? ) {
? ? warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
? }
? if (Array.isArray(target) isValidArrayIndex(key)) {
? ? target.length = Math.max(target.length, key)
? ? target.splice(key, 1, val)
? ? return val
? }
? if (key in target !(key in Object.prototype)) {
? ? target[key] = val
? ? return val
? }
? const ob = (target: any).__ob__
? if (target._isVue || (ob ob.vmCount)) {
? ? process.env.NODE_ENV !== 'production' warn(
? ? ? 'Avoid adding reactive properties to a Vue instance or its root $data ' +
? ? ? 'at runtime - declare it upfront in the data option.'
? ? )
? ? return val
? }
? if (!ob) {
? ? target[key] = val
? ? return val
? }
? defineReactive(ob.value, key, val)
? ob.dep.notify()
? return val
}
/**
* Delete a property and trigger change if necessary.
*/
export function del (target: Array | Object, key: any) {
? if (process.env.NODE_ENV !== 'production'
? ? (isUndef(target) || isPrimitive(target))
? ) {
? ? warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
? }
? if (Array.isArray(target) isValidArrayIndex(key)) {
? ? target.splice(key, 1)
? ? return
? }
? const ob = (target: any).__ob__
? if (target._isVue || (ob ob.vmCount)) {
? ? process.env.NODE_ENV !== 'production' warn(
? ? ? 'Avoid deleting properties on a Vue instance or its root $data ' +
? ? ? '- just set it to null.'
? ? )
? ? return
? }
? if (!hasOwn(target, key)) {
? ? return
? }
? delete target[key]
? if (!ob) {
? ? return
? }
? ob.dep.notify()
}
/**
* Collect dependencies on array elements when the array is touched, since
* we cannot intercept array element access like property getters.
*/
function dependArray (value: Array) {
? for (let e, i = 0, l = value.length; i l; i++) {
? ? e = value[i]
? ? e e.__ob__ e.__ob__.dep.depend()
? ? if (Array.isArray(e)) {
? ? ? dependArray(e)
? ? }
? }
}
深圳網(wǎng)站建設(shè)
vue2響應(yīng)式原理總結(jié)
vue組件實(shí)例化時(shí)，會(huì)對(duì)data屬性深度遍歷（遇到數(shù)組或者對(duì)象）為每一個(gè)屬性添加數(shù)據(jù)劫持。數(shù)據(jù)劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。
在這個(gè)過程中會(huì)實(shí)例化一個(gè)Dep類。
1.在get攔截器里觸發(fā)dep實(shí)例的depend方法,進(jìn)行依賴收集，實(shí)質(zhì)是在dep的實(shí)例屬性sub數(shù)組中添加依賴這個(gè)屬性的watcher實(shí)例。
2.在set攔截器里觸發(fā)dep實(shí)例的notify方法，對(duì)收集到的所有依賴派發(fā)更新，（watcher的update方法）
vue組件實(shí)例化時(shí)會(huì)實(shí)例化一個(gè)渲染watcher,渲染watcher實(shí)例化過程會(huì)做兩件事情。
1.創(chuàng)建vnode,在這個(gè)過程中，訪問了data屬性，觸發(fā)了get方法，完成了依賴收集。
2.觸發(fā)了子組件的實(shí)例化，子組件實(shí)例化又會(huì)重復(fù)上述數(shù)據(jù)劫持的過程。
這個(gè)過程就是對(duì)組件樹的深度遍歷。
結(jié)合組件生命周期來看整個(gè)過程，父組件會(huì)先觸發(fā)created鉤子，子組件后觸發(fā)created鉤子。而子組件mouted鉤子會(huì)先執(zhí)行，父組件的mouted鉤子后執(zhí)行。
分步驟記憶
1、實(shí)現(xiàn)頁面不刷新的原理
2、頁面視圖刷新的原理
實(shí)現(xiàn)頁面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。
1.hash(哈希模式)，#符號(hào)后邊是瀏覽器行為，在改變的時(shí)候不對(duì)頁面進(jìn)行刷新（重新請(qǐng)求URL）（監(jiān)聽hashChange事件）
2.history模式，H5新增了pushState，replaceState連個(gè)新API,可以修改歷史記錄卻不會(huì)使瀏覽器刷新頁面。
視圖更新原理
其原理就是vue的響應(yīng)式更新dom的原理，m = v
m是數(shù)據(jù)，也就是在vue-router install時(shí)在根組件（root vue component）添加了_route屬性，在匹配到對(duì)應(yīng)路由后更新了_route屬性值，繼而觸發(fā)了該屬性值的渲染watcher,在繼而觸發(fā)dom更新。
兩種模式的不同
1.部署時(shí)，history模式需要服務(wù)端處理所有可能的路徑（例如配置nginx的配置文件），防止出現(xiàn)404。哈希模式則不需要。
2.URL表示不同。
v-model指令就是 v-bind:value 和 @input 的語法糖。
它即可以支持原生表單元素，也可以支持自定義組件
在自定義組件中其實(shí)際是這樣的：
它的實(shí)現(xiàn)通過自定義render函數(shù), 緩存了 vnode
Vue 在更新 DOM 時(shí)是異步執(zhí)行的，只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。
如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。在緩沖時(shí)會(huì)去除重復(fù)數(shù)據(jù)避免不必要的計(jì)算和 DOM 操作。
$nextTick(cb) 目的是在DOM 更新完成后傳入的回調(diào)函數(shù)再被調(diào)用。
vue2數(shù)據(jù)響應(yīng)式原理
vue2響應(yīng)式原理由 Observer 類， Dep 類和 Watcher 類互相調(diào)用實(shí)現(xiàn)， Observer 類是把一個(gè)普通的object類變成每一層都能相應(yīng)的類， Dep 類的作用是添加，移除，通知和收集訂閱者， Watcher 類是訂閱者，主要功能是把當(dāng)數(shù)據(jù)改變的時(shí)候，去調(diào)用回調(diào)函數(shù)，修改dom節(jié)點(diǎn)
那么是怎么實(shí)現(xiàn)響應(yīng)式的呢，首先是一個(gè)函數(shù)，要先轉(zhuǎn)換為可響應(yīng)的，那就需要用到 Observer 類
這個(gè) observe 函數(shù)就是對(duì) Observer 類做多了一層封裝
而 Observer 類是通過 Object.defineProperty 來監(jiān)控?cái)?shù)據(jù)的獲取和改變的
關(guān)鍵在于 defineReactive 方法，這個(gè)方法是對(duì) Object.defineProperty 做了一層封裝，并且對(duì)對(duì)象的每一層做遞歸調(diào)用，實(shí)現(xiàn)了每一層都有響應(yīng)監(jiān)控
但是是怎么知道現(xiàn)在要保存哪一個(gè) Watcher 實(shí)例到訂閱者數(shù)組里面的呢？其實(shí)就是用了這個(gè) Dep.target ， Dep.target 相當(dāng)于 window.target ，全局只有一個(gè)，全局也能訪問
首先得先講一講 Watcher 類，我們先回到上面的index.js，對(duì)象要讓 Watcher 類進(jìn)行監(jiān)聽，而 Watcher 有3個(gè)參數(shù)，第一個(gè)是監(jiān)聽的對(duì)象，第二個(gè)是監(jiān)聽的屬性，比如 a.b.c.d ，第三個(gè)是屬性改變后觸發(fā)的回調(diào)函數(shù)
先來講一下 parsePath ，這個(gè)在工具類里，作用是訪問 a.b.c.d 這種鏈?zhǔn)綄傩?/p>
首先是觸發(fā)了 Watcher 的 get() 方法，把當(dāng)前實(shí)例保存在了 Dep.target 里面
然后在調(diào)用 parsePath 獲取屬性值的過程中，會(huì)挨個(gè)訪問響應(yīng)對(duì)象的屬性，就會(huì)觸發(fā)相應(yīng)的 getter ，我們回到 defineReactive.js ，可以發(fā)現(xiàn)這時(shí)候相應(yīng)屬性的 getter 就會(huì)把 Dep.target 也就是相應(yīng)的 Watcher 的實(shí)例保存在了 Dep 類的訂閱者數(shù)組里面
最后，在改變屬性的時(shí)候，相應(yīng)屬性的 setter 就會(huì)通知之前已經(jīng)保存的訂閱者數(shù)組，遍歷觸發(fā)回調(diào)
能說說vue的響應(yīng)式原理嗎？
Vue 是一個(gè) MVVM 框架，核心是雙向數(shù)據(jù)綁定，VM（視圖模型）是作為 V（視圖） 和 M（模型）的橋梁。下面是對(duì) Vue 響應(yīng)式（雙向數(shù)據(jù)綁定）的理解，如果錯(cuò)誤盡請(qǐng)指出，一起交流，共同進(jìn)步。
Vue響應(yīng)式原理核心是 數(shù)據(jù)劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。從一個(gè)例子出發(fā)：
首先，在Vue初始化階段，通過 observer 對(duì) data 中的屬性進(jìn)行遞歸的劫持，包括 name、job_ undergo、a、b等
在 get階段也就是初始化視圖時(shí)，為每一個(gè)劫持的屬性分配一個(gè) 依賴收集器，主要收集當(dāng)前屬性的觀察者對(duì)象，例子中 name 屬性在模板中有兩處被使用，那么 name 屬性的依賴收集器中就存放兩個(gè)觀察者對(duì)象
當(dāng)點(diǎn)擊按鈕時(shí)，將 name 修改為 lisi 時(shí)，會(huì)觸發(fā) observer 的 setter 函數(shù)，將 value 更新為 lisi 最新值，然后通知依賴收集器數(shù)據(jù)發(fā)生了更新。
依賴收集就是發(fā)布訂閱模式，依賴收集器會(huì)通知所有的觀察者對(duì)象，當(dāng)前name 屬性有兩個(gè)觀察者對(duì)象。
觀察者對(duì)象調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行相關(guān)的處理和DOM更新
以上是純響應(yīng)式原理的分析和總結(jié)，下面配一張流程圖：
Vue3.0 響應(yīng)式原理
Vue3 使用 Proxy 對(duì)象重寫響應(yīng)式系統(tǒng)，這個(gè)系統(tǒng)主要有以下幾個(gè)函數(shù)來組合完成的：
1、reactive:
接收一個(gè)參數(shù)，判斷這參數(shù)是否是對(duì)象。不是對(duì)象則直接返回這個(gè)參數(shù)，不做響應(yīng)式處理
創(chuàng)建攔截器對(duì)象 handler, 設(shè)置 get/set/deleteProperty
get
收集依賴（track）
返回當(dāng)前 key 的值。
如果當(dāng)前 key 的值是對(duì)象，則為當(dāng)前 key 的對(duì)象創(chuàng)建攔截器 handler, 設(shè)置 get/set/deleteProperty
如果當(dāng)前的 key 的值不是對(duì)象，則返回當(dāng)前 key 的值
set
設(shè)置的新值和老值不相等時(shí)，更新為新值，并觸發(fā)更新（trigger）
deleteProperty
當(dāng)前對(duì)象有這個(gè) key 的時(shí)候，刪除這個(gè) key 并觸發(fā)更新（trigger）
返回 Proxy 對(duì)象
2、effect: 接收一個(gè)函數(shù)作為參數(shù)。作用是：訪問響應(yīng)式對(duì)象屬性時(shí)去收集依賴
3、track:
接收兩個(gè)參數(shù)：target 和 key
如果沒有 activeEffect，則說明沒有創(chuàng)建 effect 依賴
如果有 activeEffect，則去判斷 WeakMap 集合中是否有 target 屬性，
WeakMap 集合中沒有 target 屬性，則 set(target, (depsMap = new Map()))
WeakMap 集合中有 target 屬性，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性
depsMap 中沒有 key 屬性，則 set(key, (dep = new Set()))
depsMap 中有 key 屬性，則添加這個(gè) activeEffect
4、trigger:
判斷 WeakMap 中是否有 target 屬性
WeakMap 中沒有 target 屬性，則沒有 target 相應(yīng)的依賴
WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環(huán)觸發(fā)收集的 effect()
vue數(shù)組響應(yīng)式原理
vue2中Object.defineProperty響應(yīng)式只對(duì)對(duì)象有效，對(duì)數(shù)組無效，所以對(duì)數(shù)組做額外處理。我們知道，會(huì)改變數(shù)組本身的方法只有7個(gè)：sort, push, pop, slice, splice, shift, unshift,所以可以通過重寫這些方法來達(dá)到數(shù)組響應(yīng)式
解決方案：
1. 找到數(shù)組原型
2. 覆蓋那些能夠修改數(shù)組的更新方法，讓他們?cè)谛薷臄?shù)組同時(shí)，還可以通知更新
3. 將得到的新的原型設(shè)置到數(shù)組實(shí)例原型上
4. 對(duì)數(shù)組內(nèi)部元素實(shí)現(xiàn)響應(yīng)式
// 實(shí)現(xiàn)數(shù)組響應(yīng)式// 1. 替換數(shù)組原型中7個(gè)方法constoriginalProto=Array.prototype// 克隆體原數(shù)組原型constarrayProto=Object.create(originalProto)// 可修改數(shù)組的7個(gè)方法 , 'sort'constchangeMethods=['push','pop','shift','unshift','slice','splice','sort']//? 2. 在克隆的原型上，覆蓋那些能夠修改數(shù)組的更新方法，讓他們?cè)谛薷臄?shù)組同時(shí)，還可以通知更新changeMethods.forEach(method={arrayProto[method]=function(){// 進(jìn)行原始操作originalProto[method].apply(this,arguments)// 覆蓋操作：增加更新通知console.log(`數(shù)組正在執(zhí)行${method}方法`);}})// 對(duì)象響應(yīng)化functiondefineReactive(obj,key,value){Object.defineProperty(obj,key,{get(){console.log('獲取'+key);returnvalue},set(newVal){if(newVal!==value){// console.log(newVal);// console.log(JSON.stringify(obj[key]));console.log(`正在改變${key}值:從${obj[key]}變?yōu)?{newVal}`)value=newVal}}})}functionobserver(obj){// 不是對(duì)象或者為null，不做響應(yīng)式，結(jié)束if(typeofobj!=='object'||obj===null)return;// 如果是數(shù)組，修改其實(shí)例的原型if(Array.isArray(obj)){// 3. 將得到的新的原型設(shè)置到數(shù)組實(shí)例原型上obj.__proto__=arrayProto// 4. 對(duì)數(shù)組內(nèi)的元素，同樣進(jìn)行響應(yīng)化for(leti=0;iobj.length;i++){// console.log(obj[i]);observer(obj[i])}// 如果是對(duì)象}else{Object.keys(obj).forEach(key={console.log(obj,key,obj[key]);defineReactive(obj,key,obj[key])})}}obj=[{a:1},2,7,5,3]observer(obj)obj.push(4)// 數(shù)組正在執(zhí)行push方法obj.pop()// 數(shù)組正在執(zhí)行pop方法obj[0].a=2// 獲取a? ? // 正在改變a值:從1變?yōu)?obj.sort()// 數(shù)組正在執(zhí)行sort方法console.log(obj);// [ 2, 3, 5, 7, { a: [Getter/Setter] } ]console.log(obj[4].a);// 獲取a? // 2
鏈接：
關(guān)于簡(jiǎn)述Vue的響應(yīng)式原理和vue的響應(yīng)式原理描述的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
