vue渲染大量資料優化 Vue列表頁渲染優化詳解

2021-10-16 14:21:05 字數 706 閱讀 2544

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作為分隔符,因為它更接近...