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

​​二、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(); } }))

​​总结​​

• ​​JavaScript 原始类型​​：共 7 种，覆盖文本、数值、逻辑、空值等基础数据存储需求。
• ​​Vue 3 新增类型​​：共 8 种核心类型（含 CustomRef），专注于组件响应式系统、类型安全和开发体验优化。