摘要:小白一枚,一直使用的是,想要多了解一些其它的框架,正好最近越來越火熱,上的數已經超過了。框架理解說起這個模型,就不得不說框架。函數表示創建一個文本節點,函數表示創建一個數組。
小白一枚,一直使用的是React,想要多了解一些其它的框架,正好最近Vue越來越火熱,Github上的Star數已經超過了React。而其背后蘊含的MVVM框架思想也一直跟React的組件化開發思想并駕齊驅,在這里也是本著兼收并蓄的思想,多了解一種開發模式。因此通過一些學習資料,寫一些自己對MVVM開發思想的理解。
廢話不多說,咱們進入正題。
MVVM框架理解說起這個MVVM模型,就不得不說MVC框架。
將整個前端頁面分成View,Controller,Modal,視圖上發生變化,通過Controller(控件)將響應傳入到Model(數據源),由數據源改變View上面的數據。
整個過程看起來是行云流水,業務邏輯放在Model當中,頁面渲染邏輯放在View當中,但在實際運用上卻存在一個問題:那就是MVC框架允許View和Model直接進行通信!!
換句話說,View和Model之間隨著業務量的不斷龐大,會出現蜘蛛網一樣難以處理的依賴關系,完全背離了開發所應該遵循的“開放封閉原則”。
面對這個問題,MVVM框架就出現了,它與MVC框架的主要區別有兩點:
1、實現數據與視圖的分離
2、通過數據來驅動視圖,開發者只需要關心數據變化,DOM操作被封裝了。
可以看到MVVM分別指View,Model,View-Model,View通過View-Model的DOM Listeners將事件綁定到Model上,而Model則通過Data Bindings來管理View中的數據,View-Model從中起到一個連接橋的作用。
MVVM的實現原理:MVVM的實現主要是三個核心點:
響應式:vue如何監聽data的屬性變化
模板解析:vue的模板是如何被解析的
渲染:vue模板是如何被渲染成HTML的
響應式:對于MVVM來說,data一般是放在一個對象當中,就比如這樣:
</>復制代碼
var obj = {
name: "zhangsan",
age: 25
}
當我們訪問或修改obj的屬性的時候,比如:
</>復制代碼
console.log(obj.name) //訪問
obj.age = 22 //修改
但是這樣的操作vue本身是沒有辦法感知到的,那么應該如何讓vue知道我們進行了訪問或是修改的操作呢?
那就要使用Object.defineProperty
</>復制代碼
var vm = {}
var data = {
name: "zhangsan",
age: 20
}
var key, value
for (key in data) {
(function (key) {
Object.defineProperty(vm, key, {
get: function () {
console.log("get", data[key]) // 監聽
return data[key]
},
set: function (newVal) {
console.log("set", newVal) // 監聽
data[key] = newVal
}
})
})(key)
}
通過Object.defineProperty將data里的每一個屬性的訪問與修改都變成了一個函數,在函數get和set中我們即可監聽到data的屬性發生了改變。
模板解析:首先模板是什么?
模板本質上是一串字符串,它看起來和html的格式很相像,實際上有很大的區別,因為模板本身還帶有邏輯運算,比如v-if,v-for等等,但它最后還是要轉換為html來顯示。
</>復制代碼
- {{item}}
模板在vue中必須轉換為JS代碼,原因在于:在前端環境下,只有JS才是一個圖靈完備語言,才能實現邏輯運算,以及渲染為html頁面。
這里就引出了vue中一個特別重要的函數——render
render函數中的核心就是with函數。
</>復制代碼
with函數將某個對象添加到作用域鏈的頂部,如果在 statement中有某個未使用命名空間的變量,跟作用域鏈中的某個屬性同名,則這個變量將指向這個屬性值。
舉個例子:
</>復制代碼
var obj = {
name: "zhangsan",
age: 20,
getAddress: function () {
alert("beijing")
}
}
function fn1() {
with(obj) {
alert(age)
alert(name)
getAddress()
}
}
fn1()
with將obj這個對象放在了自己函數的作用域鏈的頂部,當執行下列函數時,就會自動到obj這個對象去尋找同名的屬性。
而在render函數中,with的用法是這樣:
</>復制代碼
- {{item}}
</>復制代碼
// 對應的js文件
var data = {
title: "",
list: []
}
// 初始化 Vue 實例
var vm = new Vue({
el: "#app",
data: data,
methods: {
add: function () {
this.list.push(this.title)
this.title = ""
}
}
})
with(this){ // this 就是 vm
return _c(
"div",
{
attrs:{"id":"app"}
},
[
_c(
"div",
[
_c(
"input",
{
directives:[
{
name:"model",
rawName:"v-model",
value:(title),
expression:"title"
}
],
domProps:{
"value":(title)
},
on:{
"input":function($event){
if($event.target.composing)return;
title=$event.target.value
}
}
}
),
_v(" "),
_c(
"button",
{
on:{
"click":add
}
},
[_v("submit")]
)
]
),
_v(" "),
_c("div",
[
_c(
"ul",
_l((list),function(item){return _c("li",[_v(_s(item))])})
)
]
)
]
)
}
在一開始,因為new操作符,所以this指向了vm,通過with我們將vm這個對象放在作用域鏈的頂部,因為在函數內部我們會多次調用vm內部的屬性,所以使用with可以縮短變量長度,提供系統運行效率。
其中的_c函數表示的是創建一個新的html元素,其基本用法為:
</>復制代碼
_c(element,{attrs},[children...])
其中的element表示所要創建的html元素類型,attrs表示所要創建的元素的屬性,children表示該html元素的子元素。
_v函數表示創建一個文本節點,_l函數表示創建一個數組。
最終render函數返回的是一個虛擬DOM。
如何將模板渲染為html模板渲染為html分為兩種情況,第一種是初次渲染的時候,第二種是渲染之后數據發生改變的時候,它們都需要調用updateComponent,其形式如下:
</>復制代碼
vm._update(vnode){
const prevVnode = vm._vnode
vm._vnode = vnode
if (!prevVnode){
vm.$el = vm.__patch__(vm.$el,vnode)
} else {
vm.$el = vm.__patch__(prevVnode,vnode)
}
}
function updateComponent(){
vm._update(vm._render())
}
首先讀取當前的虛擬DOM——vm._vnode,判斷其是否為空,若為空,則為初次渲染,將虛擬DOM全部渲染到所對應的容器當中(vm.$el),若不為空,則是數據發生了修改,通過響應式我們可以監聽到這一情況,使用diff算法完成新舊對比并修改。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96625.html
摘要:在模式中一般把層算在層中,只有在理想的雙向綁定模式下,才會完全的消失。層將通過特定的展示出來,并在控件上綁定視圖交互事件,一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數據驅動型的框架及是雙向數據綁定是單向數據綁定。 MVVM相關概念 1) MVVM典型特點是有四個概念:Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...
摘要:實現訂閱中心和之間通信的橋梁是訂閱中心,其主要職責是在自身實例化時往屬性訂閱器里面添加自己,與建立連接自身必須有一個方法,與建立連接當屬性變化時,中通知,然后能調用自身的方法,并觸發中綁定的回調,實現更新。 一. 什么是mvvm MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化,讓我們將視圖 UI...
閱讀 1632·2021-10-14 09:43
閱讀 5537·2021-09-07 10:21
閱讀 1282·2019-08-30 15:56
閱讀 2131·2019-08-30 15:53
閱讀 1237·2019-08-30 15:44
閱讀 2014·2019-08-30 15:44
閱讀 1325·2019-08-29 17:24
閱讀 758·2019-08-29 15:19