Vue與Angular的比較,Vue的單向資料流注意點
在學習vue之前,想必大家對於網頁還是有一定的瞭解的,在效能方面,vue更能夠讓大家容易接受。這裡我們先比較一下現在主流的開發工具。
現在主流的開發工具有:Vue
、React
、Angular
等。
這裡我們只比較Vue和Angular
Vue與Angular的比較:
在Vue中,有許多方法和Angular相似,這主要是因為Angular是Vue早期開發的靈感來源。然而,Augular中存在許多問題,在Vue中已經得到解決。
在API中
Vue相比Angular更加的簡練在資料的繫結方面
Vue的方法是在不同元件間使用了單項資料流(引用型別除外
),很好的處理了主模組中的資料沒有被汙染。而Angular使用的是雙向資料繫結在效能方面
在Vue方面,很容易就可以進行優化,因為它不需要使用到髒查詢
而Angular則不同,它使用到了髒查詢,而隨著我們使用的watcher使用的越多,就需要重新計算。如果watcher涉及到了其他的更新操作,那麼髒查詢可能就需要更多。更有可能使用到許多不常用的技術,讓你去查詢API文件,從這點上看我更喜歡Vuejs
好了,比較就到這裡。現在開始介紹一下Vue的一些基礎功能。
首先,我們需要使用到的是用一個簡潔的模板來宣告式的允許Vue將資料進行DOM渲染操作。
HTML:
<!-- Vue例項最外層 -->
<div id="app">
<!-- 和angularjs一樣,使用 {{}}包裹變數 -->
<h1>{{hello}}</h1>
</div>
JAVASCRIPT:
// 建立模板對應的例項
var app = new Vue({
el : '#app',//el:elements Vue對應的根標籤
data : {//對應的資料
hello : ' Hello Vue! '
}
})
Vue中的方法大多與Angular中的相似,就像v-model和ng-model都是一樣的雙向資料繫結:
<div id="app2">
<!-- 使用v-model可以進行資料的雙向繫結 -->
<input type="text" v-model="name">
<h1>{{name}}</h1>
</div>
//javascipt:
var vm2 = new Vue({
el: '#app2',
data : {
name : 'xiaoming'
}
})
在這裡許多與Angular的方法我就不一一舉例了,
我們現在來看一下什麼是Vue的單向資料流:
在Vue中,向其他的例項傳遞資料的話需要使用到props,而props傳入的值為布林型別,數值型別或是字元型別等的話,在主資料中顯示的依舊是起先傳入的值。
但是,如果傳入的是引用型別的話,那麼主資料就會隨著你這個例項中的值改變而改變。
這裡要想講清這個概念的話就必須要說道棧問題了,在瀏覽器中,如果你要使用引用型別以外的型別的話,瀏覽器會劃分兩個不同的區域,來承接其資料,而賦值時只會進行一次賦值操作,所以說如果我們在其賦值操作後給其中一個重新賦值,那麼它們兩個變數就不會相等。
var a = 10;
var b = a;
a = 20;
console.log(b,a);
//10,20
而引入型別則不同,它在瀏覽器劃分區域時,如果兩個變數指向的是同一個區域,所以它們的值進行了一個相等的賦值後,那麼這兩個的值一致相等。
var arr1 = [1,2,3,4,5];
var arr2 = arr1;
arr2.splice(1,1);
console.log(arr1,arr2);
//[1, 3, 4, 5] [1, 3, 4, 5]
所以說這裡需要注意的一點。
相關推薦
Vue與Angular的比較,Vue的單向資料流注意點
在學習vue之前,想必大家對於網頁還是有一定的瞭解的,在效能方面,vue更能夠讓大家容易接受。這裡我們先比較一下現在主流的開發工具。 現在主流的開發工具有:Vue、React、Angular等。 這裡我們只比較Vue和Angular Vue與Ang
前端框架angular, react, Vue區別與特點
框架用來解決什麼的? Angular,React,Vue,這三者其實面對的是同一個領域,那就是Web應用。 這三者中,Angular的適用領域相對窄一些,React可以拓展到服務端,移動端Native部分,而Vue因為比較輕量,還能用於業務場景非常輕的頁面中。 在Web
angular.js,vue.js,react.js的比較
近幾年前端的技術發展很快,細分下來,主要可以分成四個方面: 1.開發語言技術,主要是ES6&7,coffeescript,typescript等; 2.開發框架,如Angular,React,Vue.js,Angular2等;
Vue元件之單向資料流
子元件能夠通過自身的props選項獲取父元件上的資料,但是在預設情況下,props是單向繫結的---當父元件資料(屬性)發生變化的時候會傳遞給子元件,引起子元件的變化,但不能反過來並且不允許子元件直接改變父元件的資料,會報錯的。例如: 也就是說當通過一種方法改變父元件資料的時候,子元件與之相
vue react angular比較
VUE Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與單檔案元件和 Vue 生
vue學習十一(prop傳不同值、 v-bind 動態賦值、單向資料流、prop校驗)
區域性註冊 在這些情況下,你可以通過一個普通的 JavaScript 物件來定義元件: var ComponentA = { /* ... */ } 然後在 components 選項中定義你想要使用的元件: new Vue({ el: '#app',
你必須知道的React的知識點:單向資料流,高效能虛擬DOM,元件間的資料互動,事件與資料的雙向繫結,生命週期鉤子,fetch:資料請求等
1、React除錯工具:React Developer Tools 2、React開發工具:Atom 3、React UI庫:Material-UI / Ant Deaign 4、React適用場景:資料不斷變化的大型應用程式 5、前端UI構建方式:資料模型、UI介面
Vue props 單向資料流
1、props通訊 注意:DOM模板的駝峰命名props要轉為短橫分割命名。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF
vue與react對比,相同之處與不同之處。
兩者都為當下主流框架 相同之處在於: 一、使用 Virtual DOM 二、提供了響應式 (Reactive) 和元件化 (Composable) 的檢視元件。 三、將注意力集中保持在核心庫,而將其他功能如路由和全域性狀態管理交給相關的庫。 不同之處: 一、在 Rea
XML與JSON比較,並用AJAX傳輸XML/JSON資料
為實現資料與邏輯程式碼的分離,可以把資料單獨存放,一般用xml 和json格式來儲存資料。 XML介紹 XML 指可擴充套件標記語言(EXtensible Markup Language),很類似 HTML。XML 的設計宗旨是傳輸資料,
Vue 與Angular、React框架的對比
首先,我們先了解什麼是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(檢視)+controller(控制器),主要是基於分層的目的,讓彼此的職責分開。 View通過Controller來和Model聯絡,Cont
vue的單向資料流和雙向繫結解釋
Vue 在不同元件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。資料只能從父元件到子元件或是反向。 雙向繫結v-model是同時實現bind attribute(value)和Listen
vue與angular和react框架原理對比小結及相容性
1、vue與react、angular原理對比: (1)Angular用髒檢查 在 Angular 1 中,當 watcher 越來越多時會變得越來越慢,因為作用域內的每一次變化,所有 watch
vue下使用select2,繫結資料問題
在select元素上應用v-model繫結資料,本來沒啥問題,後來應用了select2優化樣式,發現v-model不管用了。 html部分: <select id="deviceTypeAdd" name="deviceTypeAdd" v-mod
vue與angular的區別
vue僅僅是mvvm中的view層,只是一個如jquery般的工具庫,而不是框架,而angular而是mvvm框架。 vue的雙向邦定是基於ES5 中的 getter/setter來實現的,而angu
vue單向資料流prop
prop是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是反過來不會。這是為了防止子元件無意間修改了父元件的狀態,來避免應用的資料流變得難以理解。另外,每次父元件更新時,子元件的所有prop都會更新為最新值。這意味著你不應該在子元件內部改變prop。如果你這麼做了,Vu
Vue與React比較
合作開發 書寫 添加 關聯 必須 程序 true 一個 outer 與React 相似: (1)虛擬DOM(Virtual DOM) 虛擬DOM的誕生是基於:改變真實的DOM狀態遠比改變一個JS對象的花銷要大的多。 虛擬DOM是一個映射真實DOM的JS對象,當有變化
jquery使用$(xx).text()與字串比較,明明看著相等,結果卻為false
比如一個a標籤。 <a>刪除</a> 使用jquery獲取之,$('a').text()。var res = ($('a').text() == '刪除');alert(res);。結果為false。 可能是有的瀏覽器會在text中給文字加空格。使用trim(
Vue.js安裝腳手架,Vue.js安裝vue-cli
Vue.js安裝腳手架,Vue.js安裝vue-cli ================================ ©Copyright 蕃薯耀 2018年11月27日 http://fanshuyao.iteye.com/ 一、使用npm命令需要先安裝