#Vue 特性兼容性

Vue Lynx 构建在官方 Vue 3 运行时核心（@vue/runtime-core）之上，因此你应该期望你的 Vue 代码可以直接运行。核心渲染路径 -- 组合式 API、单文件组件、响应式系统、模板指令 -- 与标准 Vue 的使用方式完全一致，无需任何 Lynx 特定的适配。

下面是我们已在 Lynx 上验证的 Vue 特性的逐项说明。如果存在 Lynx 特有的注意事项，会在对应位置标注。关于双线程架构底层工作原理的详细信息，请参阅理解双线程模型。

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

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

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

#SFC CSS 特性

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

pluginVueLynx({
  enableCSSInlineVariables: true,
})

#v-model

Vue 的 v-model 可以创建双向绑定。在组件上，子组件使用 defineModel()（Vue 3.4+）声明模型 prop，父组件通过 v-model 进行绑定。在原生 <input> 和 <textarea> 元素上，v-model 的使用方式与标准 Vue 一致，支持 .lazy、.trim 和 .number 修饰符。

该示例展示了：

1. 默认模型 — defineModel<number>() 配合 v-model="count" 实现计数器
2. 命名模型 — defineModel('title') + defineModel('body') 配合 v-model:title / v-model:body
3. 原生输入 v-model — 在 <input> 上直接使用 v-model

#插槽

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 内置特性尚未适配双线程原生环境：