赞
踩
vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理
Proxy的性能会比Object.defineProperty好很多
重新运行函数的时候会再次收集依赖
)vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍(收集依赖收集的是函数运行的环境不单单是函数,因为当后续)
// 函数运行环境
function effect(fn) {
const effectFn = () => {
// 保存当前的effectFn方便在数据更新后再运行函数时的依赖收集中找到是哪个函数
activeEffect = effectFn;
fn();
// 清空当前的effect
activeEffect = null;
};
effectFn();
}
如果每次数据改变都进行渲染的话那渲染的性能就会很差,所以有了异步数据渲染nextTick
,当需要派发更新的时候不会立即运行函数,而是交给nextTick
,nextTick
会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。