#Vue 特性兼容性

由于 Vue Lynx 构建在官方 Vue 3 运行时核心之上，它的目标是开箱即用地支持完整的 Vue 3 API。核心渲染路径——组合式 API、单文件组件、响应式系统、模板指令——与标准 Vue 的使用方式完全一致。

但 Vue 的 API 范围很广，我们还没有时间逐一验证每个细节。下面列出了我们已确认在 Lynx 上可以顺利运行的关键 Vue 特性——大多数无需对标准 Vue 代码做任何适配。如果存在 Lynx 特有的注意事项，会在对应位置标注。

#响应式系统 + 组合式函数

Vue Lynx 100% 复用了 Vue 的响应式核心（@vue/reactivity）。每个响应式 API 的行为与标准 Vue 完全一致，没有任何 Lynx 特有的注意事项或适配。

下面的示例展示了 reactive() + toRefs()，以及一个封装了响应式状态的 useStopwatch() 组合式函数：

#SFC CSS 特性

普通 <style> 块、导入的 .css 文件和 <style module> 都可以在 Lynx 上使用。<style scoped> 和 CSS 中的 v-bind() 尚未支持——如果你需要这些特性，请在 #78 和 #79 上投票。

<script setup>
const color = ref('#1565c0')
const style = computed(() => ({ color: color.value }))
</script>
<template>
  <text :style="style">Dynamic color</text>
</template>

#组件 v-model

Vue 的 v-model 可以在父子组件之间创建双向绑定。子组件使用 defineModel()（Vue 3.4+）声明模型 prop，父组件通过 v-model 进行绑定。

该示例展示了：

1. 默认模型 — defineModel<number>() 配合 v-model="count" 实现计数器
2. 命名模型 — defineModel('title') + defineModel('body') 配合 v-model:title / v-model:body
3. 手动输入绑定 — 原生 <input> 的替代方案（见下方注意事项）

<input :value="text" @input="(e) => text = e.detail.value" />

#插槽

Vue 插槽是将模板内容传递给子组件的主要组合机制。Vue Lynx 支持默认插槽、具名插槽和作用域插槽。

下面的示例展示了这三种模式：

1. 默认插槽 — 将内容投射到 <Card> 组件中
2. 具名插槽 — #header 和 #footer，带有后备内容
3. 作用域插槽 — <DataList> 将每个项暴露给父组件进行自定义渲染

#Provide / Inject

Vue 的 provide 和 inject API 允许祖先组件作为其所有后代组件的依赖注入器，无论组件层级有多深。这避免了通过中间组件层层传递 props。

下面的示例在根组件中提供了一个响应式的 theme ref 和一个静态的 appName 字符串。一个孙子组件注入了这两个值——中间层不需要向下传递任何内容。

#Suspense

Vue 的 <Suspense> 在等待异步组件解析时显示后备内容。在 Lynx 上，<Suspense> 支持异步 setup()（<script setup> 中的顶层 await）和用于懒加载的 defineAsyncComponent。

#Transition

Vue 的 <Transition> 和 <TransitionGroup> 组件在元素插入或移除时应用进入/离开动画。

#选项式 API

Vue 3 在组合式 API 之外还提供了选项式 API 以保持向后兼容。 默认情况下，Vue Lynx 启用了选项式 API（插件中的 optionsApi: true），但你可以禁用它以减小包体积：

pluginVueLynx({
  optionsApi: false, // 移除选项式 API 运行时（约 9 kB）
})

下面的示例使用 defineComponent 配合 data()、computed、watch、methods 和 mounted 生命周期钩子：

#不支持的特性

部分 Vue 内置特性尚未适配双线程原生环境：