part3_模块五作业

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

解答：

响应式系统升级

Vue.js 2.0 x 中响应式系统的核心 defineProperty

Vue.js 3.0 x 中使用 Proxy 对象重写响应式系统

编译优化
Vue.js 2.0 x 中通过标记静态节点，优化 diff 的过程

Vue.js 3.0 x 中标记和提升所有的静态根节点，diff 的时候只需要对比动态内容
Fragments （升级 Vuter 插件）

静态提升

Patch flag

缓存事件处理函数

源码体积优化
Vue.js 3.0 x 中移除了一些不常用的 API

例如：inline-template filter 等

Tree-shaKing

Vite
在开发模式下不需要打包可以直接运行

开发模式下必须对项目打包才能运行

特点
快速冷启动

按需编译

模块热更新

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

解答：

Vue 2.x

包含一个描述组件的选项（data、methods、props等）的对象。

Options API 开发复杂组件，同一功能逻辑代码会被拆分到不同选项

Vue 3.0
一组基于函数的 API

可以更灵活的组织组件的逻辑

3、Proxy 相对于 Object.defineProperty 有哪些优点？

解答：

Proxy 的优点

可以直接监听对象而非属性

可以直接监听数组的变化

拦截的方式较多

Proxy返回一个新对象，可以只操作新对象达到目的，而Object.defineProperty只能遍历对象属性直接修改

Proxy作为新标准将受到浏览器厂商重点持续的性能优化

Object.defineProperty 的优点:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

4、Vue 3.0 在编译方面有哪些优化？

解答：

静态提升，将静态node提升到重新编译之前，不再做更新处理

Fragments （升级 Vuter 插件）

静态绑定的class、id不再作更新处理

结合打包Hint，进行更新分析（动态绑定）

事件监听器Cache缓存处理（cacheHandles）

针对静态节点的优化： Virtual DOM机制调整内存优化，更少的占用按需加载，更灵活的组件化

5、Vue.js 3.0 响应式系统的实现原理？

const isObject = val => val !== null && typeof val === 'object'
const convert = raw => isObject(raw) ? reactive(raw) : raw
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty(target, key)export function reactive (target) {// 判断传入的是否为对象，不是直接返回if( !isObject(target) ) return target// 调用handler函数const handler = {get (target, key, receiver) {// 搜集依赖track( target, key)const result = Reflect.get(target, key, receiver)return result},set (target, key, value, receiver) {const oldValue = Reflect.get(target, key, receiver)// 判断新值和旧值是否相等let result = trueif (oldValue !== value) {result = Reflect.set(target, key, value, receiver)// 触发更新trigger(target, key)}return result},deleteProperty (target, key) {// 判断target中是否有key属性const hasKey = hasOwn(target, key)// 如果有该属性，并删除成功后触发更新const result = Reflect.deleteProperty(target, key)if (hasKey && result) {// 触发更新trigger(target, key)}return result}}return new Proxy(target, handler)
}let activeEffect = null
export function effect (callback) {// 缓存回调函数activeEffect = callbackcallback() // 访问响应式对象属性，搜集依赖activeEffect = null
}let targetMap = new WeakMap()export function track (target, key) {// 如果没有活动的effect函数返回if (!activeEffect) return // 如果没有depsMap给targetMap设置let depsMap = targetMap.get(target)if ( !depsMap) {targetMap.set(target, (depsMap = new Map()))}// 如果没有 dep 给depsMap设置let dep = depsMap.get(key)if ( !dep ) {depsMap.set(key, (dep = new Set()))}// 最后将活动effect函数添加到dep中dep.add(activeEffect)
}export function trigger(target, key) {const depMap = targetMap.get(target)if ( !depMap ) returnconst dep = depMap.get(key)if ( dep ) {dep.forEach(effect => {effect()})}
}export function ref (raw) {// 判断 raw 是否是ref 创建的对象，如果是的话直接返回if ( isObject(raw) && raw.__v_isRef ) {return}// 如果 raw 是对象调用reacytive 创建否则返回该值let value = convert( raw )const r ={__v_isRef: true,get value () {track(r, 'value')return value},set value (newValue) {if ( newValue !== value ) {raw = newValuevalue = convert(raw)trigger(r, 'value')}}}return r
}export function toRefs (proxy) {// 判断当前传入的是对象还是数组初始化空const ret = proxy instanceof Array ? new Array(proxy.length) : {}// 遍历proxy将其内部响应式属性赋给初始化属性for(const key in proxy ) {ret[key] = toProxyRef(proxy, key)}return ret
}function toProxyRef (proxy, key) {const r = {__v_isRef: true,get value () {return proxy[key]},set value (newValue) {return proxy[key] = newValue}}return r
}export function computed (getter) {const result = ref()effect(() => (result.value = getter()))return result
}

part3_模块五作业相关推荐

20189200余超 2018-2019-2 移动平台应用开发实践第五作业
20189200余超 2018-2019-2 移动平台应用开发实践第五作业输入/输出输入输出可以说是计算机的基本功能.作为一种语言体系,java中主要按照流(stream)的模式来实现.其中数据的 ...
计算机故障处理试题,模块五计算机故障诊断与排除测试题
<计算机组装与维修> 模块五计算机故障诊断与排除测试题一.单项选择题 1.触摸计算机部件是否有烫手的感觉,需要提前(). A.用水洗干净手 B.放掉身上的静电 C.戴上手套 D.在地上洒 ...
MySQL 模块五、模块六复习笔记
模块五一.添加与更新MySQL数据表数据 a.复制命令的方式创建数据表例如:用现有的数据表"用户信息"创建数据表"user" create table us ...
python实验一到五作业+自我总结（待更新）
###################实验一python代码作业################### 1.print语句 print('''@@@@@@@@@@@@@@@ @@@@@@@ @ @@@ ...
百思不得姐之立即登录注册模块(五)
一功能图和实现思路具体功能图: 实现思路: --> 1 关注控制器模块搭建(xib) --> 2 登录和注册界面的总体模块数量(三个模块),可以用三个view来装各自的子控件 --&g ...
python学习之模块--模块(五)
5.10 包 5.10.1 包的概念 [官网解释] Packages are a way of structuring Python's module namespace by using " ...
python ca模块_python学习之模块-模块(五)
5.10 包 5.10.1 包的概念 [官网解释] Packages are a way of structuring Python's module namespace by using " ...
050医疗项目-模块五：权限设置-第三方系统的接入
我们先演示要实现的功能: 单击: 我们看着有三个子模块: 点击模块管理: 在模块管理中,我们可以设置一共有几个模块,每个模块里面有哪些具体的操作等. 角色管理: 给角色分配权限. 好,我们接下来看具体 ...
手机测试Android模块,五个有用的Xposed模块，用于自定义您的Rooted Android手机 | MOS86...
Modding Android远不是一个新的想法,而是在将操作系统转换为您的意愿的同时,Xposed是其中最强大的工具之一.虽然有几十个Xposed模块可用,我们是什么? 简而言之,Xposed框架 ...

part3_模块五作业

part3_模块五作业相关推荐

最新文章

热门文章