vue深入響應式原理

資料模型 —》 vm（建立的例項 new vue()）中的data選項

狀態管理

什麼叫做狀態？什麼叫做狀態管理？

我們使用乙個資料去管理檢視中的乙個部分，那麼這條資料就叫做狀態，這種管理模式就叫做狀態管理

物件的建立：

1. var obj = {}

2. var obj = new object()

深入響應式原理：

1.當檢視模型（vm）中的資料模型（m）發生改變時，檢視（v）就會進行更新

2.vue通過watcher將data中的屬性全部使用object.definepropery程式設計getter和setter,當屬性值發生改變的時候，就會觸發，然後watcher就會觸發，告訴檢視（v）進行重新渲染

3.資料必須放在data選項中才能進行深入響應式

底層原理：

核心使用的是es5的乙個方法,這個方法不支援ie8以及以下

object.defineproperty(obj,obj.attr,descriptor)

引數：obj

要在其上定義屬性的物件。

obj.attr

要定義或修改的屬性的名稱。

descriptor

將被定義或修改的屬性描述符。它是乙個物件，這個物件有哪些構成？

configurable：決定了物件的key是否可刪除

enumerable：決定了物件是否可遍歷（列舉）

writeable: 決定了物件的key的value是否可修改

儲存器：

get函式 ----起了個名字getter 設定當前物件的key的初始值

set函式 ----起了個名字setter 修改當前物件的key的值

var vm =
newvue(}
,methods:},
watch:}}
)

需求：例項中data外的資料就要它響應

解決：將非響應式屬性合併到響應式屬性身上

vue.set(vm.someobj,prop,value)

this.$set(vm.someobj,prop,value)

問題： vue.set底層源**？

分析：將乙個物件（key , value）合併另乙個物件身上

解決：物件的合併： object.assign(目標物件，當前物件)

var obj =
object.
defineproperty
(obj,
'name',,
set(value)
// 監聽機制})
obj.name =
'wyx'

效果

資料改，檢視更

檢視改，資料更

實現使用v-model實現

缺點v-model預設繫結value屬性，所以v-model只能在表單使用

原理為什麼資料能直接在檢視顯示v-model預設繫結了dom物件的value屬性，當它初次繫結的時候，就會觸發getter,watcher就會觸發， watcher通知vue生成新的vdom樹，再通過render函式進行渲染,生成真實dom

為什麼檢視修改資料就會修改當檢視修改是，意味著dom的value屬性值改變，就會觸發setter,watcher監聽機制就會執行watcher通知vue生成新的vdom樹，再通過render函式進行渲染,生成真實dom

作用：用來監聽資料的變換，當資料模型（data選項 m）發生改變時， watch就會觸發

使用兩種用法：

key的value值是乙個函式普通玩家

new
vue(}}
)

key的value值是乙個物件主播/職業玩家

new
vue(
// 監聽的處理函式 }}
})

watch中的key指的就是data選項中key

例子：第一種用法：

業務：當我寫好姓和名，全稱自動顯示

html:
>
姓： "text" v-model =
"firstname"
>
<
/div>
名： "text" v-model =
"lastname"
>
<
/div>
全稱;"text" v-model =
"fullname"
>
<
/div>
<
/div>
js:new
vue(
,   watch:
,lastname
(val)
,fullname
(val)}}
)

第二種用法：

html:
>
<
/div>
js:new
vue(
,   	watch:}}
})

業務：當我寫好姓和名，全稱自動顯示

目的：對比 watch vs computed vs methods

methods: 事件

computed:

有邏輯要像變數一樣使用，這個時候選computed

watch:

有非同步操作

開銷較大

vue深入響應式原理

vue深入響應式原理

Vue響應式原理深入解析

vue深入響應式原理及雙向繫結原理

vue深入響應式原理

vue深入響應式原理

Vue響應式原理深入解析

vue深入響應式原理及雙向繫結原理

相關推薦