vue3题目集合

最新推荐文章于 2024-04-08 05:59:20 发布

卑微牛马小张

最新推荐文章于 2024-04-08 05:59:20 发布

阅读量360

点赞数 11

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58602400/article/details/134840068

版权

【问题剖析】

这道题考察的知识点是Vue3中reactive函数的作用，以及它的使用方法。

【解答】
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

【问题剖析】

  这道题考察面试者对Vue3的数据双向绑定原理的理解，解答的时候可以先说一下Vue2数据双向绑定的原理。然后在介绍Vue3.

【解答】

vue2.x的响应式：

实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
存在问题：

新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式：

实现原理:通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

【问题剖析】

这道题考察的知识点是Vue3中对ref函数的理解成度。它的作用是什么，以及它的用法。

【解答】

作用: 定义一个响应式的数据

语法: const xxx = ref(initValue)

  创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

JS中操作数据： xxx.value

  模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

备注：

  接收的数据可以是：基本类型、也可以是对象类型。

  基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

Vue 3组合式API是一种在Vue 3中新增的API风格。它允许将组件的逻辑按照功能划分为多个可复用的逻辑块，称为"composition"。

每个逻辑块都可以包含自己的状态、计算属性、方法和生命周期钩子，可以独立编写、测试和重用。这种方式使得组件的逻辑更加模块化，便于组织和维护。

与Vue 2的选项式API相比，组合式API的优势如下：

易于学习和使用，写代码的位置已经约定好了。

功能逻辑复杂繁多情况下，各个功能逻辑代码组织在一起，便于阅读和维护。

Vue 3对两种API都支持，简单的场景使用选项式API更加简单方便，需要强烈支持TS的项目首选组合式API，大量逻辑复用的场景首选组合式API。

收起解题思路

关注