js和vue的数据类型

​​在 Vue.js 中，数据类型本质上仍是 JavaScript 的原生数据类型​​（如字符串、数字、对象、数组等），但 Vue 对部分数据类型（主要是对象和数组）进行了​​响应式封装​​，使其具备“数据变化时自动更新视图”的能力。

​​一、JavaScript 原始数据类型（共 7 种）​​

JavaScript 原生支持的​​不可变基础数据类型​​，直接存储值本身，无方法或属性（除 Symbol和 BigInt有少量静态方法）。

类型	作用	示例
​​String​​	存储文本数据（Unicode 字符序列）	"Hello"、'Vue3'
​​Number​​	存储数值（整数、浮点数、特殊值 Infinity/NaN）	42、3.14、Infinity
​​Boolean​​	存储逻辑值（仅 true或 false）	true、false
​​Undefined​​	表示“未定义”（变量声明但未赋值时的默认值）	let a; console.log(a); // undefined
​​Null​​	显式表示“空值”（无实际值，与 undefined不同）	let obj = null;
​​Symbol​​	生成唯一标识符（用于对象属性键，避免命名冲突）	const key = Symbol('unique');
​​BigInt​​	存储超大整数（超出 Number.MAX_SAFE_INTEGER时使用，后缀 n）	12345678901234567890n

​​二、JavaScript 引用类型（原生类型，共 8 种核心类型）​​

JavaScript 原生支持的​​可变复杂数据类型​​，存储“对象的引用”（内存地址），而非对象的实际值。Vue 的响应式系统正是基于这些引用类型（如对象、数组）进行封装，使其具备“数据变化时自动更新视图”的能力。

​​1. 普通对象（Object）​​

• ​​作用​​：存储键值对集合（最基础的引用类型，用于描述实体属性）。
• ​​创建方式​​：{}或 new Object()。
• ​​示例​​：
   const user = { name: '张三', age: 25 }; // 普通对象（描述用户信息）

   

​​2. 数组（Array）​​

• ​​作用​​：存储有序元素集合（本质是“带索引的对象”，用于批量数据管理）。
• ​​创建方式​​：[]或 new Array()。
• ​​示例​​：
   const todos = ['学习 Vue', '写项目文档', '测试功能']; // 数组（存储待办事项）

   

​​3. 函数（Function）​​

• ​​作用​​：可调用的对象（本质是“可执行的对象”，用于封装可复用逻辑）。
• 创建方式​​：function关键字或箭头函数。
• ​​示例​​：
   const calculateSum = (a, b) => a + b; // 函数（计算两数之和）

   

​​4. 日期对象（Date）​​

• ​​作用​​：处理日期和时间（专用对象，用于时间戳转换、日期格式化等）。
• ​​创建方式​​：new Date()。
• ​​示例​​：
   const today = new Date(); // 日期对象（如 "2024-05-20T12:00:00.000Z"）

   

​​5. 正则表达式对象（RegExp）​​

• ​​作用​​：匹配和处理字符串模式（专用对象，用于字符串校验、替换等）。
• ​​创建方式​​：/pattern/flags或 new RegExp(pattern, flags)。
• ​​示例​​：
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 正则对象（校验邮箱格式）

   

​​6. 键值对集合（Map）​​

• ​​作用​​：存储键值对（键可为任意类型，支持快速查找）。
• 创建方式​​：new Map([entries])。
• ​​示例​​：
   const configMap = new Map([['theme', 'dark'], ['lang', 'zh']]); // Map（存储配置项）

   

​​7. 唯一值集合（Set）​​

• ​​作用​​：存储唯一值（自动去重，支持快速成员检查）。
• ​​创建方式​​：new Set([values])。
• ​​示例​​：
   const uniqueTags = new Set(['Vue', 'React', 'Vue']); // Set（结果：{'Vue', 'React'}）

   

   

​​8. 错误对象（Error）​​

• 作用​​：表示运行时错误（用于异常捕获和处理）。
• 创建方式​​：new Error(message)（或自定义错误类型）。
• ​​示例​​：
   try { throw new Error('文件加载失败'); } catch (e) { console.log(e.message); // 输出 "文件加载失败" }

   

   

​​三、Vue 3 新增类型（TypeScript 扩展，共 8 种核心类型）​​

Vue 3 结合 TypeScript 为组件开发设计的​​类型工具​​，用于增强响应式系统、类型安全和开发体验。

类型	作用	示例
​​Ref​​	创建响应式引用（包装原始值/对象，通过 .value访问，数据变化触发视图更新）	const count = ref(0);
​​Reactive​​	创建响应式对象（递归包装对象属性，属性变化自动触发视图更新）	const state = reactive({ name: 'Vue' });
​​PropType​​	显式指定组件 props的类型（解决复杂类型推断问题）	props: { user: Object as PropType<{ name: string }> }
​​DefineComponent​​	定义组件类型（自动生成类型声明，支持类型推断和 props/emits校验）	const Comp: DefineComponent<...> = { ... }
​​ComputedRef​​	表示计算属性（基于响应式数据计算的派生值，只读且自动缓存）	const double = computed(() => count.value * 2);
​​Slots​​	定义组件插槽类型（约束父组件传递给子组件的内容结构）	slots: { default: (props: { msg: string }) => any }
​​defineEmits​​	声明组件事件及其参数类型（增强事件参数类型安全，替代 emits选项）	const emit = defineEmits<{ 'update:name': (name: string) => void }>();
​​CustomRef​​	自定义响应式引用（高级 API，用于实现自定义响应式逻辑）	const customRef = customRef((track, trigger) => ({ get() { track(); return value; }, set(newValue) { value = newValue; trigger(); } }))

​​四、Vue 与引用类型的关系​​

Vue ​​未新增引用类型​​，而是利用 JavaScript 原生的引用类型（如对象、数组），通过以下方式增强其能力：

​​1. 响应式封装​​

• 对​​对象​​：通过 reactive()或 Proxy递归包装对象的所有属性，属性变化时触发视图更新。
• 对​​数组​​：通过重写数组的变异方法（如 push、splice），执行时触发视图更新。

​​2. 依赖追踪​​

Vue 通过 Track和 Trigger机制（基于 Proxy），追踪引用类型数据的访问和修改，自动收集依赖（如模板中使用的属性），并在数据变化时重新渲染视图。

​​总结​​

• ​​原始类型​​：JavaScript 原生支持，用于基础数据存储（如文本、数值）。
• ​​引用类型​​：JavaScript 原生支持，用于复杂数据管理（如对象、数组），Vue 基于此实现响应式。
• ​​Vue 新增类型​​：TypeScript 扩展工具，聚焦组件开发中的类型安全和响应式优化。