溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue長列表性能優化的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
長列表性能優化
我們應該都知道vue會通過object.defineProperty對數據進行劫持，來實現視圖響應數據的變化，然而有些時候我們的組件就是純粹的數據展示，不會有任何改變，我們就不需要vue來劫持我們的數據，在大量數據展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止vue劫持我們的數據呢？可以通過object.freeze方法來凍結一個對象，一旦被凍結的對象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};另外需要說明的是，這里只是凍結了users的值，引用不會被凍結，當我們需要reactive數據的時候，我們可以重新給users賦值。
export default {
data: () => ({
users: []
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
methods:{
// 改變值不會觸發視圖響應
this.users[0] = newValue
// 改變引用依然會觸發視圖響應
this.users = newArray
}
};以上是“vue長列表性能優化的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
