知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
长列表性能优化
使用Object.freeze优化Vue中的不需要响应式监听的数据
在2.x版本中
Vue
会通过
Object.defineProperty
对数据进行劫持, 以实现双向数据绑定. 但在一些特定的业务场景, 组件只需要进行纯数据展示, 不会有任何变化, 此时我们可能不需要
Vue
对来数据进行劫持. 在大量数据需要进行呈现时, 如果禁止
Vue
对数据进行劫持, 会明显减少组件初始化的时间.
1
export
default
{
2
data
:
()
=>
({
3
userList
:
[]
4
}),
5
async
created
()
{
6
const
userList
=
await
this
.
$service
.
get
(
"/getuserList"
);
7
this
.
userList
=
Object
.
freeze
(
userList
);
8
}
9
};
Copied!
使用
Object.freeze
后,Vue的双向数据绑定实效,这也就是带来性能提升的原因。
以前
基础知识
下一个
mixin
最近更新
2yr ago
复制链接