Vue.js问答3

# Vue.js 源码剖析-响应式原理-随堂测试

##

Part3-2任务一:Vue.js 源码剖析-响应式原理随堂测试

- **1.** **单选题**下面关于 Vue 的相关版本说法错误的是：**(20分)**

- A完整版的 Vue 同时包含编译器和运行时，编译后的文件名如果是 vue.js，模块化采用的是 UMD
  - B运行时版的 Vue 只包含运行时，编译后的文件名如果是 vue.runtime.js，模块化采用的是 CommonJS
  - C运行时版本的 Vue 体积比编译器版本的 Vue 要小 30% 左右，并且运行时版本的 Vue 的运行效率要比完整版的 Vue 要高
  - D完整版和运行时版的 Vue，编译后的文件中会同时存在支持 UMD、CommonJS、ESM 三种模块化的方式，VueCLI 生成的项目默认使用 Vue 是 ESM 模块化方式的运行时版本

![img](data:image/png;base64,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)回答正确 +20分

答案解析

B. 运行时版本的 Vue 编译后的文件名是 vue.runtime.js 模块化的方式是 UMD，同时会编译出 vue.runtime.js(UMD)、vue.runtime.common.js 和 vue.runtime.esm.js 不同模块化方式的版本

- **2.** **单选题**下面关于 Vue 的响应式说法错误的是：**(20分)**

- AVue 在初始化 data 的过程中会先检测 options 中是否有同名的 prop 或者 method，如果有的话会报相应的警告。
  - B创建 Vue 实例或者组件实例的时候传入的 data 对象的层级尽可能少，因为在响应式处理的过程中会递归处理 data 对象的所有子属性
  - C数组的响应化的核心处理是把修改原数组内容的数组方法，当调用这些方法的时候会调用 notify() 通知 Watcher 重新渲染，然后再遍历数组中的所有元素通过 observe 函数转换成响应式数据
  - D数组的响应化处理的过程中会遍历数组的每一个元素进行响应化处理，所以通过 arr[0] 修改数组，或者通过 arr.length = 0 修改数组后页面会显示最新的数组中的数据

![img](data:image/png;base64,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)回答正确 +20分

答案解析

D. 数组的响应化处理过程虽然会遍历数组中的每一个元素调用 observe 函数处理每一个元素，但是 observe 的作用是把对象转换成响应式对象，并没有处理数组对象本身的索引和 length 属性，修改数组的索引对应的元素，或者修改 length 属性，是不会重新渲染页面的。

- **3.** **多选题**下面关于 Vue 的响应式说法正确是：**(20分)**

- A每一个响应式对象都会创建一个对应的 Observer 对象，记录到该对象的 __ob__ 属性中，并且每一个 Observer 对象都会有一个 dep 对象，负责为该对象收集依赖，当该对象发生变化时发送通知
  - B响应式对象的属性，都会通过 defineReactive 转换为 getter 和 setter，同时每一个属性都会有一个对象的 dep 对象为该属性收集依赖，当属性变化时发送通知
  - C当给响应式对象的属性赋值的时候，如果新值是对象的话，会调用 observe 把该对象转换成响应式对象
  - D在响应式对象属性的 getter 中会收集该属性的依赖，如果该属性的值是对象会为该对象收集依赖，如果该值是数组，会为该数组收集依赖

![img](data:image/png;base64,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)回答正确 +20分 正确答案为 ABCD

- **4.** **多选题**下面关于 nextTick 说法正确的是：**(20分)**

- A在修改完数据后，想要获取更新后 DOM 上最新数据，需要使用 nextTick，因为 DOM 的更新过程是异步的。
  - BnextTick 内部优先使用微任务执行异步的回调函数，如果浏览器不支持 Promise 的话会降级成 MutationObserver
  - C如果当前浏览器不支持微任务，会降级成宏任务，如果是 IE 浏览器的话优先使用 setImmediate，否则的的使用 setTimeout(callback, 0)
  - DnextTick 获取最新的 DOM 数据会导致页面卡顿，因此除非必要否则不建议使用 nextTick

![img](data:image/png;base64,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)回答正确 +20分

答案解析

D nextTick 用来异步获取 DOM 的最新数据，本身仅仅是用来开启一个微任务或者宏任务，所以它不会造成页面的卡顿，除非回调函数中的代码过于耗时会导致页面卡顿