vue 的認識與介紹

今天來總結一些我對vue的認識與介紹,可能有時候我們可以不用對一個框架去有很深的認識,就可以去完成我們的工作,但是對於一個框架有基礎的理解對我們開發和學習是很有幫助的,讓我們很清楚的知道這個框架是做什麼的,我們該用來做些什麼。

一、漸進式框架Vue

  1. 什麼是漸進式框架。

vue官網說:Vue.js(讀音 /vjuː/,類似於 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。
漸進式我個人理解就是階梯式向前。vue是輕量級的,它有很多獨立的功能或庫,我們會根據我們的項目來選用vue的一些功能。就像我們開發項目時如果只用到vue的聲明式渲染,我就只用vue的聲明渲染,而我們要用他的組件系統,我們可以引用它的組件系統。
vue的漸進式表現爲:

聲明式渲染——組件系統——客戶端路由——-大數據狀態管理——-構建工具

二、vue中兩個核心點

1.響應式數據綁定
當數據發生變化是,vue自動更新視圖
它的原理是利用了 Object.definedProperty 中的setter/getter 代理數據,監控對數據的操作。(這也是爲什麼vue不支持ie8 以及更早的ie瀏覽器的原因)

2.組合的視圖組件

  • ui頁面映射爲組件書

  • 劃分組件可維護、可重用、可測試

    這裏寫圖片描述

三、虛擬DOM

  1. js的運行速度已經很快了,然而大量的DOM 操作就會變得很慢,但是前端本身就是要通過JS處理DOM 來更新視圖數據的。 這樣在更新數據後會重新渲染頁面,這樣就造成在沒有改變數據的地方也重新渲染了DOM節點。這樣性能方面就會很受影響。

    利用在內存中生成與真實DOM與之對應的數據結構,這個在內存中生成的結構稱之爲虛擬DOM。
    當數據發生變化時,能夠智能的計算出重新渲染組件的最小代價並應用到DOM操作上。vue就是利用了這一點。(vue 渲染組件的步驟圖:)

vue 渲染組件的步驟圖

四、MVVM模式

可能你經常聽說MVC 模式 和MVVM 模式。
angular 就是所謂的 MVC 模式的框架,model 、view、controller。
而vue 是 MVVM 模式的框架,即
M: model (數據層,也就是指數據(前端是js))
V:view ( 也就是指DOM層 或用戶界面 )
VM : view-model (處理數據和界面的中間層,也就是指Vue)

vue 的 MVVM 模型圖

五、Vue實例

每一個應用都是通過Vue 這個構造函數來創建根實例啓動的(new Vue()
構造函數中需要傳入一些選項對象。包含掛在元素、數據、模板、方法等等、
這些只是一部風API ,更多API請關注:https://cn.vuejs.org/v2/api/

六、聲明式渲染(命令式渲染)

渲染時分爲 聲明式渲染命令式渲染
1. Vue 是聲明式渲染的,
也就是 只需要關心 聲明在哪裏(where) 做什麼(what),而不需要關心是如何實現的(how)
2.命令式渲染
需要通過具體的代碼表達在哪裏(where) 做什麼(what),如何實現(how)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章