vue列表頁渲染優化,具體內容如下
想法初始化時,vue會對data做getter、setter改造,在現代瀏覽器裡,雖然js已經足夠快,但仍然有優化空間。
列表頁的資料結構為:
vue會給陣列中的每個值設定getter和setter來監聽它們的變動
但其實列表資料是不會發生變化的,這些操作是多餘的。
方法一:使用object.freeze()
object.freeze()是es5新增的api,用來凍結乙個物件,禁止物件被修改。vue 1.0.18+以後,不會對已凍結的data做getter、setter轉換。
如果確保某個data不需要跟蹤依賴,可以使用object.freeze將其凍結。需要注意的是,被凍結的是物件的值,仍然可以將引用整個替換調。看下面例子:
// 下面兩種做法,介面都會響應
this.list = [
,this.list = object.freeze([
,當使用vuex進行狀態管理時,應當在給state.***賦值前使用object.freeze():
getter和setter沒有了。
方法二:傳string方法
由於從後端取回的資料本身為字串,不進行json.parse()直接存在state中,即可阻止vue的改造。
使用時,在頁面元件中引入字串,json.parse()後可以直接賦值給this.***,如有需要還可以進一步子元件。
vue資料渲染
在webpack.dev.conf.js裡它後面const portfinder require portfinder 加入 const express require express var goodsdata require mock goos.json 載入本地資料檔案 var result ...
vue資料渲染
一,vue介紹。vue是一套構建使用者介面的漸進式框架。二,宣告式渲染 vue.js的核心是乙個允許採用的簡潔的模板語法來宣告式地將資料渲染進dom的系統。1,文字插值 資料繫結最常見的形式就是使用 雙大括號 html hello p div js new vue script 文字插值!說明 使用...
Vue8 列表渲染
v for把乙個陣列對應為一組元素h2 我們可以用 v for 指令基於乙個陣列來渲染乙個列表。v for 指令需要使用 item in items 形式的特殊語法,其中 items 是源資料陣列,而 item 則是被迭代的陣列元素的別名。在v for中也可以使用of替代in作為分隔符,因為它更接近...