mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
2461 lines
373 KiB
HTML
2461 lines
373 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Vue 3 备忘清单
|
||
& vue cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="Vue 3渐进式 JavaScript 框架 Vue 3 备忘清单的快速参考列表，包含常用 API 和示例
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="vue,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/vue.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="vue-3-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
|
||
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"></path>
|
||
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#vue-3-备忘清单"><span class="icon icon-link"></span></a>Vue 3 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://npmjs.org/package/vue"><img src="https://img.shields.io/npm/v/vue.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/dm/vue.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/vuejs/core/network/dependents"><img src="https://badgen.net/github/dependents-repo/vuejs/core" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/vuejs/core"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">渐进式 JavaScript 框架 <a href="https://cn.vuejs.org/">Vue 3</a> 备忘清单的快速参考列表，包含常用 API 和示例</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建应用">创建应用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#应用实例">应用实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#通过-cdn-使用-vue">通过 CDN 使用 Vue</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-es-模块构建版本">使用 ES 模块构建版本</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#模板语法">模板语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本插值">文本插值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#原始-html">原始 HTML</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#attribute-绑定">Attribute 绑定</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#布尔型-attribute">布尔型 Attribute</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态绑定多个值">动态绑定多个值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-javascript-表达式">使用 JavaScript 表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#仅支持表达式例子都是无效">仅支持表达式(例子都是无效)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#调用函数">调用函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令-directives">指令 Directives</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#参数-arguments">参数 Arguments</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#绑定事件">绑定事件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态参数">动态参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态的事件名称">动态的事件名称</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#修饰符-modifiers">修饰符 Modifiers</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令语法">指令语法</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#响应式基础">响应式基础</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#声明状态">声明状态</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#声明方法">声明方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#script-setup-setup语法糖"><script setup> setup语法糖</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#用-ref-定义响应式变量">用 ref() 定义响应式变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#有状态方法">有状态方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#响应式样式">响应式样式</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#响应式进阶--watch-和-computed">响应式进阶 —— watch 和 computed</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听状态">监听状态</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#立即监听状态">立即监听状态</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听多个值">监听多个值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计算状态">计算状态</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#组件通信">组件通信</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#defineprops">defineProps</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#defineemits">defineEmits</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#defineexpose">defineExpose</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#provide--inject">Provide / Inject</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#路由">路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#1-路由的基本使用">1. 路由的基本使用</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#开启命名空间后组件中读取state数据">开启命名空间后，组件中读取state数据</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#开启命名空间后组件中读取getters数据">开启命名空间后，组件中读取getters数据</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#开启命名空间后组件中调用dispatch">开启命名空间后，组件中调用dispatch</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#开启命名空间后组件中调用commit">开启命名空间后，组件中调用commit</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#2-路由的使用">2. 路由的使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#3路由的query">3.路由的query</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#跳转路由并携带参数">跳转路由并携带参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#4-命名路由">4. 命名路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#5params参数的使用">5.params参数的使用</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#1-声明接收">1. 声明接收</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#2-传递">2. 传递</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#3-接收">3. 接收</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#6props的使用">6.props的使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#7-编程式路由导航">7. 编程式路由导航</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#8缓存路由组件">8.缓存路由组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#9新生命周期钩子">9.新生命周期钩子</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#路由守卫">路由守卫</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#1前置路由守卫">1.前置路由守卫</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#2后置路由守卫">2.后置路由守卫</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#3独享路由守卫">3.独享路由守卫</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#4组件内路由守卫">4.组件内路由守卫</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#vue-中使用-typescript">Vue 中使用 TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为组件的-props-标注类型">为组件的 props 标注类型</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#props-解构默认值">Props 解构默认值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为组件的-emits-标注类型">为组件的 emits 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为-ref-标注类型">为 ref() 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为-reactive-标注类型">为 reactive() 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为-computed-标注类型">为 computed() 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为事件处理函数标注类型">为事件处理函数标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为-provide--inject-标注类型">为 provide / inject 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为模板引用标注类型">为模板引用标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为组件模板引用标注类型">为组件模板引用标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-为组件的-props-标注类型">选项式 API 为组件的 props 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-为组件的-emits-标注类型">选项式 API 为组件的 emits 标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-为计算属性标记类型">选项式 API 为计算属性标记类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-为事件处理函数标注类型">选项式 API 为事件处理函数标注类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-扩展全局属性">选项式 API 扩展全局属性</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#类型扩展的位置">类型扩展的位置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api-扩展自定义选项">选项式 API 扩展自定义选项</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#性能优化">性能优化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍-1">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#条件渲染与缓存结合">条件渲染与缓存结合</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#路由前置优化beforerouteenter">路由前置优化（beforeRouteEnter）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#响应式对象的精简">响应式对象的精简</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计算属性的延迟执行">计算属性的延迟执行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-memo-缓存子树">v-memo 缓存子树</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件节流与防抖">事件节流与防抖</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#虚拟列表virtual-scrolling">虚拟列表（Virtual Scrolling）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#按需加载资源lazy-loading-resources">按需加载资源（Lazy Loading Resources）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#优化事件监听event-delegation">优化事件监听（Event Delegation）</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#api-参考">API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局-api---应用实例">全局 API - 应用实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局-api---通用">全局 API - 通用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合式-api---setup">组合式 API - setup()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合式-api---依赖注入">组合式 API - 依赖注入</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合式-api---生命周期钩子">组合式 API - 生命周期钩子</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合式-api---响应式-工具">组合式 API - 响应式: 工具</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合式-api---响应式-核心">组合式 API - 响应式: 核心</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---状态选项">选项式 API - 状态选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---生命周期选项">选项式 API - 生命周期选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---其他杂项">选项式 API - 其他杂项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---渲染选项">选项式 API - 渲染选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---组件实例">选项式 API - 组件实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选项式-api---组合选项">选项式 API - 组合选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置内容---指令">内置内容 - 指令</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置内容---组件">内置内容 - 组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置内容---特殊-attributes">内置内容 - 特殊 Attributes</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置内容---特殊元素">内置内容 - 特殊元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单文件组件---语法定义">单文件组件 - 语法定义</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单文件组件---script-setup">单文件组件 - <script setup></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单文件组件---css-功能">单文件组件 - CSS 功能</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#进阶-api---渲染函数">进阶 API - 渲染函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#进阶-api---服务端渲染">进阶 API - 服务端渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#进阶-api---typescript-工具类型">进阶 API - TypeScript 工具类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#进阶-api---自定义渲染">进阶 API - 自定义渲染</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<p>Vue 是一套用于构建用户界面的渐进式框架</p>
|
||
<ul class="style-round">
|
||
<li><a href="https://cn.vuejs.org/">Vue 3.x 官方文档</a> <em>(cn.vuejs.org)</em></li>
|
||
<li><a href="https://router.vuejs.org/zh/">Vue Router 4.x 官方文档</a> <em>(router.vuejs.org)</em></li>
|
||
<li><a href="./vue2.html">Vue 2 备忘清单</a></li>
|
||
</ul>
|
||
<!--rehype:className=style-round-->
|
||
<p>注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="创建应用"><a aria-hidden="true" tabindex="-1" href="#创建应用"><span class="icon icon-link"></span></a>创建应用</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<p>已安装 <code>16.0</code> 或更高版本的 Node.js</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> init vue@latest
|
||
</span></code></pre>
|
||
<p>指令将会安装并执行 <a href="https://www.npmjs.com/package/create-vue">create-vue</a>，它是 Vue 官方的项目脚手架工具</p>
|
||
<pre class="wrap-text "><code class="language-bash code-highlight"><span class="code-line">✔ Project name: … <span class="token operator"><</span>your-project-name<span class="token operator">></span>
|
||
</span><span class="code-line">✔ Add TypeScript? … No/Yes
|
||
</span><span class="code-line">✔ Add JSX Support? … No/Yes
|
||
</span><span class="code-line">✔ Add Vue Router <span class="token keyword">for</span> Single Page Application development? … No/Yes
|
||
</span><span class="code-line">✔ Add Pinia <span class="token keyword">for</span> state management? … No/Yes
|
||
</span><span class="code-line">✔ Add Vitest <span class="token keyword">for</span> Unit testing? … No/Yes
|
||
</span><span class="code-line">✔ Add Cypress <span class="token keyword">for</span> both Unit and End-to-End testing? … No/Yes
|
||
</span><span class="code-line">✔ Add ESLint <span class="token keyword">for</span> code quality? … No/Yes
|
||
</span><span class="code-line">✔ Add Prettier <span class="token keyword">for</span> code formatting? … No/Yes
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">Scaffolding project <span class="token keyword">in</span> ./<span class="token operator"><</span>your-project-name<span class="token operator">></span><span class="token punctuation">..</span>.
|
||
</span><span class="code-line">Done.
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>安装依赖并启动开发服务器</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">cd</span> <span class="token operator"><</span>your-project-name<span class="token operator">></span>
|
||
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span>
|
||
</span><span class="code-line">$ <span class="token function">npm</span> run dev
|
||
</span></code></pre>
|
||
<p>当你准备将应用发布到生产环境时，请运行：</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> run build
|
||
</span></code></pre>
|
||
<p>此命令会在 <code>./dist</code> 文件夹中为你的应用创建一个生产环境的构建版本</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="应用实例"><a aria-hidden="true" tabindex="-1" href="#应用实例"><span class="icon icon-link"></span></a>应用实例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"Hello Vue3"</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> message
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>挂载应用</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ count }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="通过-cdn-使用-vue"><a aria-hidden="true" tabindex="-1" href="#通过-cdn-使用-vue"><span class="icon icon-link"></span></a>通过 CDN 使用 Vue</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/vue@3/dist/vue.global.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> <span class="token punctuation">{</span> createApp<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Vue</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"Hello Vue3"</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> message
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-es-模块构建版本"><a aria-hidden="true" tabindex="-1" href="#使用-es-模块构建版本"><span class="icon icon-link"></span></a>使用 ES 模块构建版本</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ message, ref }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"Hello Vue3"</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> message
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="模板语法"><a aria-hidden="true" tabindex="-1" href="#模板语法"><span class="icon icon-link"></span></a>模板语法</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本插值"><a aria-hidden="true" tabindex="-1" href="#文本插值"><span class="icon icon-link"></span></a>文本插值</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Message: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>使用的是 <code>Mustache</code> 语法 (即双大括号)，每次 <code>msg</code> 属性更改时它也会同步更新</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="原始-html"><a aria-hidden="true" tabindex="-1" href="#原始-html"><span class="icon icon-link"></span></a>原始 HTML</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using text interpolation: {{ rawHtml }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using v-html directive: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rawHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>双大括号<code>{{}}</code>会将数据解释为纯文本，使用 <code>v-html</code> 指令，将插入 HTML</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="attribute-绑定"><a aria-hidden="true" tabindex="-1" href="#attribute-绑定"><span class="icon icon-link"></span></a>Attribute 绑定</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>简写</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="布尔型-attribute"><a aria-hidden="true" tabindex="-1" href="#布尔型-attribute"><span class="icon icon-link"></span></a>布尔型 Attribute</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isButtonDisabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Button
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="动态绑定多个值"><a aria-hidden="true" tabindex="-1" href="#动态绑定多个值"><span class="icon icon-link"></span></a>动态绑定多个值</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>通过不带参数的 <code>v-bind</code>，你可以将它们绑定到单个元素上</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports">comp</span> <span class="token keyword module">from</span> <span class="token string">"./Comp.vue"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"vue"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>comp</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{a, b}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>comp</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如果你是使用的 <code>setup</code> 语法糖。需要使用 <code>defineprops</code> 声名（可以直接使用<code>a</code>/<code>b</code>）</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-javascript-表达式"><a aria-hidden="true" tabindex="-1" href="#使用-javascript-表达式"><span class="icon icon-link"></span></a>使用 JavaScript 表达式</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line">{{ number + 1 }}
|
||
</span><span class="code-line">{{ ok ? 'YES' : 'NO' }}
|
||
</span><span class="code-line">{{ message.split('').reverse().join('') }}
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`list-${id}`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="仅支持表达式例子都是无效"><a aria-hidden="true" tabindex="-1" href="#仅支持表达式例子都是无效"><span class="icon icon-link"></span></a>仅支持表达式(例子都是无效)</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 这是一个语句，而非表达式 --></span>
|
||
</span><span class="code-line">{{ var a = 1 }}
|
||
</span><span class="code-line"><span class="token comment"><!-- 条件控制也不支持，请使用三元表达式 --></span>
|
||
</span><span class="code-line">{{ if (ok) { return message } }}
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="调用函数"><a aria-hidden="true" tabindex="-1" href="#调用函数"><span class="icon icon-link"></span></a>调用函数</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toTitleDate(date)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ formatDate(date) }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令-directives"><a aria-hidden="true" tabindex="-1" href="#指令-directives"><span class="icon icon-link"></span></a>指令 Directives</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Now you see me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="参数-arguments"><a aria-hidden="true" tabindex="-1" href="#参数-arguments"><span class="icon icon-link"></span></a>参数 Arguments</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="绑定事件"><a aria-hidden="true" tabindex="-1" href="#绑定事件"><span class="icon icon-link"></span></a>绑定事件</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动态参数"><a aria-hidden="true" tabindex="-1" href="#动态参数"><span class="icon icon-link"></span></a>动态参数</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>[attributeName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:[attributeName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>这里的 <code>attributeName</code> 会作为一个 JS 表达式被动态执行</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动态的事件名称"><a aria-hidden="true" tabindex="-1" href="#动态的事件名称"><span class="icon icon-link"></span></a>动态的事件名称</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>[eventName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">@[eventName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="修饰符-modifiers"><a aria-hidden="true" tabindex="-1" href="#修饰符-modifiers"><span class="icon icon-link"></span></a>修饰符 Modifiers</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">@submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>.prevent</code> 修饰符会告知 <code>v-on</code> 指令对触发的事件调用 <code>event.preventDefault()</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令语法"><a aria-hidden="true" tabindex="-1" href="#指令语法"><span class="icon icon-link"></span></a>指令语法</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">v-on:submit.prevent<span class="token operator">=</span><span class="token string">"onSubmit"</span>
|
||
</span><span class="code-line">──┬─ ─┬──── ─┬───── ─┬──────
|
||
</span><span class="code-line"> ┆ ┆ ┆ ╰─ Value 解释为JS表达式
|
||
</span><span class="code-line"> ┆ ┆ ╰─ Modifiers 由前导点表示
|
||
</span><span class="code-line"> ┆ ╰─ Argument 跟随冒号或速记符号
|
||
</span><span class="code-line"> ╰─ Name 以 v- 开头使用速记时可以省略
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式基础"><a aria-hidden="true" tabindex="-1" href="#响应式基础"><span class="icon icon-link"></span></a>响应式基础</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明状态"><a aria-hidden="true" tabindex="-1" href="#声明状态"><span class="icon icon-link"></span></a>声明状态</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ state.count }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="wrap-text"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// `defineComponent`用于IDE推导类型</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// setup 用于组合式 API 的特殊钩子函数</span>
|
||
</span><span class="code-line highlight-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 暴露 state 到模板</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> state
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明方法"><a aria-hidden="true" tabindex="-1" href="#声明方法"><span class="icon icon-link"></span></a>声明方法</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ state.count }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="wrap-text"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> state<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 不要忘记同时暴露 increment 函数</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> state<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> increment
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="script-setup-setup语法糖"><a aria-hidden="true" tabindex="-1" href="#script-setup-setup语法糖"><span class="icon icon-link"></span></a><code><script setup></code> setup语法糖</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> reactive <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> state<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ state.count }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><strong><code>setup</code></strong> 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="用-ref-定义响应式变量"><a aria-hidden="true" tabindex="-1" href="#用-ref-定义响应式变量"><span class="icon icon-link"></span></a>用 <code>ref()</code> 定义响应式变量</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p><code>reactive</code>只能用于对象、数组和 <code>Map</code>、<code>Set</code> 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用<code>ref</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { value: 0 }</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span>
|
||
</span><span class="code-line">count<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> objectRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 这是响应式的替换</span>
|
||
</span><span class="code-line">objectRef<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 该函数接收一个 ref</span>
|
||
</span><span class="code-line"><span class="token comment">// 需要通过 .value 取值</span>
|
||
</span><span class="code-line"><span class="token comment">// 但它会保持响应性</span>
|
||
</span><span class="code-line"><span class="token function">callSomeFunction</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token property-access">foo</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 仍然是响应式的</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>在 html 模板中不需要带 <code>.value</code> 就可以使用</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ count }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="有状态方法"><a aria-hidden="true" tabindex="-1" href="#有状态方法"><span class="icon icon-link"></span></a>有状态方法</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> defineComponent<span class="token punctuation">,</span> onUnmounted <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> debounce <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'lodash-es'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 每个实例都有了自己的预置防抖的处理函数</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> debouncedClick <span class="token operator">=</span> <span class="token function">debounce</span><span class="token punctuation">(</span>click<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">function</span> <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ... 对点击的响应 ...</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 最好是在组件卸载时</span>
|
||
</span><span class="code-line"> <span class="token comment">// 清除掉防抖计时器</span>
|
||
</span><span class="code-line"> <span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> debouncedClick<span class="token punctuation">.</span><span class="token method function property-access">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="响应式样式"><a aria-hidden="true" tabindex="-1" href="#响应式样式"><span class="icon icon-link"></span></a>响应式样式</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> open <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>open = !open<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Hello Vue!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">div</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> height <span class="token number">0.1</span><span class="token unit">s</span> linear<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">v-bind</span><span class="token punctuation">(</span>open ? <span class="token string">'30px'</span> <span class="token punctuation">:</span> <span class="token string">'0px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式进阶--watch-和-computed"><a aria-hidden="true" tabindex="-1" href="#响应式进阶--watch-和-computed"><span class="icon icon-link"></span></a>响应式进阶 —— watch 和 computed</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="监听状态"><a aria-hidden="true" tabindex="-1" href="#监听状态"><span class="icon icon-link"></span></a>监听状态</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> isEvent <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> state<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> isEvent<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> count<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ count }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> is event: {{ isEvent ? 'yes' : 'no' }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="立即监听状态"><a aria-hidden="true" tabindex="-1" href="#立即监听状态"><span class="icon icon-link"></span></a>立即监听状态</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="wrap-text"><code class="language-js code-highlight"><span class="code-line"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> isEvent<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> count<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 上例中的 watch 不会立即执行，导致 isEvent 状态的初始值不准确。配置立即执行，会在一开始的时候立即执行一次</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="监听多个值"><a aria-hidden="true" tabindex="-1" href="#监听多个值"><span class="icon icon-link"></span></a>监听多个值</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span> {{ count1 }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span> {{ count2 }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count1++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count2++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> watch<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> count1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> count2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">watch</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 监听的表达式或函数</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">count1</span><span class="token operator">:</span> count1<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">count2</span><span class="token operator">:</span> count2<span class="token punctuation">.</span><span class="token property-access">value</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 回调函数</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 在这里执行需要的逻辑</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'count1 或 count2 变化了：'</span><span class="token punctuation">,</span> newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计算状态"><a aria-hidden="true" tabindex="-1" href="#计算状态"><span class="icon icon-link"></span></a>计算状态</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// computed 的回调函数里</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 会根据已有并用到的状态计算出新的状态</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> capital <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> text<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>to capital: {{ capital }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="组件通信"><a aria-hidden="true" tabindex="-1" href="#组件通信"><span class="icon icon-link"></span></a>组件通信</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineprops"><a aria-hidden="true" tabindex="-1" href="#defineprops"><span class="icon icon-link"></span></a>defineProps</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineProps <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 这里可以将 `username` 解构出来，</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 但是一旦解构出来再使用，就不具备响应式能力</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>username: {{ username }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>子组件定义需要的参数</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children</span> <span class="token attr-name">:username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>父组件参入参数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineemits"><a aria-hidden="true" tabindex="-1" href="#defineemits"><span class="icon icon-link"></span></a>defineEmits</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineEmits<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> emit <span class="token operator">=</span> <span class="token function">defineEmits</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'search'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'search'</span><span class="token punctuation">,</span> keyword<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>子组件定义支持 <code>emit</code> 的函数</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">keyword</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children</span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>父组件绑定子组件定义的事件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineexpose"><a aria-hidden="true" tabindex="-1" href="#defineexpose"><span class="icon icon-link"></span></a>defineExpose</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineExpose<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span> onSearch <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>子组件对父组件暴露方法</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> childrenRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> childrenRef<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">onSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>childrenRef<span class="token punctuation">'</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>父组件调用子组件的方法</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="provide--inject"><a aria-hidden="true" tabindex="-1" href="#provide--inject"><span class="icon icon-link"></span></a>Provide / Inject</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> InjectionKey<span class="token punctuation">,</span> Ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> ProvideKey <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> InjectionKey<span class="token operator"><</span>Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">>></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>在应用中使用 <code>ProvideKey</code></p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> provide<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ProvideKey</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./types'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> text <span class="token operator">=</span> ref<span class="token operator"><</span>string<span class="token operator">></span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token maybe-class-name">ProvideKey</span><span class="token punctuation">,</span> text<span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>父组件为后代组件提供数据</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token operator"><</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ProvideKey <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./types'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>ProvideKey<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token operator"><</span>template<span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
|
||
</span></code></pre>
|
||
<p class="wrap-text ">后代组件注入父组件提供的数据</p>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="路由"><a aria-hidden="true" tabindex="-1" href="#路由"><span class="icon icon-link"></span></a>路由</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="1-路由的基本使用"><a aria-hidden="true" tabindex="-1" href="#1-路由的基本使用"><span class="icon icon-link"></span></a>1. 路由的基本使用</h3><div class="wrap-body">
|
||
<h4 id="开启命名空间后组件中读取state数据"><a aria-hidden="true" tabindex="-1" href="#开启命名空间后组件中读取state数据"><span class="icon icon-link"></span></a>开启命名空间后，组件中读取state数据</h4>
|
||
<p>方式一：自己直接读取</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$store</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">personAbout</span><span class="token punctuation">.</span><span class="token property-access">list</span>
|
||
</span></code></pre>
|
||
<p>方式二：借助 mapState 读取：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token spread operator">...</span><span class="token method function property-access">mapState</span><span class="token punctuation">(</span><span class="token string">'countAbout'</span><span class="token punctuation">,</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">'sum'</span><span class="token punctuation">,</span><span class="token string">'school'</span><span class="token punctuation">,</span><span class="token string">'subject'</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<h4 id="开启命名空间后组件中读取getters数据"><a aria-hidden="true" tabindex="-1" href="#开启命名空间后组件中读取getters数据"><span class="icon icon-link"></span></a>开启命名空间后，组件中读取getters数据</h4>
|
||
<p>方式一：自己直接读取</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$store</span><span class="token punctuation">.</span><span class="token property-access">getters</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">'personAbout/firstPersonName'</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span>
|
||
</span></code></pre>
|
||
<p>方式二：借助 mapGetters 读取：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token spread operator">...</span><span class="token method function property-access">mapGetters</span><span class="token punctuation">(</span><span class="token string">'countAbout'</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'bigSum'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="开启命名空间后组件中调用dispatch"><a aria-hidden="true" tabindex="-1" href="#开启命名空间后组件中调用dispatch"><span class="icon icon-link"></span></a>开启命名空间后，组件中调用dispatch</h4>
|
||
<p>方式一：自己直接 dispatch</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$store</span><span class="token punctuation">.</span><span class="token method function property-access">dispatch</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">'personAbout/addPersonWang'</span><span class="token punctuation">,</span> person
|
||
</span><span class="code-line"><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>方式二：借助mapActions:</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token spread operator">...</span><span class="token method function property-access">mapActions</span><span class="token punctuation">(</span><span class="token string">'countAbout'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">incrementOdd</span><span class="token operator">:</span><span class="token string">'jia0dd'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">incrementWait</span><span class="token operator">:</span><span class="token string">'jiaWait'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="开启命名空间后组件中调用commit"><a aria-hidden="true" tabindex="-1" href="#开启命名空间后组件中调用commit"><span class="icon icon-link"></span></a>开启命名空间后，组件中调用commit</h4>
|
||
<p>方式一：自己直接 commit</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$store</span><span class="token punctuation">.</span><span class="token method function property-access">commit</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">'personAbout/ADD_PERSON'</span><span class="token punctuation">,</span> person
|
||
</span><span class="code-line"><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>方式二：借助 mapMutations:</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token spread operator">...</span><span class="token method function property-access">mapMutations</span><span class="token punctuation">(</span><span class="token string">'countAbout'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">increment</span><span class="token operator">:</span><span class="token string">'JIA'</span><span class="token punctuation">,</span><span class="token literal-property property">decrement</span><span class="token operator">:</span><span class="token string">'JIAN'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="2-路由的使用"><a aria-hidden="true" tabindex="-1" href="#2-路由的使用"><span class="icon icon-link"></span></a>2. 路由的使用</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">VueRouter</span></span> <span class="token keyword module">from</span> <span class="token string">'vue-router'</span>
|
||
</span><span class="code-line"><span class="token comment">// 引入Luyou 组件</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">About</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/About'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Home</span></span> <span class="token keyword module">from</span> <span class="token string">'../components/Home'</span>
|
||
</span><span class="code-line"><span class="token comment">// 创建router实例对象，去管理一组一组的路由规则</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token maybe-class-name">About</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token maybe-class-name">Home</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// 暴露 router</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> router
|
||
</span></code></pre>
|
||
<p>实现切换（active-class可配置高亮样式）</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> About
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>指定展示位置</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-diew</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>几个注意点</p>
|
||
<ul class="style-list-arrow">
|
||
<li>路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。</li>
|
||
<li>通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。</li>
|
||
<li>每个组件都有自己的$route属性，里面存储着自己的路由信息。</li>
|
||
<li>整个应用只有一个router，可以通过组件的srouter 属性获取到。</li>
|
||
</ul>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="3路由的query"><a aria-hidden="true" tabindex="-1" href="#3路由的query"><span class="icon icon-link"></span></a>3.路由的query</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<blockquote>
|
||
<p>接收参数 <code>{{route.query.id}}</code></p>
|
||
</blockquote>
|
||
<h4 id="跳转路由并携带参数"><a aria-hidden="true" tabindex="-1" href="#跳转路由并携带参数"><span class="icon icon-link"></span></a>跳转路由并携带参数</h4>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of data<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`/home/message/mes?id=${item.id}&title=${item.mes}`<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{item.mes}}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="4-命名路由"><a aria-hidden="true" tabindex="-1" href="#4-命名路由"><span class="icon icon-link"></span></a>4. 命名路由</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token literal-property property">routes</span><span class="token operator">:</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'/about'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">AboutBody</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'/home'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeBody</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'news'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeChild</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'message'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeChild1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">//多级路由</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'richu'</span><span class="token punctuation">,</span> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'mes'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeMessage</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span>
|
||
</span></code></pre>
|
||
<p>使用</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> name:'',
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> path:'/home/message/mes',
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> query:{ id:item.id,title:item.mes }
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="5params参数的使用"><a aria-hidden="true" tabindex="-1" href="#5params参数的使用"><span class="icon icon-link"></span></a>5.params参数的使用</h3><div class="wrap-body">
|
||
<h4 id="1-声明接收"><a aria-hidden="true" tabindex="-1" href="#1-声明接收"><span class="icon icon-link"></span></a>1. 声明接收</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'richu'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'mes/:id/:title'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeMessage</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span>
|
||
</span></code></pre>
|
||
<h4 id="2-传递"><a aria-hidden="true" tabindex="-1" href="#2-传递"><span class="icon icon-link"></span></a>2. 传递</h4>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of data<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`/home/message/mes/${item.id}/${item.mes}`<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>{{item.mes}}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<h4 id="3-接收"><a aria-hidden="true" tabindex="-1" href="#3-接收"><span class="icon icon-link"></span></a>3. 接收</h4>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>编号{{$route.params.id}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>标题{{$route.params.title}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="6props的使用"><a aria-hidden="true" tabindex="-1" href="#6props的使用"><span class="icon icon-link"></span></a>6.props的使用</h3><div class="wrap-body">
|
||
<p>路由的props配置</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'detail/:id'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">Detail</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>作用：让路由组件更方便的收到参数</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detai1组件</span>
|
||
</span><span class="code-line"><span class="token comment">// props:{a:900]</span>
|
||
</span><span class="code-line"><span class="token comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detai1组件</span>
|
||
</span><span class="code-line"><span class="token comment">// props:true</span>
|
||
</span><span class="code-line"><span class="token comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span>
|
||
</span><span class="code-line"><span class="token function">props</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span>route<span class="token punctuation">.</span><span class="token property-access">query</span><span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span>route<span class="token punctuation">.</span><span class="token property-access">query</span><span class="token punctuation">.</span><span class="token property-access">title</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><router-link> 的 replace 属性</p>
|
||
<ol>
|
||
<li>作用：控制路由跳转时操作浏览器历史记录的模式</li>
|
||
<li>浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push</li>
|
||
<li>如何开启replace 模式： <code>push</code> 是追加历史记录,<code>replace</code> 是替换当前记录[路由跳转时候 <code><router-link replace>News\</router-link></code>]</li>
|
||
</ol>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="7-编程式路由导航"><a aria-hidden="true" tabindex="-1" href="#7-编程式路由导航"><span class="icon icon-link"></span></a>7. 编程式路由导航</h3><div class="wrap-body">
|
||
<p>作用：不借助router-link实现路由跳转，让跳转更加灵活</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$router</span><span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span> xxx<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> xxx
|
||
</span><span class="code-line"> <span class="token comment">// 实现路由跳转，让路由跳转更加灵活</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$router</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span>xxx<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span>xxx
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$router</span><span class="token punctuation">.</span><span class="token method function property-access">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$router</span><span class="token punctuation">.</span><span class="token method function property-access">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$router</span><span class="token punctuation">.</span><span class="token method function property-access">go</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="8缓存路由组件"><a aria-hidden="true" tabindex="-1" href="#8缓存路由组件"><span class="icon icon-link"></span></a>8.缓存路由组件</h3><div class="wrap-body">
|
||
<p>让不展示的路由组件保持挂载，不被销毁，示例：</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>keep-alive</span> <span class="token attr-name">include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>news<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>keep-alive</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<ul>
|
||
<li><code>include</code> 里面写模块名,用于保存指定的模块</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="9新生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#9新生命周期钩子"><span class="icon icon-link"></span></a>9.新生命周期钩子</h3><div class="wrap-body">
|
||
<blockquote>
|
||
<p>作用：路由组件独有的，用于捕获路由组件的激活状态</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>activated</code> 路由组件被激活时触发</li>
|
||
<li><code>deactivated</code> 路由组件失活时触发</li>
|
||
</ul>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="路由守卫"><a aria-hidden="true" tabindex="-1" href="#路由守卫"><span class="icon icon-link"></span></a>路由守卫</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="1前置路由守卫"><a aria-hidden="true" tabindex="-1" href="#1前置路由守卫"><span class="icon icon-link"></span></a>1.前置路由守卫</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line">route<span class="token punctuation">.</span><span class="token method function property-access">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword module">from</span><span class="token punctuation">,</span>to<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token arrow operator">=></span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">isAuth</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token keyword control-flow">else</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>前置路由</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="2后置路由守卫"><a aria-hidden="true" tabindex="-1" href="#2后置路由守卫"><span class="icon icon-link"></span></a>2.后置路由守卫</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line">route<span class="token punctuation">.</span><span class="token method function property-access">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword module">from</span><span class="token punctuation">,</span>to</span><span class="token punctuation">)</span><span class="token arrow operator">=></span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token operator">=</span><span class="token keyword module">from</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>后置路由</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="3独享路由守卫"><a aria-hidden="true" tabindex="-1" href="#3独享路由守卫"><span class="icon icon-link"></span></a>3.独享路由守卫</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'news'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">component</span><span class="token operator">:</span><span class="token maybe-class-name">HomeChild</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">meta</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">"新闻"</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">beforeEnter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword module">from</span><span class="token punctuation">,</span>to<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token arrow operator">=></span><span class="token punctuation">{</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>独享路由守卫只有前置路由守卫没有后置路由守卫</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="4组件内路由守卫"><a aria-hidden="true" tabindex="-1" href="#4组件内路由守卫"><span class="icon icon-link"></span></a>4.组件内路由守卫</h3><div class="wrap-body">
|
||
<p>通过路由规则，进入该组件时被调用</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword module">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>通过路由规则，离开组件时被调用</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword module">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="vue-中使用-typescript"><a aria-hidden="true" tabindex="-1" href="#vue-中使用-typescript"><span class="icon icon-link"></span></a>Vue 中使用 TypeScript</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="为组件的-props-标注类型"><a aria-hidden="true" tabindex="-1" href="#为组件的-props-标注类型"><span class="icon icon-link"></span></a>为组件的 props 标注类型</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-4-->
|
||
<p>当使用 <code><script setup></code> 时，<code>defineProps()</code> 宏函数支持从它的参数中推导类型</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">,</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token known-class-name class-name">Number</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">props<span class="token punctuation">.</span><span class="token property-access">foo</span> <span class="token comment">// string</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">props<span class="token punctuation">.</span><span class="token property-access">bar</span> <span class="token comment">// number | undefined</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>对同一个文件中的一个接口或对象类型字面量的引用：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator"><</span>Props<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="props-解构默认值"><a aria-hidden="true" tabindex="-1" href="#props-解构默认值"><span class="icon icon-link"></span></a>Props 解构默认值</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> msg<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> labels<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">withDefaults</span><span class="token punctuation">(</span><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator"><</span>Props<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> msg<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">labels</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>使用目前为实验性的响应性语法糖</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">name</span><span class="token operator">:</span> string
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> count<span class="token operator">?</span><span class="token operator">:</span> number
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 对 defineProps() 的响应性解构</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 默认值会被编译为等价的运行时选项</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> name<span class="token punctuation">,</span> count <span class="token operator">=</span> <span class="token number">100</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span> <span class="token operator">=</span> defineProps<span class="token operator"><</span><span class="token maybe-class-name">Props</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为组件的-emits-标注类型"><a aria-hidden="true" tabindex="-1" href="#为组件的-emits-标注类型"><span class="icon icon-link"></span></a>为组件的 emits 标注类型</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 运行时</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> emit <span class="token operator">=</span> <span class="token function">defineEmits</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token string">'update'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 基于类型</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> emit <span class="token operator">=</span> defineEmits<span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span>e<span class="token operator">:</span> <span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span>e<span class="token operator">:</span> <span class="token string">'update'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为-ref-标注类型"><a aria-hidden="true" tabindex="-1" href="#为-ref-标注类型"><span class="icon icon-link"></span></a>为 ref() 标注类型</h3><div class="wrap-body">
|
||
<p>ref 会根据初始化时的值推导其类型：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> year<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'2020'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">year<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">2020</span> <span class="token comment">// 成功！</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为-reactive-标注类型"><a aria-hidden="true" tabindex="-1" href="#为-reactive-标注类型"><span class="icon icon-link"></span></a>为 reactive() 标注类型</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Book</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> year<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> book<span class="token operator">:</span> Book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token string">'Vue 3 指引'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为-computed-标注类型"><a aria-hidden="true" tabindex="-1" href="#为-computed-标注类型"><span class="icon icon-link"></span></a>为 computed() 标注类型</h3><div class="wrap-body">
|
||
<p>你还可以通过泛型参数显式指定类型：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> double <span class="token operator">=</span> <span class="token generic-function"><span class="token function">computed</span><span class="token generic class-name"><span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 若返回值不是 number 类型则会报错</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="为事件处理函数标注类型"><a aria-hidden="true" tabindex="-1" href="#为事件处理函数标注类型"><span class="icon icon-link"></span></a>为事件处理函数标注类型</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// `event` 隐式地标注为 `any` 类型</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleChange<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>显式地为事件处理函数的参数标注类型</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>event<span class="token operator">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token keyword">as</span> HTMLInputElement
|
||
</span><span class="code-line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为-provide--inject-标注类型"><a aria-hidden="true" tabindex="-1" href="#为-provide--inject-标注类型"><span class="icon icon-link"></span></a>为 provide / inject 标注类型</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> provide<span class="token punctuation">,</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> InjectionKey <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> InjectionKey<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// 若提供的是非字符串值会导致错误</span>
|
||
</span><span class="code-line"><span class="token function">provide</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// foo 的类型：string | undefined</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为模板引用标注类型"><a aria-hidden="true" tabindex="-1" href="#为模板引用标注类型"><span class="icon icon-link"></span></a>为模板引用标注类型</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> el <span class="token operator">=</span> ref<span class="token operator"><</span><span class="token maybe-class-name">HTMLInputElement</span> <span class="token operator">|</span> <span class="token keyword null nil">null</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> el<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token operator">?.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为组件模板引用标注类型"><a aria-hidden="true" tabindex="-1" href="#为组件模板引用标注类型"><span class="icon icon-link"></span></a>为组件模板引用标注类型</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- MyModal.vue --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> isContentShown <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">open</span> <span class="token operator">=</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>isContentShown<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> open
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>使用 TypeScript 内置的 <code>InstanceType</code> 工具类型来获取其实例类</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- App.vue --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">MyModal</span></span> <span class="token keyword module">from</span> <span class="token string">'./MyModal.vue'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">type <span class="token maybe-class-name">Modal</span> <span class="token operator">=</span> <span class="token maybe-class-name">InstanceType</span><span class="token operator"><</span><span class="token keyword">typeof</span> <span class="token maybe-class-name">MyModal</span><span class="token operator">></span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> modal <span class="token operator">=</span> ref<span class="token operator"><</span><span class="token maybe-class-name">Modal</span> <span class="token operator">|</span> <span class="token keyword null nil">null</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">openModal</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> modal<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token operator">?.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="选项式-api-为组件的-props-标注类型"><a aria-hidden="true" tabindex="-1" href="#选项式-api-为组件的-props-标注类型"><span class="icon icon-link"></span></a>选项式 API 为组件的 props 标注类型</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 启用了类型推导</span>
|
||
</span><span class="code-line"> props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> String<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token punctuation">[</span>Number<span class="token punctuation">,</span> String<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> msg<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> metadata<span class="token operator">:</span> <span class="token keyword">null</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 类型：string | undefined</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>name
|
||
</span><span class="code-line"> <span class="token comment">// 类型：number|string|undefined</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>id
|
||
</span><span class="code-line"> <span class="token comment">// 类型：string</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>msg
|
||
</span><span class="code-line"> <span class="token comment">// 类型：any</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>metadata
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>使用 PropType 这个工具类型来标记更复杂的 props 类型</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> PropType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Book</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> author<span class="token operator">:</span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> year<span class="token operator">:</span> <span class="token builtin">number</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> book<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 提供相对 `Object` 更确定的类型</span>
|
||
</span><span class="code-line"> type<span class="token operator">:</span> Object <span class="token keyword">as</span> PropType<span class="token operator"><</span>Book<span class="token operator">></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> required<span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 也可以标记函数</span>
|
||
</span><span class="code-line"> callback<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token keyword">as</span> PropType<span class="token operator"><</span><span class="token punctuation">(</span>id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>book<span class="token punctuation">.</span>title <span class="token comment">// string</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>book<span class="token punctuation">.</span>year <span class="token comment">// number</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// TS Error: argument of type 'string' is not</span>
|
||
</span><span class="code-line"> <span class="token comment">// assignable to parameter of type 'number'</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>callback<span class="token operator">?.</span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api-为组件的-emits-标注类型"><a aria-hidden="true" tabindex="-1" href="#选项式-api-为组件的-emits-标注类型"><span class="icon icon-link"></span></a>选项式 API 为组件的 emits 标注类型</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Payload</span> <span class="token operator">=</span> <span class="token punctuation">{</span> bookName<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> emits<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">addBook</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> Payload<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 执行运行时校验</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> payload<span class="token punctuation">.</span>bookName<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">onSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addBook'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> bookName<span class="token operator">:</span> <span class="token number">123</span> <span class="token comment">// 类型错误</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token comment">// 类型错误</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'non-declared-event'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="选项式-api-为计算属性标记类型"><a aria-hidden="true" tabindex="-1" href="#选项式-api-为计算属性标记类型"><span class="icon icon-link"></span></a>选项式 API 为计算属性标记类型</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>计算属性会自动根据其返回值来推导其类型：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> message<span class="token operator">:</span> <span class="token string">'Hello!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">+</span> <span class="token string">'!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>greeting <span class="token comment">// 类型：string</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>在某些场景中，你可能想要显式地标记出计算属性的类型以确保其实现是正确的：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> message<span class="token operator">:</span> <span class="token string">'Hello!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 显式标注返回类型</span>
|
||
</span><span class="code-line"> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">+</span> <span class="token string">'!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 标注一个可写的计算属性</span>
|
||
</span><span class="code-line"> greetingUppercased<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>greeting<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> newValue<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api-为事件处理函数标注类型"><a aria-hidden="true" tabindex="-1" href="#选项式-api-为事件处理函数标注类型"><span class="icon icon-link"></span></a>选项式 API 为事件处理函数标注类型</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">handleChange</span><span class="token punctuation">(</span>event<span class="token operator">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target <span class="token keyword">as</span> HTMLInputElement<span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api-扩展全局属性"><a aria-hidden="true" tabindex="-1" href="#选项式-api-扩展全局属性"><span class="icon icon-link"></span></a>选项式 API 扩展全局属性</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'vue'</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">ComponentCustomProperties</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> $http<span class="token operator">:</span> <span class="token keyword">typeof</span> axios
|
||
</span><span class="code-line"> <span class="token function-variable function">$translate</span><span class="token operator">:</span> <span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="类型扩展的位置"><a aria-hidden="true" tabindex="-1" href="#类型扩展的位置"><span class="icon icon-link"></span></a>类型扩展的位置</h4>
|
||
<p>我们可以将这些类型扩展放在一个 <code>.ts</code> 文件，或是一个影响整个项目的 <code>*.d.ts</code> 文件中</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">// 不工作，将覆盖原始类型。</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'vue'</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">ComponentCustomProperties</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">$translate</span><span class="token operator">:</span> <span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">// 正常工作。</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'vue'</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">ComponentCustomProperties</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">$translate</span><span class="token operator">:</span> <span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api-扩展自定义选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api-扩展自定义选项"><span class="icon icon-link"></span></a>选项式 API 扩展自定义选项</h3><div class="wrap-body">
|
||
<p>某些插件，比如 vue-router，提供了一些自定义的组件选项，比如 beforeRouteEnter：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">beforeRouteEnter</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>如果没有确切的类型标注，这个钩子函数的参数会隐式地标注为 <code>any</code> 类型。我们可以为 <code>ComponentCustomOptions</code> 接口扩展自定义的选项来支持：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'vue'</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">ComponentCustomOptions</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> beforeRouteEnter<span class="token operator">?</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> to<span class="token operator">:</span> Route<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> from<span class="token operator">:</span> Route<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="性能优化"><a aria-hidden="true" tabindex="-1" href="#性能优化"><span class="icon icon-link"></span></a>性能优化</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍-1"><a aria-hidden="true" tabindex="-1" href="#介绍-1"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<p>性能优化是构建高效 Vue 应用的关键。以下是一些特殊的优化策略，结合 Vue 的特性，可以大幅减少渲染开销、提升加载速度和用户体验。这些方法不仅限于单一 API，而是从整体架构和开发实践出发，提供通用的性能提升思路。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="条件渲染与缓存结合"><a aria-hidden="true" tabindex="-1" href="#条件渲染与缓存结合"><span class="icon icon-link"></span></a>条件渲染与缓存结合</h3><div class="wrap-body">
|
||
<p>通过结合 <code>v-if</code> 和 <code><KeepAlive></code>，可以避免频繁销毁和重建组件，尤其是在切换视图或路由时。搭配 <code>defineAsyncComponent</code> 实现懒加载，进一步减少初次加载的开销。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle View<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>keep-alive</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentView<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>keep-alive</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> defineAsyncComponent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> currentView <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'ViewA'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">toggle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> currentView<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> currentView<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">===</span> <span class="token string">'ViewA'</span> <span class="token operator">?</span> <span class="token string">'ViewB'</span> <span class="token operator">:</span> <span class="token string">'ViewA'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token maybe-class-name">ViewA</span> <span class="token operator">=</span> <span class="token function">defineAsyncComponent</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword module">import</span><span class="token punctuation">(</span><span class="token string">'./ViewA.vue'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token maybe-class-name">ViewB</span> <span class="token operator">=</span> <span class="token function">defineAsyncComponent</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword module">import</span><span class="token punctuation">(</span><span class="token string">'./ViewB.vue'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">//<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>KeepAlive</span><span class="token punctuation">></span></span> 缓存动态组件，防止重复创建和销毁。
|
||
</span><span class="code-line">//defineAsyncComponent 实现组件懒加载，仅在需要时加载模块。
|
||
</span><span class="code-line">//效果：减少 DOM 操作和组件初始化的性能消耗，特别适合复杂组件切换或路由场景。
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="路由前置优化beforerouteenter"><a aria-hidden="true" tabindex="-1" href="#路由前置优化beforerouteenter"><span class="icon icon-link"></span></a>路由前置优化（beforeRouteEnter）</h3><div class="wrap-body">
|
||
<p>在路由进入前执行数据预取或条件检查，可以避免不必要的渲染和请求，提升页面加载效率。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Profile'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">beforeRouteEnter</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword module">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 模拟数据预取</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">fetchUserData</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span><span class="token property-access">params</span><span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">vm</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> vm<span class="token punctuation">.</span><span class="token property-access">user</span> <span class="token operator">=</span> user<span class="token punctuation">;</span> <span class="token comment">// 将数据传递给组件实例</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">next</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 阻止路由进入</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ user.name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应式对象的精简"><a aria-hidden="true" tabindex="-1" href="#响应式对象的精简"><span class="icon icon-link"></span></a>响应式对象的精简</h3><div class="wrap-body">
|
||
<p>避免将大型对象直接用 reactive 包裹，而是按需拆分，使用 ref 或 toRef 精细控制响应式范围，减少依赖追踪的开销。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> toRef<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> largeData <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">settings</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'test'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 仅将需要的部分设为响应式</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> userName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>largeData<span class="token punctuation">.</span><span class="token property-access">user</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span>largeData<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> firstItem <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>largeData<span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Theme: {{ settings.theme }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>First Item: {{ firstItem }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计算属性的延迟执行"><a aria-hidden="true" tabindex="-1" href="#计算属性的延迟执行"><span class="icon icon-link"></span></a>计算属性的延迟执行</h3><div class="wrap-body">
|
||
<p>通过封装计算属性并结合 watchEffect，实现按需计算，避免不必要的开销。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> watchEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> filterText <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> filteredItems <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> items<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span>filterText<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>filterText<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 仅在 filterText 不为空时触发计算</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> filteredItems<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>filterText<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Filter items<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in filteredItems<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-memo-缓存子树"><a aria-hidden="true" tabindex="-1" href="#v-memo-缓存子树"><span class="icon icon-link"></span></a>v-memo 缓存子树</h3><div class="wrap-body">
|
||
<p>v-memo 用于缓存模板子树，仅在依赖项变化时更新，常用于优化列表或静态内容。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span> <span class="token attr-name">v-memo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[item.updated]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ item.name }} - {{ expensiveComputation(item) }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token literal-property property">updated</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token literal-property property">updated</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">expensiveComputation</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 模拟复杂计算</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="事件节流与防抖"><a aria-hidden="true" tabindex="-1" href="#事件节流与防抖"><span class="icon icon-link"></span></a>事件节流与防抖</h3><div class="wrap-body">
|
||
<p>通过在事件处理中引入节流（throttle）或防抖（debounce），减少高频事件的触发频率。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> debounce <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'lodash-es'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> searchText <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> search <span class="token operator">=</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Search:'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 模拟搜索请求</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">handleInput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> searchText<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">search</span><span class="token punctuation">(</span>searchText<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleInput<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type to search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="虚拟列表virtual-scrolling"><a aria-hidden="true" tabindex="-1" href="#虚拟列表virtual-scrolling"><span class="icon icon-link"></span></a>虚拟列表（Virtual Scrolling）</h3><div class="wrap-body">
|
||
<p>对于长列表（如包含数千条数据的列表），可以使用虚拟列表技术，只渲染可视区域内的元素，减少 DOM 节点数量。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list-container<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list-viewport<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ height: totalHeight + 'px' }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list-content<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ transform: `translateY(${scrollTop}px)` }<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in visibleItems<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list-item<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ item.name }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> onUnmounted <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token known-class-name class-name">Array</span><span class="token punctuation">.</span><span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">id</span><span class="token operator">:</span> i<span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Item </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> itemHeight <span class="token operator">=</span> <span class="token number">40</span><span class="token punctuation">;</span> <span class="token comment">// 每项高度</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> viewportHeight <span class="token operator">=</span> <span class="token number">400</span><span class="token punctuation">;</span> <span class="token comment">// 视口高度</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> totalHeight <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> items<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">*</span> itemHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> scrollTop <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> visibleCount <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">ceil</span><span class="token punctuation">(</span>viewportHeight <span class="token operator">/</span> itemHeight<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// 多渲染2项作为缓冲</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> visibleItems <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">floor</span><span class="token punctuation">(</span>scrollTop<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">/</span> itemHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> end <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">min</span><span class="token punctuation">(</span>start <span class="token operator">+</span> visibleCount<span class="token punctuation">,</span> items<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> items<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">slice</span><span class="token punctuation">(</span>start<span class="token punctuation">,</span> end<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onScroll</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> scrollTop<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token property-access">scrollTop</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> list<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> list<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.list-container</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.list-item</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#ddd</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="按需加载资源lazy-loading-resources"><a aria-hidden="true" tabindex="-1" href="#按需加载资源lazy-loading-resources"><span class="icon icon-link"></span></a>按需加载资源（Lazy Loading Resources）</h3><div class="wrap-body">
|
||
<p>通过动态导入（Dynamic Import）按需加载非关键资源（如图片、第三方库），可以减少初次加载的开销，提升首屏渲染速度。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>loadChart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Load Chart<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ChartComponent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ChartComponent</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chartData<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token maybe-class-name">ChartComponent</span> <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> chartData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">loadChart</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 动态导入第三方库（如 Chart.js）</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token maybe-class-name">Chart</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token keyword module">import</span><span class="token punctuation">(</span><span class="token string">'chart.js/auto'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 模拟动态加载的图表组件</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">ChartComponent</span><span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'data'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><canvas ref="chart"></canvas></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">$refs</span><span class="token punctuation">.</span><span class="token property-access">chart</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">data</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="优化事件监听event-delegation"><a aria-hidden="true" tabindex="-1" href="#优化事件监听event-delegation"><span class="icon icon-link"></span></a>优化事件监听（Event Delegation）</h3><div class="wrap-body">
|
||
<p>通过事件委托（Event Delegation）将事件监听器绑定到父元素，减少直接绑定到每个子元素的事件监听器数量，适合动态列表或大量元素场景。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-list<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleItemClick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:data-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ item.name }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Item 1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Item 2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Item 3'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">handleItemClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> itemId <span class="token operator">=</span> event<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>itemId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked item with ID: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>itemId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.item-list</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#ddd</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="api-参考"><a aria-hidden="true" tabindex="-1" href="#api-参考"><span class="icon icon-link"></span></a>API 参考</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="全局-api---应用实例"><a aria-hidden="true" tabindex="-1" href="#全局-api---应用实例"><span class="icon icon-link"></span></a>全局 API - 应用实例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createApp()</code></td><td align="left">创建一个应用实例 <a href="https://cn.vuejs.org/api/application.html#create-app">#</a></td></tr><tr><td align="left"><code>createSSRApp()</code></td><td align="left">以 <a href="https://cn.vuejs.org/guide/scaling-up/ssr.html#client-hydration">SSR 激活</a>模式创建一个应用实例 <a href="https://cn.vuejs.org/api/application.html#create-ssr-app">#</a></td></tr><tr><td align="left"><code>app.mount()</code></td><td align="left">将应用实例挂载在一个容器元素中 <a href="https://cn.vuejs.org/api/application.html#app-mount">#</a></td></tr><tr><td align="left"><code>app.unmount()</code></td><td align="left">卸载一个已挂载的应用实例 <a href="https://cn.vuejs.org/api/application.html#app-unmount">#</a></td></tr><tr><td align="left"><code>app.provide()</code></td><td align="left">提供一个可以在应用中的所有后代组件中注入使用的值 <a href="https://cn.vuejs.org/api/application.html#app-provide">#</a></td></tr><tr><td align="left"><code>app.component()</code></td><td align="left">注册或获取全局组件 <a href="https://cn.vuejs.org/api/application.html#app-component">#</a></td></tr><tr><td align="left"><code>app.directive()</code></td><td align="left">注册或获取全局指令 <a href="https://cn.vuejs.org/api/application.html#app-directive">#</a></td></tr><tr><td align="left"><code>app.use()</code></td><td align="left">安装一个插件 <a href="https://cn.vuejs.org/api/application.html#app-use">#</a></td></tr><tr><td align="left"><code>app.mixin()</code></td><td align="left">全局注册一个混入 <a href="https://cn.vuejs.org/api/application.html#app-mixin">#</a></td></tr><tr><td align="left"><code>app.version</code></td><td align="left">当前应用所使用的 Vue 版本号 <a href="https://cn.vuejs.org/api/application.html#app-version">#</a></td></tr><tr><td align="left"><code>app.config</code></td><td align="left">获得应用实例的配置设定 <a href="https://cn.vuejs.org/api/application.html#app-config">#</a></td></tr><tr><td align="left"><code>app.config.errorHandler</code></td><td align="left">为应用内抛出的未捕获错误指定一个全局处理函数 <a href="https://cn.vuejs.org/api/application.html#app-config-errorhandler">#</a></td></tr><tr><td align="left"><code>app.config.warnHandler</code></td><td align="left">为 Vue 的运行时警告指定一个自定义处理函数 <a href="https://cn.vuejs.org/api/application.html#app-config-warnhandler">#</a></td></tr><tr><td align="left"><code>app.config.performance</code></td><td align="left">在浏览器开发工具中追踪性能表现 <a href="https://cn.vuejs.org/api/application.html#app-config-performance">#</a></td></tr><tr><td align="left"><code>app.config.compilerOptions</code></td><td align="left">配置运行时编译器的选项 <a href="https://cn.vuejs.org/api/application.html#app-config-compileroptions">#</a></td></tr><tr><td align="left"><code>app.config.globalProperties</code></td><td align="left">注册全局属性对象 <a href="https://cn.vuejs.org/api/application.html#app-config-globalproperties">#</a></td></tr><tr><td align="left"><code>app.config.optionMergeStrategies</code></td><td align="left">定义自定义组件选项的合并策略的对象 <a href="https://cn.vuejs.org/api/application.html#app-config-optionmergestrategies">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="全局-api---通用"><a aria-hidden="true" tabindex="-1" href="#全局-api---通用"><span class="icon icon-link"></span></a>全局 API - 通用</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>version</code></td><td align="left">Vue 版本号 <a href="https://cn.vuejs.org/api/general.html#version">#</a></td></tr><tr><td align="left"><code>nextTick()</code></td><td align="left">等待下一次 DOM 更新后执行回调 <a href="https://cn.vuejs.org/api/general.html#nexttick">#</a></td></tr><tr><td align="left"><code>defineComponent()</code></td><td align="left">在定义 Vue 组件时提供类型推导的辅助函数 <a href="https://cn.vuejs.org/api/general.html#definecomponent">#</a></td></tr><tr><td align="left"><code>defineAsyncComponent()</code></td><td align="left">定义一个异步组件 <a href="https://cn.vuejs.org/api/general.html#defineasynccomponent">#</a></td></tr><tr><td align="left"><code>defineCustomElement()</code></td><td align="left">和 <code>defineComponent</code> 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器 <a href="https://cn.vuejs.org/api/general.html#definecustomelement">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---setup"><a aria-hidden="true" tabindex="-1" href="#组合式-api---setup"><span class="icon icon-link"></span></a>组合式 API - setup()</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#basic-usage">#</a></td></tr><tr><td align="left"><code>访问 Props</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#accessing-props">#</a></td></tr><tr><td align="left"><code>Setup 上下文</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#setup-context">#</a></td></tr><tr><td align="left"><code>与渲染函数一起使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---依赖注入"><a aria-hidden="true" tabindex="-1" href="#组合式-api---依赖注入"><span class="icon icon-link"></span></a>组合式 API - 依赖注入</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide()</code></td><td align="left">提供一个可以被后代组件中注入使用的值 <a href="https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide">#</a></td></tr><tr><td align="left"><code>inject()</code></td><td align="left">注入一个由祖先组件提供的值 <a href="https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#组合式-api---生命周期钩子"><span class="icon icon-link"></span></a>组合式 API - 生命周期钩子</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>onMounted()</code></td><td align="left">组件挂载完成后执行 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted">#</a></td></tr><tr><td align="left"><code>onUpdated()</code></td><td align="left">状态变更而更新其 DOM 树之后调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onupdated">#</a></td></tr><tr><td align="left"><code>onUnmounted()</code></td><td align="left">组件实例被卸载之后调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted">#</a></td></tr><tr><td align="left"><code>onBeforeMount()</code></td><td align="left">组件被挂载之前被调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforemount">#</a></td></tr><tr><td align="left"><code>onBeforeUpdate()</code></td><td align="left">状态变更而更新其 DOM 树之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforeupdate">#</a></td></tr><tr><td align="left"><code>onBeforeUnmount()</code></td><td align="left">组件实例被卸载之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforeunmount">#</a></td></tr><tr><td align="left"><code>onErrorCaptured()</code></td><td align="left">捕获了后代组件传递的错误时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured">#</a></td></tr><tr><td align="left"><code>onRenderTracked()</code></td><td align="left">组件渲染过程中追踪到响应式依赖时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onrendertracked">#</a></td></tr><tr><td align="left"><code>onRenderTriggered()</code></td><td align="left">响应式依赖的变更触发了组件渲染时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onrendertriggered">#</a></td></tr><tr><td align="left"><code>onActivated()</code></td><td align="left">若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onactivated">#</a></td></tr><tr><td align="left"><code>onDeactivated()</code></td><td align="left">若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#ondeactivated">#</a></td></tr><tr><td align="left"><code>onServerPrefetch()</code></td><td align="left">组件实例在服务器上被渲染之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---响应式-工具"><a aria-hidden="true" tabindex="-1" href="#组合式-api---响应式-工具"><span class="icon icon-link"></span></a>组合式 API - 响应式: 工具</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>isRef()</code></td><td align="left">判断是否为 ref <a href="https://cn.vuejs.org/api/reactivity-utilities.html#isref">#</a></td></tr><tr><td align="left"><code>unref()</code></td><td align="left">是 ref，返回内部值，否则返回参数本身 <a href="https://cn.vuejs.org/api/reactivity-utilities.html#unref">#</a></td></tr><tr><td align="left"><code>toRef()</code></td><td align="left">创建一个属性对应的 ref <a href="https://cn.vuejs.org/api/reactivity-utilities.html#toref">#</a></td></tr><tr><td align="left"><code>toRefs()</code></td><td align="left">将对象上的每一个可枚举属性转换为 ref <a href="https://cn.vuejs.org/api/reactivity-utilities.html#torefs">#</a></td></tr><tr><td align="left"><code>isProxy()</code></td><td align="left">检查一个对象是否是由 <code>reactive()</code>、<code>readonly()</code>、<code>shallowReactive()</code> 或 <code>shallowReadonly()</code> 创建的代理 <a href="https://cn.vuejs.org/api/reactivity-utilities.html#isproxy">#</a></td></tr><tr><td align="left"><code>isReactive()</code></td><td align="left">检查一个对象是否是由 <code>reactive()</code> 或 <code>shallowReactive()</code> 创建的代理。 <a href="https://cn.vuejs.org/api/reactivity-utilities.html#isreactive">#</a></td></tr><tr><td align="left"><code>isReadonly()</code></td><td align="left">检查传入的值是否为只读对象 <a href="https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---响应式-核心"><a aria-hidden="true" tabindex="-1" href="#组合式-api---响应式-核心"><span class="icon icon-link"></span></a>组合式 API - 响应式: 核心</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>ref()</code></td><td align="left">返回一个 ref 对象 <a href="https://cn.vuejs.org/api/reactivity-core.html#ref">#</a></td></tr><tr><td align="left"><code>computed ()</code></td><td align="left">定义一个计算属性 <a href="https://cn.vuejs.org/api/reactivity-core.html#computed">#</a></td></tr><tr><td align="left"><code>reactive()</code></td><td align="left">返回一个对象的响应式代理 <a href="https://cn.vuejs.org/api/reactivity-core.html#reactive">#</a></td></tr><tr><td align="left"><code>readonly()</code></td><td align="left">返回一个原值的只读代理 <a href="https://cn.vuejs.org/api/reactivity-core.html#readonly">#</a></td></tr><tr><td align="left"><code>watchEffect()</code></td><td align="left">立即运行一个函数，同时监听 <a href="https://cn.vuejs.org/api/reactivity-core.html#watcheffect">#</a></td></tr><tr><td align="left"><code>watchPostEffect()</code></td><td align="left"><code>watchEffect()</code> 使用 <code>flush: 'post'</code> 选项时的别名。 <a href="https://cn.vuejs.org/api/reactivity-core.html#watchposteffect">#</a></td></tr><tr><td align="left"><code>watchSyncEffect()</code></td><td align="left"><code>watchEffect()</code> 使用 <code>flush: 'sync'</code> 选项时的别名。 <a href="https://cn.vuejs.org/api/reactivity-core.html#watchsynceffect">#</a></td></tr><tr><td align="left"><code>watch()</code></td><td align="left">侦听一个或多个响应式数据源 <a href="https://cn.vuejs.org/api/reactivity-core.html#watch">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---状态选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---状态选项"><span class="icon icon-link"></span></a>选项式 API - 状态选项</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>data</code></td><td align="left">声明组件初始响应式状态 <a href="https://cn.vuejs.org/api/options-state.html#data">#</a></td></tr><tr><td align="left"><code>props</code></td><td align="left">声明一个组件的 props <a href="https://cn.vuejs.org/api/options-state.html#props">#</a></td></tr><tr><td align="left"><code>computed</code></td><td align="left">声明要在组件实例上暴露的计算属性 <a href="https://cn.vuejs.org/api/options-state.html#computed">#</a></td></tr><tr><td align="left"><code>methods</code></td><td align="left">声明要混入到组件实例中的方法 <a href="https://cn.vuejs.org/api/options-state.html#methods">#</a></td></tr><tr><td align="left"><code>watch</code></td><td align="left">声明在数据更改时调用的侦听回调 <a href="https://cn.vuejs.org/api/options-state.html#watch">#</a></td></tr><tr><td align="left"><code>emits</code></td><td align="left">声明由组件触发的自定义事件 <a href="https://cn.vuejs.org/api/options-state.html#emits">#</a></td></tr><tr><td align="left"><code>expose</code></td><td align="left">声明当组件实例被父组件通过模板引用访问时暴露的公共属性 <a href="https://cn.vuejs.org/api/options-state.html#expose">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="选项式-api---生命周期选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---生命周期选项"><span class="icon icon-link"></span></a>选项式 API - 生命周期选项</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>beforeCreate</code></td><td align="left">组件实例初始化完成之后立即调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#beforecreate">#</a></td></tr><tr><td align="left"><code>created</code></td><td align="left">组件实例处理完所有与状态相关的选项后调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#created">#</a></td></tr><tr><td align="left"><code>beforeMount</code></td><td align="left">组件被挂载之前调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#beforemount">#</a></td></tr><tr><td align="left"><code>mounted</code></td><td align="left">组件被挂载之后调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#mounted">#</a></td></tr><tr><td align="left"><code>beforeUpdate</code></td><td align="left">状态变更而更新其 DOM 树之前调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#beforeupdate">#</a></td></tr><tr><td align="left"><code>updated</code></td><td align="left">状态变更而更新其 DOM 树之后调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#updated">#</a></td></tr><tr><td align="left"><code>beforeUnmount</code></td><td align="left">组件实例被卸载之前调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#beforeunmount">#</a></td></tr><tr><td align="left"><code>unmounted</code></td><td align="left">组件实例被卸载之后调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#unmounted">#</a></td></tr><tr><td align="left"><code>errorCaptured</code></td><td align="left">捕获了后代组件传递的错误时调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#errorcaptured">#</a></td></tr><tr><td align="left"><code>renderTracked</code> <em>Dev only</em></td><td align="left">组件渲染过程中追踪到响应式依赖时调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#rendertracked">#</a></td></tr><tr><td align="left"><code>renderTriggered</code> <em>Dev only</em></td><td align="left">响应式依赖的变更触发了组件渲染时调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#rendertriggered-sup-classvt-badge-dev-only">#</a></td></tr><tr><td align="left"><code>activated</code></td><td align="left">若组件实例是 <keepalive> 缓存树的一部分，当组件被插入到 DOM 中时调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#activated">#</a></keepalive></td></tr><tr><td align="left"><code>deactivated</code></td><td align="left">若组件实例是 <keepalive> 缓存树的一部分，当组件从 DOM 中被移除时调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#deactivated">#</a></keepalive></td></tr><tr><td align="left"><code>serverPrefetch</code> <em>SSR only</em></td><td align="left">组件实例在服务器上被渲染之前调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---其他杂项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---其他杂项"><span class="icon icon-link"></span></a>选项式 API - 其他杂项</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left">显式声明组件展示时的名称 <a href="https://cn.vuejs.org/api/options-misc.html#name">#</a></td></tr><tr><td align="left"><code>inheritAttrs</code></td><td align="left">是否启用默认的组件 <code>attribute</code> 透传行为 <a href="https://cn.vuejs.org/api/options-misc.html#inheritattrs">#</a></td></tr><tr><td align="left"><code>components</code></td><td align="left">注册对当前组件实例可用的组件 <a href="https://cn.vuejs.org/api/options-misc.html#components">#</a></td></tr><tr><td align="left"><code>directives</code></td><td align="left">注册对当前组件实例可用的指令 <a href="https://cn.vuejs.org/api/options-misc.html#directives">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---渲染选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---渲染选项"><span class="icon icon-link"></span></a>选项式 API - 渲染选项</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>template</code></td><td align="left">声明组件的字符串模板 <a href="https://cn.vuejs.org/api/options-rendering.html#template">#</a></td></tr><tr><td align="left"><code>render</code></td><td align="left">编程式地创建组件虚拟 DOM 树的函数 <a href="https://cn.vuejs.org/api/options-rendering.html#render">#</a></td></tr><tr><td align="left"><code>compilerOptions</code></td><td align="left">配置组件模板的运行时编译器选项 <a href="https://cn.vuejs.org/api/options-rendering.html#compileroptions">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="选项式-api---组件实例"><a aria-hidden="true" tabindex="-1" href="#选项式-api---组件实例"><span class="icon icon-link"></span></a>选项式 API - 组件实例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>$data</code></td><td align="left">观察的数据对象 <a href="https://cn.vuejs.org/api/component-instance.html#data">#</a></td></tr><tr><td align="left"><code>$props</code></td><td align="left">组件已解析的 props 对象 <a href="https://cn.vuejs.org/api/component-instance.html#props">#</a></td></tr><tr><td align="left"><code>$el</code></td><td align="left">实例管理的 DOM 根节点 <a href="https://cn.vuejs.org/api/component-instance.html#el">#</a></td></tr><tr><td align="left"><code>$options</code></td><td align="left">实例的初始化选项 <a href="https://cn.vuejs.org/api/component-instance.html#options">#</a></td></tr><tr><td align="left"><code>$parent</code></td><td align="left">父实例 <a href="https://cn.vuejs.org/api/component-instance.html#parent">#</a></td></tr><tr><td align="left"><code>$root</code></td><td align="left">当前组件树的根实例 <a href="https://cn.vuejs.org/api/component-instance.html#root">#</a></td></tr><tr><td align="left"><code>$slots</code></td><td align="left">访问被插槽分发的内容 <a href="https://cn.vuejs.org/api/component-instance.html#slots">#</a></td></tr><tr><td align="left"><code>$refs</code></td><td align="left">DOM 元素和组件实例 <a href="https://cn.vuejs.org/api/component-instance.html#refs">#</a></td></tr><tr><td align="left"><code>$attrs</code></td><td align="left">包含了组件所有<a href="https://cn.vuejs.org/guide/components/attrs.html">透传 attributes</a> <a href="https://cn.vuejs.org/api/component-instance.html#attrs">#</a></td></tr><tr><td align="left"><code>$watch()</code></td><td align="left">观察 Vue 实例上的一个表达式或者一个函数计算结果的变化 <a href="https://cn.vuejs.org/api/component-instance.html#watch">#</a></td></tr><tr><td align="left"><code>$emit()</code></td><td align="left">触发一个自定义事件 <a href="https://cn.vuejs.org/api/component-instance.html#emit">#</a></td></tr><tr><td align="left"><code>$forceUpdate()</code></td><td align="left">强制该组件重新渲染 <a href="https://cn.vuejs.org/api/component-instance.html#forceupdate">#</a></td></tr><tr><td align="left"><code>$nextTick()</code></td><td align="left">回调延迟执行 <a href="https://cn.vuejs.org/api/component-instance.html#nexttick">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---组合选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---组合选项"><span class="icon icon-link"></span></a>选项式 API - 组合选项</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide</code></td><td align="left">提供可以被后代组件注入的值 <a href="https://cn.vuejs.org/api/options-composition.html#provide">#</a></td></tr><tr><td align="left"><code>inject</code></td><td align="left">注入一个由祖先组件提供的值 <a href="https://cn.vuejs.org/api/options-composition.html#inject">#</a></td></tr><tr><td align="left"><code>mixins</code></td><td align="left">接收一个混入对象的数组 <a href="https://cn.vuejs.org/api/options-composition.html#mixins">#</a></td></tr><tr><td align="left"><code>extends</code></td><td align="left">要继承的“基类”组件 <a href="https://cn.vuejs.org/api/options-composition.html#extends">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="内置内容---指令"><a aria-hidden="true" tabindex="-1" href="#内置内容---指令"><span class="icon icon-link"></span></a>内置内容 - 指令</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-text</code></td><td align="left">更新元素的 <code>textContent</code> <a href="https://cn.vuejs.org/api/built-in-directives.html#v-text">#</a></td></tr><tr><td align="left"><code>v-html</code></td><td align="left">更新元素的 <code>innerHTML</code> <a href="https://cn.vuejs.org/api/built-in-directives.html#v-html">#</a></td></tr><tr><td align="left"><code>v-show</code></td><td align="left">切换元素的 <code>display</code> css 属性 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-show">#</a></td></tr><tr><td align="left"><code>v-if</code></td><td align="left">有条件地渲染元素 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-if">#</a></td></tr><tr><td align="left"><code>v-else</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-else">#</a></td></tr><tr><td align="left"><code>v-else-if</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-else-if">#</a></td></tr><tr><td align="left"><code>v-for</code></td><td align="left">多次渲染元素或模板块 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-for">#</a></td></tr><tr><td align="left"><code>v-on</code></td><td align="left">绑定事件监听器 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-on">#</a></td></tr><tr><td align="left"><code>v-bind</code></td><td align="left">动态地绑定一个或多个属性 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-bind">#</a></td></tr><tr><td align="left"><code>v-model</code></td><td align="left">创建双向绑定 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-model">#</a></td></tr><tr><td align="left"><code>v-slot</code></td><td align="left">提供插槽或接收 props 的插槽 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-slot">#</a></td></tr><tr><td align="left"><code>v-pre</code></td><td align="left">跳过元素和它的子元素编译过程 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-pre">#</a></td></tr><tr><td align="left"><code>v-once</code></td><td align="left">只渲染元素和组件一次 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-once">#</a></td></tr><tr><td align="left"><code>v-memo</code> <em>(3.2+)</em></td><td align="left">缓存一个模板的子树 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-memo">#</a></td></tr><tr><td align="left"><code>v-cloak</code></td><td align="left">保持在元素上直到实例结束编译 <a href="https://cn.vuejs.org/api/built-in-directives.html#v-cloak">#</a></td></tr><tr><td align="left"><code>serverPrefetch</code> <em>SSR only</em></td><td align="left">组件实例在服务器上被渲染之前调用 <a href="https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---组件"><a aria-hidden="true" tabindex="-1" href="#内置内容---组件"><span class="icon icon-link"></span></a>内置内容 - 组件</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code><Transition></code></td><td align="left">单个元素/组件的过渡效果 <a href="https://cn.vuejs.org/api/built-in-components.html#transition">#</a></td></tr><tr><td align="left"><code><TransitionGroup></code></td><td align="left">多个元素/组件的过渡效果 <a href="https://cn.vuejs.org/api/built-in-components.html#transitiongroup">#</a></td></tr><tr><td align="left"><code><KeepAlive></code></td><td align="left">缓存包裹在其中的动态切换组件 <a href="https://cn.vuejs.org/api/built-in-components.html#keepalive">#</a></td></tr><tr><td align="left"><code><Teleport></code></td><td align="left">将其插槽内容渲染到 DOM 中的另一个位置 <a href="https://cn.vuejs.org/api/built-in-components.html#teleport">#</a></td></tr><tr><td align="left"><code><Suspense></code> <em>(Experimental)</em></td><td align="left">协调对组件树中嵌套的异步依赖的处理 <a href="https://cn.vuejs.org/api/built-in-components.html#suspense">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---特殊-attributes"><a aria-hidden="true" tabindex="-1" href="#内置内容---特殊-attributes"><span class="icon icon-link"></span></a>内置内容 - 特殊 Attributes</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>key</code></td><td align="left">用在 Vue 的虚拟 DOM 算法 <a href="https://cn.vuejs.org/api/built-in-special-attributes.html#key">#</a></td></tr><tr><td align="left"><code>ref</code></td><td align="left">元素或子组件注册引用信息 <a href="https://cn.vuejs.org/api/built-in-special-attributes.html#ref">#</a></td></tr><tr><td align="left"><code>is</code></td><td align="left">绑定动态组件 <a href="https://cn.vuejs.org/api/built-in-special-attributes.html#is">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---特殊元素"><a aria-hidden="true" tabindex="-1" href="#内置内容---特殊元素"><span class="icon icon-link"></span></a>内置内容 - 特殊元素</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code><component></code></td><td align="left">渲染一个“元组件”用于动态组件或元素 <a href="https://cn.vuejs.org/api/built-in-special-elements.html#component">#</a></td></tr><tr><td align="left"><code><slot></code></td><td align="left">组件模板中的插槽内容出口 <a href="https://cn.vuejs.org/api/built-in-special-elements.html#slot">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="单文件组件---语法定义"><a aria-hidden="true" tabindex="-1" href="#单文件组件---语法定义"><span class="icon icon-link"></span></a>单文件组件 - 语法定义</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>总览</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#overview">#</a></td></tr><tr><td align="left"><code>相应语言块</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#language-blocks">#</a></td></tr><tr><td align="left"><code>自动名称推导</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#automatic-name-inference">#</a></td></tr><tr><td align="left"><code>预处理器</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#pre-processors">#</a></td></tr><tr><td align="left"><code>Src 导入</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#src-imports">#</a></td></tr><tr><td align="left"><code>注释</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#comments">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="单文件组件---script-setup"><a aria-hidden="true" tabindex="-1" href="#单文件组件---script-setup"><span class="icon icon-link"></span></a>单文件组件 - <script setup></h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本语法</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#basic-syntax">#</a></td></tr><tr><td align="left"><code>响应式</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#reactivity">#</a></td></tr><tr><td align="left"><code>使用组件</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#using-components">#</a></td></tr><tr><td align="left"><code>使用自定义指令</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#using-custom-directives">#</a></td></tr><tr><td align="left"><code>defineProps() 和 defineEmits()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits">#</a></td></tr><tr><td align="left"><code>defineExpose</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose">#</a></td></tr><tr><td align="left"><code>useSlots() 和 useAttrs()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#useslots-useattrs">#</a></td></tr><tr><td align="left"><code>与普通的 &lt;script&gt; 一起使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script">#</a></td></tr><tr><td align="left"><code>顶层 await</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await">#</a></td></tr><tr><td align="left"><code>针对 TypeScript 的功能</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features">#</a></td></tr><tr><td align="left"><code>限制</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#restrictions">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单文件组件---css-功能"><a aria-hidden="true" tabindex="-1" href="#单文件组件---css-功能"><span class="icon icon-link"></span></a>单文件组件 - CSS 功能</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>组件作用域 CSS</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#scoped-css">#</a></td></tr><tr><td align="left"><code>CSS Modules</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#css-modules">#</a></td></tr><tr><td align="left"><code>CSS 中的 v-bind()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---渲染函数"><a aria-hidden="true" tabindex="-1" href="#进阶-api---渲染函数"><span class="icon icon-link"></span></a>进阶 API - 渲染函数</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>h()</code></td><td align="left">创建虚拟 DOM 节点 <a href="https://cn.vuejs.org/api/render-function.html#h">#</a></td></tr><tr><td align="left"><code>mergeProps()</code></td><td align="left">合并多个 props 对象 <a href="https://cn.vuejs.org/api/render-function.html#mergeprops">#</a></td></tr><tr><td align="left"><code>cloneVNode()</code></td><td align="left">克隆一个 vnode <a href="https://cn.vuejs.org/api/render-function.html#clonevnode">#</a></td></tr><tr><td align="left"><code>isVNode()</code></td><td align="left">判断一个值是否为 vnode 类型 <a href="https://cn.vuejs.org/api/render-function.html#isvnode">#</a></td></tr><tr><td align="left"><code>resolveComponent()</code></td><td align="left">按名称手动解析已注册的组件 <a href="https://cn.vuejs.org/api/render-function.html#resolvecomponent">#</a></td></tr><tr><td align="left"><code>resolveDirective()</code></td><td align="left">按名称手动解析已注册的指令 <a href="https://cn.vuejs.org/api/render-function.html#resolvedirective">#</a></td></tr><tr><td align="left"><code>withDirectives()</code></td><td align="left">用于给 vnode 增加自定义指令 <a href="https://cn.vuejs.org/api/render-function.html#withdirectives">#</a></td></tr><tr><td align="left"><code>withModifiers()</code></td><td align="left">用于向事件处理函数添加内置 <code>v-on 修饰符</code> <a href="https://cn.vuejs.org/api/render-function.html#withmodifiers">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---服务端渲染"><a aria-hidden="true" tabindex="-1" href="#进阶-api---服务端渲染"><span class="icon icon-link"></span></a>进阶 API - 服务端渲染</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>renderToString()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertostring">#</a></td></tr><tr><td align="left"><code>renderToNodeStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertonodestream">#</a></td></tr><tr><td align="left"><code>pipeToNodeWritable()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#pipetonodewritable">#</a></td></tr><tr><td align="left"><code>renderToWebStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertowebstream">#</a></td></tr><tr><td align="left"><code>pipeToWebWritable()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#pipetowebwritable">#</a></td></tr><tr><td align="left"><code>renderToSimpleStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertosimplestream">#</a></td></tr><tr><td align="left"><code>useSSRContext()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#usessrcontext">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---typescript-工具类型"><a aria-hidden="true" tabindex="-1" href="#进阶-api---typescript-工具类型"><span class="icon icon-link"></span></a>进阶 API - TypeScript 工具类型</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>PropType<T></code></td><td align="left">在用运行时 props 声明时给一个 prop 标注更复杂的类型定义 <a href="https://cn.vuejs.org/api/utility-types.html#proptypet">#</a></td></tr><tr><td align="left"><code>ComponentCustomProperties</code></td><td align="left">增强组件实例类型以支持自定义全局属性 <a href="https://cn.vuejs.org/api/utility-types.html#componentcustomproperties">#</a></td></tr><tr><td align="left"><code>ComponentCustomOptions</code></td><td align="left">扩展组件选项类型以支持自定义选项 <a href="https://cn.vuejs.org/api/utility-types.html#componentcustomoptions">#</a></td></tr><tr><td align="left"><code>ComponentCustomProps</code></td><td align="left">扩展全局可用的 TSX props <a href="https://cn.vuejs.org/api/utility-types.html#componentcustomprops">#</a></td></tr><tr><td align="left"><code>CSSProperties</code></td><td align="left">扩展在样式属性绑定上允许的值的类型 <a href="https://cn.vuejs.org/api/utility-types.html#cssproperties">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---自定义渲染"><a aria-hidden="true" tabindex="-1" href="#进阶-api---自定义渲染"><span class="icon icon-link"></span></a>进阶 API - 自定义渲染</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createRenderer()</code></td><td align="left">创建一个自定义渲染器 <a href="https://cn.vuejs.org/api/custom-renderer.html#create-renderer">#</a></td></tr></tbody></table>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://cn.vuejs.org/">Vue 3.x 官方文档</a></li>
|
||
<li><a href="https://router.vuejs.org/zh/">Vue Router 4.x 官方文档</a></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|