1<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼ | å端æ¥è®°</title><meta name="author" content="YangTao"><meta name="copyright" content="YangTao"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="å¼å ¥æå¼ Vue3 çå®æ¹ææ¡£ï¼å®é¦å ä¼åè¯ä½ ï¼Vue çç»ä»¶å¯ä»¥æ两ç§ä¸åçé£æ ¼ä¹¦åï¼éé¡¹å¼ API åç»åå¼ APIãæ档为æ们æä¾ä¸ç³»å两ç§é£æ ¼ç代ç åèï¼ä¾æ们æç §å好è¿è¡éæ©ã å®é ä¸ï¼Vue3 ç»ä»¶å¯ä¸æ¢ä¸¤ç§åæ³ï¼èæ¯å¤è¾¾åå ç§ï¼ç¶èï¼ä¸ç®¡æ¯ä»ä¹åæ³ï¼å®ä»¬é½æ¯åºäºåä¸ä¸ªåºå±ç³»ç»å®ç°çï¼æ¦å¿µä¹é´ä¹æ¯å½¼æ¤ç¸éçï¼åªæ¯ä½¿ç¨çæ¥å£ä¸åãå¨å®é å¼åä¸ï¼æ们ä¹ä¸ä¼åæ¶ä½¿ç¨å°é£ä¹å¤ç§åæ³ï¼ä½æ¯è¿å¹¶ä¸"> 2<meta property="og:type" content="article"> 3<meta property="og:title" content="Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼"> 4<meta property="og:url" content="https://whyta.cn/post/0dced23f9a71/index.html"> 5<meta property="og:site_name" content="å端æ¥è®°"> 6<meta property="og:description" content="å¼å ¥æå¼ Vue3 çå®æ¹ææ¡£ï¼å®é¦å ä¼åè¯ä½ ï¼Vue çç»ä»¶å¯ä»¥æ两ç§ä¸åçé£æ ¼ä¹¦åï¼éé¡¹å¼ API åç»åå¼ APIãæ档为æ们æä¾ä¸ç³»å两ç§é£æ ¼ç代ç åèï¼ä¾æ们æç §å好è¿è¡éæ©ã å®é ä¸ï¼Vue3 ç»ä»¶å¯ä¸æ¢ä¸¤ç§åæ³ï¼èæ¯å¤è¾¾åå ç§ï¼ç¶èï¼ä¸ç®¡æ¯ä»ä¹åæ³ï¼å®ä»¬é½æ¯åºäºåä¸ä¸ªåºå±ç³»ç»å®ç°çï¼æ¦å¿µä¹é´ä¹æ¯å½¼æ¤ç¸éçï¼åªæ¯ä½¿ç¨çæ¥å£ä¸åãå¨å®é å¼åä¸ï¼æ们ä¹ä¸ä¼åæ¶ä½¿ç¨å°é£ä¹å¤ç§åæ³ï¼ä½æ¯è¿å¹¶ä¸"> 7<meta property="og:locale" content="zh_CN"> 8<meta property="og:image" content="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg"> 9<meta property="article:published_time" content="2024-10-24T10:52:24.000Z"> 10<meta property="article:modified_time" content="2024-10-24T02:58:54.465Z"> 11<meta property="article:author" content="YangTao"> 12<meta property="article:tag" content="Vue"> 13<meta name="twitter:card" content="summary"> 14<meta name="twitter:image" content="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://whyta.cn/post/0dced23f9a71/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'">
14<script>const GLOBAL_CONFIG = { 15 root: '/', 16 algolia: undefined, 17 localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"æ¾ä¸å°æ¨æ¥è¯¢çå 容ï¼${query}","hits_stats":"å ±æ¾å° ${hits} ç¯æç« "}}, 18 translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"ç¹","msgToSimplifiedChinese":"ç®"}, 19 noticeOutdate: undefined, 20 highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false}, 21 copy: { 22 success: 'å¤å¶æå', 23 error: 'å¤å¶é误', 24 noSupport: 'æµè§å¨ä¸æ¯æ' 25 }, 26 relativeDate: { 27 homepage: false, 28 post: false 29 }, 30 runtime: '天', 31 dateSuffix: { 32 just: 'åå', 33 min: 'åéå', 34 hour: 'å°æ¶å', 35 day: '天å', 36 month: '个æå' 37 }, 38 copyright: {"limitCount":50,"languages":{"author":"ä½è : YangTao","link":"é¾æ¥: ","source":"æ¥æº: å端æ¥è®°","info":"èä½æå½ä½è ææãåä¸è½¬è½½è¯·èç³»ä½è è·å¾ææï¼éåä¸è½¬è½½è¯·æ³¨æåºå¤ã"}}, 39 lightbox: 'fancybox', 40 Snackbar: undefined, 41 infinitegrid: { 42 js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js', 43 buttonText: 'å è½½æ´å¤' 44 }, 45 isPhotoFigcaption: false, 46 islazyload: false, 47 isAnchor: false, 48 percent: { 49 toc: true, 50 rightside: false, 51 }, 52 autoDarkmode: false 53}</script>
53<script id="config-diff">var GLOBAL_CONFIG_SITE = { 54 title: 'Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼', 55 isPost: true, 56 isHome: false, 57 isHighlightShrink: false, 58 isToc: true, 59 postUpdate: '2024-10-24 02:58:54' 60}</script>
60<script>(win=>{ 61 win.saveToLocal = { 62 set: (key, value, ttl) => { 63 if (ttl === 0) return 64 const now = Date.now() 65 const expiry = now + ttl * 86400000 66 const item = { 67 value, 68 expiry 69 } 70 localStorage.setItem(key, JSON.stringify(item)) 71 }, 72 73 get: key => { 74 const itemStr = localStorage.getItem(key) 75 76 if (!itemStr) { 77 return undefined 78 } 79 const item = JSON.parse(itemStr) 80 const now = Date.now() 81 82 if (now > item.expiry) { 83 localStorage.removeItem(key) 84 return undefined 85 } 86 return item.value 87 } 88 } 89 90 win.getScript = (url, attr = {}) => new Promise((resolve, reject) => { 91 const script = document.createElement('script') 92 script.src = url 93 script.async = true 94 script.onerror = reject 95 script.onload = script.onreadystatechange = function() { 96 const loadState = this.readyState 97 if (loadState && loadState !== 'loaded' && loadState !== 'complete') return 98 script.onload = script.onreadystatechange = null 99 resolve() 100 } 101 102 Object.keys(attr).forEach(key => { 103 script.setAttribute(key, attr[key]) 104 }) 105 106 document.head.appendChild(script) 107 }) 108 109 win.getCSS = (url, id = false) => new Promise((resolve, reject) => { 110 const link = document.createElement('link') 111 link.rel = 'stylesheet' 112 link.href = url 113 if (id) link.id = id 114 link.onerror = reject 115 link.onload = link.onreadystatechange = function() { 116 const loadState = this.readyState 117 if (loadState && loadState !== 'loaded' && loadState !== 'complete') return 118 link.onload = link.onreadystatechange = null 119 resolve() 120 } 121 document.head.appendChild(link) 122 }) 123 124 win.activateDarkMode = () => { 125 document.documentElement.setAttribute('data-theme', 'dark') 126 if (document.querySelector('meta[name="theme-color"]') !== null) { 127 document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d') 128 } 129 } 130 win.activateLightMode = () => { 131 document.documentElement.setAttribute('data-theme', 'light') 132 if (document.querySelector('meta[name="theme-color"]') !== null) { 133 document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff') 134 } 135 } 136 const t = saveToLocal.get('theme') 137 138 if (t === 'dark') activateDarkMode() 139 else if (t === 'light') activateLightMode() 140 141 const asideStatus = saveToLocal.get('aside-status') 142 if (asideStatus !== undefined) { 143 if (asideStatus === 'hide') { 144 document.documentElement.classList.add('hide-aside') 145 } else { 146 document.documentElement.classList.remove('hide-aside') 147 } 148 } 149 150 const detectApple = () => { 151 if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){ 152 document.documentElement.classList.add('apple') 153 } 154 } 155 detectApple() 156 })(window)</script>
156<meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">æç« </div><div class="length-num">296</div></a><a href="/tags/"><div class="headline">æ ç¾</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">åç±»</div><div class="length-num">11</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> é¦é¡µ</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> æç« </span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> æ ç¾</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱ä¹</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/images/"><i class="fa-fw fas fa-images"></i><span> å¾åº</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page child" href="/about/resume.html"><i class="fa-fw fa fa-address-card"></i><span> ç®å</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> èç³»æ</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://xiaojinhe-cdn.iyoudui.cn/upload/common/20230808/6028094.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="å端æ¥è®°"><img class="site-icon" src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg"/><span class="site-name">å端æ¥è®°</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> æç´¢</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> é¦é¡µ</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> æç« </span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> æ ç¾</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱ä¹</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/images/"><i class="fa-fw fas fa-images"></i><span> å¾åº</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page child" href="/about/resume.html"><i class="fa-fw fa fa-address-card"></i><span> ç®å</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> èç³»æ</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">å表äº</span><time class="post-meta-date-created" datetime="2024-10-24T10:52:24.000Z" title="åè¡¨äº 2024-10-24 10:52:24">2024-10-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">æ´æ°äº</span><time class="post-meta-date-updated" datetime="2024-10-24T02:58:54.465Z" title="æ´æ°äº 2024-10-24 02:58:54">2024-10-24</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue/">Vue</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">åæ°æ»è®¡:</span><span class="word-count">4.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">é 读æ¶é¿:</span><span>18åé</span></span><span class="post-meta-separator">|</span><span class="post-meta-commentcount"><i class="far fa-comments fa-fw post-meta-icon"></i><span class="post-meta-label">è¯è®ºæ°:</span><a href="/post/0dced23f9a71/#post-comment"><span class="gitalk-comment-count"><i class="fa-solid fa-spinner fa-spin"></i></span></a></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="å¼å ¥"><a href="#å¼å ¥" class="headerlink" title="å¼å ¥"></a>å¼å ¥</h3><p>æå¼ Vue3 çå®æ¹ææ¡£ï¼å®é¦å ä¼åè¯ä½ ï¼Vue çç»ä»¶å¯ä»¥æ两ç§ä¸åçé£æ ¼ä¹¦åï¼éé¡¹å¼ API åç»åå¼ APIãæ档为æ们æä¾ä¸ç³»å两ç§é£æ ¼ç代ç åèï¼ä¾æ们æç §å好è¿è¡éæ©ã</p> 157<p>å®é ä¸ï¼Vue3 ç»ä»¶å¯ä¸æ¢ä¸¤ç§åæ³ï¼èæ¯å¤è¾¾åå ç§ï¼ç¶èï¼ä¸ç®¡æ¯ä»ä¹åæ³ï¼å®ä»¬é½æ¯åºäºåä¸ä¸ªåºå±ç³»ç»å®ç°çï¼æ¦å¿µä¹é´ä¹æ¯å½¼æ¤ç¸éçï¼åªæ¯ä½¿ç¨çæ¥å£ä¸åãå¨å®é
157å¼åä¸ï¼æ们ä¹ä¸ä¼åæ¶ä½¿ç¨å°é£ä¹å¤ç§åæ³ï¼ä½æ¯è¿å¹¶ä¸æå³çæ们ä¸éè¦å»äºè§£è¿äºåæ³ï¼</p> 158<h3 id="setup-è¯æ³ç³"><a href="#setup-è¯æ³ç³" class="headerlink" title="setup è¯æ³ç³"></a>setup è¯æ³ç³</h3><p>setup è¯æ³ç³åºè¯¥æ¯æ常ç¨çåæ³äºãå¨ Vue3 ä¸ï¼æ们æ³å°è£ ä¸ä¸ªç»ä»¶ï¼æä¹ æ¯çåæ³è¿æ¯æ°å»ºä¸ä¸ª Vue æ件ï¼å¹¶å°ç»ä»¶ä»£ç åå¨æ件ä¸ãå ·ä½æ¯ï¼é¡µé¢ç»æåå¨ template ä¸ï¼é¡µé¢é»è¾åå¨ script ä¸ï¼é¡µé¢æ ·å¼åå¨ style ä¸ã</p> 159<p>æ»ä¹ï¼æ们å°ä¸è¯¥ç»ä»¶ç¸å ³ç代ç é½åå¨ä¸èµ·ãæ¾å¨ä¸ä¸ªæ件ä¸åç¬ç»´æ¤ï¼å¨éè¦è¯¥ç»ä»¶çå°æ¹å¼å ¥ä½¿ç¨ã</p> 160<p>è¿éæ们使ç¨äº setup è¯æ³ç³ï¼ç´æ¥å¨ script ä¸ä¹¦åæ们ç setup å é¨çé»è¾ã</p> 161<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{{ name }}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 162<p>å¨ App. vue ä¸å¼å ¥å¹¶ä½¿ç¨ï¼</p> 163<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">User</span> /></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">User</span> <span class="keyword">from</span> <span class="string">"./User.vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 164<p>注ï¼åç»åæ³å°½ç®¡å½¢å¼ä¸åï¼ä½å®ä»¬æç»çç®çé½æ¯å¯¼åºä¸ä¸ªç»ä»¶ï¼æ以对äºç»ä»¶ä½¿ç¨æ¹æ¥è¯´ï¼è¿éæ¯ App. vueï¼ï¼æä¹ä½¿ç¨è¿ä¸ªç»ä»¶ç代ç é½æ¯ä¸åçï¼æ以å°ä¸åéå¤æ¤ä»£ç ã</p> 165<h3 id="Vue2-é项å¼åæ³"><a href="#Vue2-é项å¼åæ³" class="headerlink" title="Vue2 é项å¼åæ³"></a>Vue2 é项å¼åæ³</h3><h4 id="Vue2-ç»å ¸åæ³"><a href="#Vue2-ç»å ¸åæ³" class="headerlink" title="Vue2 ç»å ¸åæ³"></a>Vue2 ç»å ¸åæ³</h4><p>è¿ç§åæ³ä¹æ¯æ¯è¾ç»å ¸çãå setup è¯æ³ç³åæ³ç±»ä¼¼ãæ们éè¦æ°å»ºä¸ä¸ª vue æ件æ¥åå¨æ们çç»ä»¶ä»£ç ï¼ç¶åå¨éè¦ä½¿ç¨è¯¥ç»ä»¶çå°æ¹å¯¹å ¶è¿è¡å¼å ¥ã
165åºå«å¨äºï¼æ们éè¦å¨ script ä¸å¯¼åºä¸ä¸ª Vue å®ä¾ã</p> 166<p>è¿éæ们导åºçå ¶å®æ¯ä¸ä¸ªæ®é对象ï¼è¯¥å¯¹è±¡å å« dataãmethods çå±æ§ãè¿ä¸ªå¯¹è±¡çå±æ§é½æ¯å¯éçï¼å³ optionï¼ç¿»è¯åæ¥å³âé项âã</p> 167<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{{ name }}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">data</span>: <span class="function">() =></span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 168<h4 id="defineComponent-è¾ å©å½æ°"><a href="#defineComponent-è¾ å©å½æ°" class="headerlink" title="defineComponent è¾ å©å½æ°"></a>defineComponent è¾ å©å½æ°</h4><p>尽管æä»¬å¨ script è¯è¨åä¸å¯¼åºçé»è®¤å¯¹è±¡ä¼è¢« vue ç¼è¯å¨å½æ vue å®ä¾ï¼ä½ä¸ç®¡æä¹çï¼å®ä¾æ§åªæ¯ä¸ä¸ª plain objectãå¨å®ä¹ç»ä»¶å®ä¾æ¹é¢ï¼vue æä¾äºä¸ä¸ªå为 defineComponent è¾ å©æ¥å£ã</p> 169<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{{ name }}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">
169import</span> { defineComponent } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">data</span>: <span class="function">() =></span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">});</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 170<p>尽管è¿ä¸ªæ¥å£ä¹ä¸è½æ¹åæ们导åºçæ¯ä¸ä¸ªæ®é对象çäºå®ï¼ä½æ¯å®å¯ä»¥ä¸ºæ们çå®ä¾æä¾å¼ºå¤§çç±»åæ¨å¯¼ãæ们å¯ä»¥æå®çææ¯ä¸ä¸ªè¿å vue å®ä¾çå·¥åå½æ°ï¼è®©æ们ç代ç çèµ·æ¥æ´å è§èã</p> 171<h3 id="Vue3-é项å¼åæ³"><a href="#Vue3-é项å¼åæ³" class="headerlink" title="Vue3 é项å¼åæ³"></a>Vue3 é项å¼åæ³</h3><p>å¨ Vue3 ä¸ï¼å®æ¹å¼å ¥äºæ°çé项 setupï¼è¿æ¯ Vue3 é项å¼åæ³å Vue2 åæ³ç主è¦åºå«ãsetup é项çæä¹å¨äºå®å 许æ们å¨é项å¼çåæ³ä¸å¼ç¨å使ç¨ç»åå¼ç apiï¼æ¯å¦ onMountedãrefãreactive çãä½å¯¹äºæ们æ¥è¯´ï¼å®å¯¹äºæ们æççå°æ¹è¿æ¯åºäºå®å°è£ èµ·æ¥ç setup è¯æ³ç³ç¨èµ·æ¥å¾æ¹ä¾¿ã</p> 172<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{{ name }}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">setup</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">
172 <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 173<p>ä½¿ç¨ defineComponent æ¶ï¼å®è½å¤æ示æ们 setup å°ä¼æ¥æ¶å°ä»ä¹åæ°ï¼</p> 174<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{{ name }}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { defineComponent } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">setup</span>(<span class="params">prop,context</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">});</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 175<p>以ä¸åæ³æ们é½æ¯å¨ template ä¸ä¹¦åæ们ç页é¢ç»æï¼è¿ä¹æ¯æ常è§çå ç§åæ³ï¼ä¸é¢æ们æ¥ä»ç»å ç§äºè§£ vue åºå±å¿ ä¸å¯å°çåæ³ï¼æ¸²æå½æ°ã</p> 176<h3 id="æå渲æå½æ°"><a href="#æå渲æå½æ°" class="headerlink" title="æå渲æå½æ°"></a>æå渲æå½æ°</h3><p>template 模æ¿è¯æ³æ¬è´¨ä¸ä¹å¯ä»¥ç®æ¯ä¸ç§è¯æ³ç³ãå¨ vue ç¼è¯å¨ä¸ï¼template ä¸çå 容æç»ä¼è¢«ç¿»è¯ä¸ºæ¸²æå½æ°ï¼æè½½å° vue å®ä¾ç render å±æ§ä¸ãå½éè¦æ¸²æç»ä»¶æ¶ï¼vue å°±æ§è
176¡ä¸æ¬¡ renderï¼å¾å°å¯¹åºçèæèç¹æ ï¼æåå转å为çå® domã</p> 177<p>Vue å 许æ们è±ç¦» templateï¼ç´æ¥èªå·±ä¹¦å渲æå½æ°ãä½ç½®å°±å¨å¯¼åºå®ä¾ç render é项ä¸ï¼</p> 178<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"ts"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="attr">data</span>: <span class="function">() =></span> ({ <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span> }),</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span>;</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 179<p>å¨ template ä¸ï¼æ们使ç¨ç±»ä¼¼ html ç模æ¿è¯æ³æ¥æè¿°æ们çè§å¾ï¼å¨ render å½æ°ä¸åå¦ä½æè¿°å¢ï¼vue æä¾äºä¸¤ä¸ª apiï¼createVnode å hãäºè 没æåºå«ï¼h å½æ°åªæ¯ createVnode ç缩åãæäº render å½æ°ï¼æ们就ä¸éè¦å template äºã</p> 180<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"ts"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent, h } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="attr">data</span>: <span class="function">() =></span> ({ <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span> }),</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">h</span>(<span class="string">"div"</span>, <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 181<p>å¨ä¸é¢ç示ä¾ä¸ï¼æä»¬ä½¿ç¨ h å½æ°çæäºä¸ä¸ª vNodeï¼å¹¶ return åºå»ï¼ä½ä¸ºæ¬ç»ä»¶æç»å¨è¢«ä½¿ç¨æ¶æ¸²æåºæ¥çææã</p> 182<p>å¨ template ä¸æ们å¯ä»¥ä½¿ç¨ v-ifãv-forãslot ç模æ¿è¯æ³ï¼å¨ h å½æ°ä¸è¿äºæ¦å¿µä¹æ¯æ¯æçï¼åªæ¯å½¢å¼ä¸åï¼è¿æ¹é¢å®æ¹ææ¡£æå ·ä½ç示ä¾ãæ»ä¹ï¼template 模æ¿å render é项æ¯å¯ä»¥ç¸äºæ¿ä»£çã</p> 183<h3 id="setup-è¿å渲æå½æ°"><a href="#setup-è¿å渲æå½æ°" class="headerlink" title="setup è¿å渲æå½æ°"></a>setup è¿å渲æå½æ°</h3><h4 id="setup-è¿å-render-æ¹æ³"><a href="#setup-è¿å-render-æ¹æ³" class="headerlink" title="setup è¿å render æ¹æ³"></a>setup è¿å render æ¹æ³</h4><p>ä¸è¬æ¥è¯´ï¼å¨é项å¼è¯æ³ä¸ï¼setup æ¹æ³è¿åä¸ä¸ªå¯¹è±¡ï¼è¯¥å¯¹è±¡æ´é²ç» templateï¼
183ä¾ template 使ç¨ï¼å ·ä½åè第ä¸ä¸ªä¾åï¼vue3 é项å¼åæ³ï¼ãå¦ææ们ä¸ä½¿ç¨ templateï¼ä¹å°±æ²¡æè¿å对象çå¿ è¦äºã</p> 184<p>å¨ Vue3 ä¸ï¼è¿æå¦å¤ä¸ç§ä¸ä½¿ç¨ template çåæ³ï¼å°±æ¯å¨ setup æ¹æ³ä¸è¿åä¸ä¸ª render æ¹æ³ã</p> 185<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"ts"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent, h, ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="title function_">setup</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> <span class="title function_">h</span>(<span class="string">"div"</span>, name.<span class="property">value</span>);</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 186<p>注æï¼</p> 187<ol> 188<li>å¨é项å¼ä¸ä½¿ç¨ setup ä¹åï¼ä¸è¬ä¸åºè¯¥åä½¿ç¨ dataãçå½å¨æçå¨é项å¼åæ³ä¸å¸¸ç¨çé项ï¼èåºè¯¥æ主è¦é»è¾é½åå¨ setup ä¸ï¼å¹¶éå½å¼å ¥ç»åå¼ç apiãæ¯å¦ï¼ä½¿ç¨ refï¼èä¸æ¯ data é项ã</li> 189<li>ref èªå¨è§£å æ¯ template ç¹æçåè½ï¼h å½æ°æ¯æ²¡æè¿ä¸ªåè½çãå¨ h å½æ°ä¸å¼å ¥ refï¼è®°å¾çæå½ç¶å°å¸¦ä¸ <code>.value</code>ã</li> 190</ol> 191<h4 id="defineComponent-ä¼ å ¥setup"><a href="#defineComponent-ä¼ å ¥setup" class="headerlink" title="defineComponent ä¼ å ¥setup"></a>defineComponent ä¼ å ¥setup</h4><p>就注æä¸ç第ä¸ç¹ï¼æ们å¯ä»¥éç¨ä¸é¢è¿ç§åæ³ï¼ç´æ¥å¨ defineComponent ä¸ä¹¦å setup å½æ°ï¼å¦æåçä¸ç¹å°±æ¯ setup è¯æ³ç³çåæ³äºï¼ã</p> 192<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"ts"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent, h, ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> <span class="title function_">h</span>(<span class="string">"div"</span>, name.<span class="property">value</span>);
192</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 193<p>以ä¸å°±æ¯æ¸²æå½æ°çåæ³ï¼æ¯ä¸æ¯æç¹æè§äºå¢ï¼ä¸ä¸åå°±å¦ä¼äºä¸¤ä¸ª apiï¼åé¢ä¼æå°ç Jsx åæ³å ¶å®ä¹åºè¯¥å½ä¸ºæ¸²æå½æ°åæ³çä¸ç§ï¼åªè¦ä¸æ¯ templateï¼èæ¯ç¨ JavaScript 表达页é¢ç»æçï¼é½æ¯æ¸²æå½æ°ï¼ï¼ä½æ¯ç¸å¯¹äº h å½æ°ï¼jsx 并ä¸æ¯çº¯ç²¹ç jsï¼æ以æå°å®ä»¬åæäºä¸¤ç±»ã</p> 194<h3 id="Vue-Jsx"><a href="#Vue-Jsx" class="headerlink" title="Vue & Jsx"></a>Vue & Jsx</h3><h4 id="å¨render-ä¸ä½¿ç¨-jsx"><a href="#å¨render-ä¸ä½¿ç¨-jsx" class="headerlink" title="å¨render ä¸ä½¿ç¨ jsx"></a>å¨render ä¸ä½¿ç¨ jsx</h4><p>æäºåé¢ä¸¤ç±»åæ³ä»ç»çéºå«ï¼æ¥ä¸æ¥å¼å ¥ jsx è¯æ³å°±æ²¡æä»ä¹é¾ç解çç¹äºã</p> 195<p>jsx å¨ vue æ件ä¸æ¯è¿æ ·åçãå¨ render 渲æå½æ°è¿åå¼å¤ä¹¦å jsx æ¿ä»£ h å½æ°ã书å纯 JavaScript ç h å½æ°æè¿°ç»æè¿æ¯æ¯è¾ç¹åçï¼jsx å°±æ¯ç®åäºçh å½æ°åæ³ã</p> 196<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="title function_">data</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">name</span>: <span class="string">"天æ°å¥½"</span> };</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>{this.name}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></></span></span></span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 197<h4 id="å¨-setup-ä¸ä½¿ç¨jsx"><a href="#å¨-setup-ä¸ä½¿ç¨jsx" class="headerlink" title="å¨ setup ä¸ä½¿ç¨jsx"></a>å¨ setup ä¸ä½¿ç¨jsx</h4><p>jsx å setup é åé£ç¨æ´å ãå¨é项å¼é£æ ¼ä¸ä½¿ç¨ setupï¼å¨ setup ä¸ä½¿ç¨ç»åå¼ apiï¼å¹¶ä¸è¿å jsx 书åç渲æå½æ°ã</p> 198<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">
198import</span> { defineComponent, ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="title function_">setup</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> <span class="language-xml"><span class="tag"><></span>{name.value}<span class="tag"></></span></span>;</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 199<h4 id="defineComponent-ç®å"><a href="#defineComponent-ç®å" class="headerlink" title="defineComponent ç®å"></a>defineComponent ç®å</h4><p>è¿ä¸ªå ¶å®å°±æ¯åé¢ä»ç»è¿ç ãdefineComponent ä¼ å ¥ setupã å½æ°åæ³ï¼è¿éçåºå«åªæ¯ä½¿ç¨ jsx æ¿ä»£äº h å½æ°ã</p> 200<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent, ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>{name.value}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></></span></span></span><br><span class="line"> );</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 201<h4 id="èªè¡å¯¼åº-vNode-对象"><a href="#èªè¡å¯¼åº-vNode-对象" class="headerlink" title="èªè¡å¯¼åº vNode 对象"></a>èªè¡å¯¼åº vNode 对象</h4><p>æ们ä¹å¯ä»¥èªå·±å° render å½æ°æ§è¡ä¸éï¼ç¶åå°å¾å°ç jsx Element 导åºï¼åä¸ä¸ä¸ªç¤ºä¾ãdefineComponent ç®åãæ¯ååç¸ä¼¼ãä½æ¯è¿æ®µä»£ç ç缺ç¹é常è´å½ï¼å®ä¸æ¯ææ¥æ¶å¤é¨ä¼ éæ¥çå±æ§åæ°ã</p> 202<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">
202import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> (<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>{name.value}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></></span></span></span><br><span class="line"> );</span><br><span class="line">})();</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 203<p>ä¸è¦ä½¿ç¨è¿ç§åæ³ãè¿éä¼æå°è¿æ ·åï¼åªæ¯å 为ååé¢çãå½æ°å¼ç»ä»¶ï¼å ¶äºï¼ã åæ³æå ³èãæ¬åæ³ä¸å ¶å®åæ³é½ä¸åï¼å ¶å®åæ³å¯¼åºçé½æ¯ JavaScript 对象æè jsx 对象ï¼èè¿éæ们åæ¯èªå·±æ§è¡äºä¸é渲æå½æ°å¹¶å¾å°äºèæèç¹ï¼ç´æ¥å°èæèç¹å¯¼åºå»ãæ¢ç¶é½å·²ç»æèæèç¹å建åºæ¥äºï¼é£èªç¶æ æ³æ¥æ¶ propsã</p> 204<h4 id="defineComponent-ç第äºä¸ªåæ°"><a href="#defineComponent-ç第äºä¸ªåæ°" class="headerlink" title="defineComponent ç第äºä¸ªåæ°"></a>defineComponent ç第äºä¸ªåæ°</h4><p>å¦æ defineComponent ç第ä¸ä¸ªåæ°æ¯ setup å½æ°ï¼é£ä¹å®ç第äºä¸ªåæ°åå¯ä»¥ä¸ºç»ä»¶çå®ä¹æ·»å éè¦çé项ï¼ä½ä¸è¬é¤äºè¡¥å props é项ï¼ä¸ä¼åéè¦å ¶å®é项äºï¼ç»åå¼ api å setup çå ¥åå¯ä»¥å®å ¨æ¿ä»£å ¶å®é项ï¼ã</p> 205<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">import</span> { defineComponent } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(</span><br><span class="line"> <span class="function">(<span class="params">props</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>{props.userName}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></></span></span></span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">props</span>: { <span class="attr">userName</span>: <span class="title class_">String</span> },</span><br><span class="line"> }</span><br><span class="line">);</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 206<h3 id="ç´æ¥å¨-vue-ä¸ä½¿ç¨-jsx"><a href="#ç´æ¥å¨-vue-ä¸ä½¿ç¨-jsx" class="headerlink" title="ç´æ¥å¨ vue ä¸ä½¿ç¨ jsx"></a>ç´æ¥å¨ vue ä¸ä½¿ç¨ jsx</h3><p>è¿é jsx ä¸ååªä½ä¸ºè¿åå¼ï¼èæ¯ç´æ¥è¢«æå¤ä½¿ç¨ãå®å¯ä»¥æ¯è¢«ç´æ¥å¯¼åºï¼æè ç¨å¨ template ä¸ã</p> 207<h4 id="ç´æ¥å¯¼åº-jsx-对象"><a href="#ç´æ¥å¯¼åº-jsx-对象" class="headerlink" title="ç´æ¥å¯¼åº jsx 对象"></a>ç´æ¥å¯¼åº jsx 对象</h4><p>ç´æ¥å° jsx 对象导åºä½¿ç¨ãæ¯åé¢çåæ³æ´ç®æ´ï¼åæ³å°±æ¯æ setup éé¢çå 容æå°å¤é¢ãè¿ééè¦æ³¨æçæ¯æ们导åºçæ¯ä¸æ®µç´æ¥ç jsx 对象ï¼jsx Elementï¼ï¼èä¸æ¯æ¸²æå½æ°ã</p> 208<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script lang=<span class="string">"tsx"</span>></span><br><span class="line"><span class="keyword">
208import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = <span class="language-xml"><span class="tag"><></span>{name.value}<span class="tag"></></span></span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">User</span>;</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure> 209<h4 id="ç´æ¥ç¨å¨-template-ä¸"><a href="#ç´æ¥ç¨å¨-template-ä¸" class="headerlink" title="ç´æ¥ç¨å¨ template ä¸"></a>ç´æ¥ç¨å¨ template ä¸</h4><p>è¿ç§åæ³å¯ä»¥å¸®å©ä½ å¨èªèº«çç»ä»¶å å¤ç¨ä¸äºé¢ç²åº¦æ´å°çç»ä»¶ï¼å®å setup è¯æ³ç³çåæ³é常æ¥è¿ï¼åªæ¯ User åéå¯ä»¥ä½ä¸ºæ ç¾ç´æ¥ä½¿ç¨ã</p> 210<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">User</span> /></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"tsx"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title class_">User</span> = <span class="language-xml"><span class="tag"><></span>{name.value}<span class="tag"></></span></span></span></span>;</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span></span></span><br></pre></td></tr></table></figure> 211<h4 id="å½æ°å¼ç»ä»¶ï¼å ¶ä¸ï¼"><a href="#å½æ°å¼ç»ä»¶ï¼å ¶ä¸ï¼" class="headerlink" title="å½æ°å¼ç»ä»¶ï¼å ¶ä¸ï¼"></a>å½æ°å¼ç»ä»¶ï¼å ¶ä¸ï¼</h4><p>ä½ è¿å¯ä»¥å° User åæå½æ°å¼ç»ä»¶ï¼å¨æ¬é¡µé¢å 使ç¨ãä½å®ä¸ä¼å°è¿å符å±æ§è½¬æ¢ä¸ºå°é©¼å³°åæ³ãè¿åãç´æ¥ç¨å¨ template ä¸ãçå 容é½æ¯ä¸æ ·çï¼å®ä»¬é½æ¯ä¸ºäºæ¹ä¾¿å¨ç»ä»¶æ¬èº«å¤ç¨ä¸äºå¸¸ç¨çç»ä»¶ã</p> 212<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">User</span> <span class="attr">:user-name</span>=<span class="string">"name"</span> /></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"tsx"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">
212import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">"天æ°å¥½"</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">User</span> = (<span class="params">props: { <span class="string">"user-name"</span>: string }</span>) => {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><></span>{props["user-name"]}<span class="tag"></></span></span></span></span>;</span><br><span class="line">};</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag"><<span class="name">style</span>></span><span class="tag"></<span class="name">style</span>></span></span></span></span></span><br></pre></td></tr></table></figure> 213<p>å¦æä½ ç»å¸¸ä½¿ç¨ tailwindï¼ä½ å¯è½å°±ä¼ç¥éä»ä¹æ åµä¸ä¼åºç°å°é¢ç²åº¦çå¯å¤ç¨æ ç¾ï¼æ¯å¦ï¼ä¸ä¸ªå äºä¸å¤§å ç±»åç div æ ç¾ã</p> 214<h3 id="ç¬ç«ç-Jsx-æ件"><a href="#ç¬ç«ç-Jsx-æ件" class="headerlink" title="ç¬ç«ç Jsx æ件"></a>ç¬ç«ç Jsx æ件</h3><p>以ä¸ä»ç»çææåæ³ï¼é½æ¯å¨ .vue æ件ä¸ä¹¦åçï¼èä¸ä¹ç¦»ä¸å¼
214<script lang="tsx">ãæ¥ä¸æ¥çåæ³å¯ä»¥è®©æ们è±ç¦» Vue çè¯æ³åæ¡æ¶ï¼ä¹¦åæ´å jsx ç jsxã</p> 215<h4 id="jsx-å®ä¹ç»ä»¶"><a href="#jsx-å®ä¹ç»ä»¶" class="headerlink" title="jsx å®ä¹ç»ä»¶"></a>jsx å®ä¹ç»ä»¶</h4><p>æ们éè¦æ°å»ºä¸ä¸ª jsx/tsx æ件ï¼ç¶ååªè¦ä¿è¯å¯¼åºçä»ç¶æ¯ä¸ä¸ªç»ä»¶å°±å¯ä»¥äºãæäºåé¢çéºå«ï¼æ们ä¸é¾åç°ï¼è¿ä¸å°±æ¯å»æ script æ ç¾çé项å¼åæ³åï¼ç¡®å®ï¼è¿æ¯å 为ææ æå¨åé¢å®æäºé项å¼åæ³çä¾åï¼æ以è¿æ¸¡å°è¿éå®å ¨æ²¡æååï¼</p> 216<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// User.tsx</span></span><br><span class="line"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="title function_">setup</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">'天æ°å¥½'</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> <span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{name.value}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 217<p>æè¿æ¯æ¨èå¥ä¸ defineComponentï¼</p> 218<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// User.tsx</span></span><br><span class="line"><span class="keyword">import</span> { ref, defineComponent } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="title function_">setup</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">'天æ°å¥½'</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> (<span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{name.value}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span>)</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure> 219<p>åæ ·å°ï¼åé¢å¯¹äº defineComponent ä¸åæ¹å¼ç使ç¨è¿éä¹é½å¯ä»¥çãæ¯å¦å¯¼åºæ®éå¯¹è±¡å¹¶å¨ render æè setup ä¸ä½¿ç¨ jsx ççãä» vue å° jsxï¼åºå«åªæ¯çä¸äº script è¯æ³åã</p> 220<p>vue2 é项å¼åæ³+jsxã</p> 221<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// User.tsx</span></span><br><span class="line"><span class="keyword">
221import</span> { defineComponent } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span><br><span class="line"> <span class="attr">data</span>: <span class="function">() =></span> ({ <span class="attr">name</span>: <span class="string">'天æ°å¥½'</span> }),</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{this.name}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure> 222<p>导åºæ®é对象ï¼</p> 223<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// User.tsx</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">data</span>: <span class="function">() =></span> ({ <span class="attr">name</span>: <span class="string">'天æ°å¥½'</span> }),</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{this.name}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure> 224<h4 id="å½æ°å¼ç»ä»¶ï¼å ¶äºï¼"><a href="#å½æ°å¼ç»ä»¶ï¼å ¶äºï¼" class="headerlink" title="å½æ°å¼ç»ä»¶ï¼å ¶äºï¼"></a>å½æ°å¼ç»ä»¶ï¼å ¶äºï¼</h4><p>Vue ä¸æ¯æçæåå½æ°å¼ç»ä»¶çåæ³ã</p> 225<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// User.tsx</span></span><br><span class="line"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">User</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">'天æ°å¥½'</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{name.value}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span></span><br><span class="line">}</span><br></pre></td></tr></table></figure> 226<p>该ä¾ååé¢çãèªè¡å¯¼åº vNode 对象ãé常æ¥è¿ï¼è¿ä¹æ¯ä¸ºä»ä¹å³ä½¿åè åå¨ä¸è½æ¥æ¶åæ°ç缺é·æä¹ä¼æåºæ¥ï¼å 为äºè é½æ¯ä½¿ç¨æ¥è¿å½æ°å¼ç»ä»¶çåæ³æ¥æè¿°ç»ä»¶çï¼ä½æ¯å¨ vue æ件ä¸å¹¶æ²¡æåæ³ç´æ¥å¯¼åºè¿ä¸ªå½æ°ç»ä»¶ï¼èæ¯éè¦èªè¡æ§è¡å¾å°vNodeãèå¨ jsx æ件ä¸å´å¯ä»¥å°å ¶å¯¼åºï¼å¹¶ä¸æ¯ææ¥æ¶åæ°ã</p> 227<p>å¦æä½ éè¦ä¸ºå ¶å®ä¹ propsï¼ä¹ä¸éè¦ä½¿ç¨ ãdefineComponent ç第äºä¸ªåæ°ãä¸ºä½ æä¾ä»ä¹ props é项ï¼èæ¯ç´æ¥å¨å½æ°å¼ç»ä»¶ç props ãemits å±æ§ä¸æ载对åºçé ç½®ã</p> 228<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">
228import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">User</span>.<span class="property">props</span> = {</span><br><span class="line"> <span class="attr">userName</span>: <span class="title class_">String</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">User</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="comment">// const name = ref('天æ°å¥½')</span></span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><></span><span class="tag"><<span class="name">div</span>></span>{props.userName}<span class="tag"></<span class="name">div</span>></span><span class="tag"></></span></span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">User</span>;</span><br></pre></td></tr></table></figure> 229<p>ç¸ä¿¡ä¹ æ¯äº React ç fc çå°ä¼ä¼´ï¼çå°è¿éä¸å®æè§åæ亲åãç¶è Vue ç Jsx ç»ç©¶åªæ¯ Vue ç Jsxï¼å®å¹¶æ²¡æå React ä¸æ ·åå¨é£ä¹å¤å¼ºå¤§ç Hooks åå ç½®ç»ä»¶ï¼èæ¯ä» ä» åªæ¯ h å½æ°ç便æ·åæ³ãå¨è¯æ³ä¸ä¹å React Jsx åå¨è¯¸å¤åºå«ãå React Jsx ç¸æ¯ï¼Vue Jsx å ¶å®åèªå®¶ç template æ´æ¥è¿ãä¸è¿ Vue Jsx åæ³ççµæ´»æ§è¿æ¯è¦æ¯ template 模æ¿é«ï¼ä½å®æ¹æ´æ¨èä½¿ç¨ templateãtemplate æ´å®¹æä¸æä¸æä¾äºæ´å¥½çæ§è½ä¼åï¼é¤éä½ æ³å®å®å ¨å ¨ææ§ç»ä»¶çæ¯ä¸ä¸ªç»èï¼æéè¦jsxã</p> 230<h3 id="å°ç»"><a href="#å°ç»" class="headerlink" title="å°ç»"></a>å°ç»</h3><p>尽管æ¬ææå°äºå¾å¤ç§åæ³ï¼ä½å¤§å¤æ°åæ³å¨å¤§å¤æ°æ¶åé½æ¯ä¸ä¼æ´¾ä¸ç¨åºçï¼ä¹åºè¯¥ä¸è¢«æ´¾ä¸ç¨åºãä¹æ以å举é£ä¹å¤åæ³ï¼ä¸»è¦çç®çè¿æ¯ä¸ºäºå¾ªåºæ¸è¿å¼å ¥ jsx æ件åæ³åå½æ°å¼ç»ä»¶åæ³ã</p> 231<p>å¯ä»¥çåºï¼Vue çåæ³æ¬è´¨ä¸æ¯é项å¼çãVue3 å¨ Vue2 çåºç¡ä¸å¼å ¥äº setup é项å setup è¯æ³ç³ï¼ç»åç»åå¼ api åï¼å¼åè å¯ä»¥å°ç»ä»¶ç大é¨åé»è¾é½ç»´æ¤å¨ setup ä¸ï¼èä¸æ¯ vue2 ä¸å²è£äºé»è¾ç data+created+methods é项ã</p> 232<p>å¨æ¤åºç¡ä¸ï¼setup è¯æ³ç³æ¯æèªå¨å¯¼åºç»ä»¶åè½ï¼ä¸ºæ们æ¥å¸¸å¼å带æ¥äºå¾å¤§ç便å©ã</p> 233<p>ä½æ¯é¤äºä½¿ç¨ template æ¥è¡¨è¾¾æ们çç»æï¼æ们ä¹å¯ä»¥èªå·±ä½¿ç¨ render é项并åå© h å½æ°æè jsx çåéæ¥æå渲æå½æ°ãè¿äºé½æ¯å¨ vue æ件ä¸å®æçã</p> 234<p>æ¢ç¶é½ä¸éè¦ template äºï¼é£ä¹ vue æ件éå°±åªå©ä¸ä¸ä¸ª script äºï¼æ们å å¿½ç¥ styleï¼ãå¨ jsx æ件ä¸ï¼å°±å 许æ们ç´æ¥ä¹¦å导åºå¯¹è±¡ï¼ä»æ¯é项å¼çåæ³ï¼ï¼å¿½ç¥scriptã</p> 235<p>æåæ¯ Vue ç jsx æ件ç¬æçç¹æ§ãå®å 许æ们导åºä¸ä¸ªå½æ°ä½ä¸ºç»ä»¶ï¼æ们称ä¹ä¸ºå½æ°å¼ç»ä»¶ï¼fcï¼function componentï¼ï¼è¿æ¯ vue æ件å以åææåæ³æä¸å ·å¤çï¼å¤å½¢ä¸ React ç¸è¿ã</p> 236<p>æ»çæ¥è¯´å°±ä¸å¥è¯ï¼ãVue æ¬èº«ä»ç¶æ¯é项å¼çï¼ä½æ¯å®ç°å¨è¿é¢å¤æ¯æäºå¨ jsx æ件ä¸ä¹¦å fcãã</p> 237<h3 id="个人çæ³"><a href="#个人çæ³" class="headerlink" title="个人çæ³"></a>个人çæ³</h3><p>使ç¨åªä¸ç§åæ³ï¼ä¸»è¦ç个人å好ãæ¯ç§åæ³å¨ç¹å®åºæ¯ä¸é½æå®ç好å¤ååå¤ãéæ©åªä¸ç§å¹¶ä¸éè¦ãä½æ¯æè¿æ¯æå ç¹ä¸ªäººå»ºè®®ï¼</p> 238<ol> 239<li>ä¼å éæ© setup è¯æ³ç³ã</li> 240<li>使ç¨é项å¼æ¶ï¼æ¨èå¥ä¸ defineComponentã</li> 241<li>å½éè¦ä½¿ç¨ jsx æ¶ï¼æ¨èå¨ vue æ件ä¸ä½¿ç¨éé¡¹å¼ setup+è¿å jsx 渲æå½æ°çåæ³ã</li> 242</ol> 243<p>为ä»ä¹ä¸æ¨èå½æ°å¼ç»ä»¶çåæ³ï¼å 为å®éè¦åå¨ jsx æ件éãå¦æä½ åªæ¯æ³éè¿ jsx ä¸ºä½ çç»ä»¶å¢å¼ºæäºåè½ï¼ç´æ¥æ¹é vue æ件æ´å æ¹ä¾¿ï¼å¹¶ä¸ä¸éè¦ä¿®æ¹ä½ å¼å ¥æ件çåç¼<code>ï¼.vue -> .jsx/.tsxï¼</code>ãæéè¦çæ¯ï¼å¦æççæ³åå½æ°å¼ç»ä»¶ï¼ä¸ºä½ä¸è¯è¯ Reactï¼
243</p> 244</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>æç« ä½è : </span><span class="post-copyright-info"><a href="https://whyta.cn">YangTao</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>æç« é¾æ¥: </span><span class="post-copyright-info"><a href="https://whyta.cn/post/0dced23f9a71/">https://whyta.cn/post/0dced23f9a71/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>çæ声æ: </span><span class="post-copyright-info">æ¬å客æææç« é¤ç¹å«å£°æå¤ï¼åéç¨ <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许å¯åè®®ã转载请注ææ¥èª <a href="https://whyta.cn" target="_blank">å端æ¥è®°</a>ï¼</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'">
244<script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script>
244</div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/post/421b80af7984/" title="GitHub"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">ä¸ä¸ç¯</div><div class="next_info">GitHub</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>ç¸å
³æ¨è</span></div><div class="relatedPosts-list"><div><a href="/post/d6ec52dcc745/" title="Vue å¨ææ·»å è·¯ç±åçæèå"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-11-29</div><div class="title">Vue å¨ææ·»å è·¯ç±åçæèå</div></div></a></div><div><a href="/post/cb1902f58a3e/" title="Vue æ¹åæ°æ®ï¼é¡µé¢ä¸å·æ°çé®é¢"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-12-01</div><div class="title">Vue æ¹åæ°æ®ï¼é¡µé¢ä¸å·æ°çé®é¢</div></div></a></div><div><a href="/post/69044459c6ec/" title="Vue 页é¢æéæ§å¶åç»ééªè¯"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-12-01</div><div class="title">Vue 页é¢æéæ§å¶åç»ééªè¯</div></div></a></div></div></div><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> è¯è®º</span></div><div class="comment-switch"><span class="first-comment">Gitalk</span><span id="switch-btn"></span><span class="second-comment">Valine</span></div></div><div class="comment-wrap"><div><div id="gitalk-container"></div></div><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">YangTao</div><div class="author-info__description">share & study</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">æç« </div><div class="length-num">296</div></a><a href="/tags/"><div class="headline">æ ç¾</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">åç±»</div><div class="length-num">11</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/ytanck"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/ytanck" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>å
¬å</span></div><div class="announcement_content">=>æç个人ç½ç«ï¼å享å端ææ¯å踩åè®°å½ãå¦æå欢ï¼æ¬¢è¿Star!</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>ç®å½</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E5%85%A5"><span class="toc-number">1.</span> <span class="toc-text">å¼å
¥</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#setup-%E8%AF%AD%E6%B3%95%E7%B3%96"><span class="toc-number">2.</span> <span class="toc-text">setup è¯æ³ç³</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue2-%E9%80%89%E9%A1%B9%E5%BC%8F%E5%86%99%E6%B3%95"><span class="toc-number">3.</span> <span class="toc-text">Vue2 é项å¼åæ³</span></a><ol class="toc-child"><li class="toc-item toc-level-4">
244<a class="toc-link" href="#Vue2-%E7%BB%8F%E5%85%B8%E5%86%99%E6%B3%95"><span class="toc-number">3.1.</span> <span class="toc-text">Vue2 ç»å
¸åæ³</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#defineComponent-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0"><span class="toc-number">3.2.</span> <span class="toc-text">defineComponent è¾
å©å½æ°</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue3-%E9%80%89%E9%A1%B9%E5%BC%8F%E5%86%99%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">Vue3 é项å¼åæ³</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%8B%E5%86%99%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0"><span class="toc-number">5.</span> <span class="toc-text">æå渲æå½æ°</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#setup-%E8%BF%94%E5%9B%9E%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0"><span class="toc-number">6.</span> <span class="toc-text">setup è¿å渲æå½æ°</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#setup-%E8%BF%94%E5%9B%9E-render-%E6%96%B9%E6%B3%95"><span class="toc-number">6.1.</span> <span class="toc-text">setup è¿å render æ¹æ³</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#defineComponent-%E4%BC%A0%E5%85%A5setup"><span class="toc-number">6.2.</span> <span class="toc-text">defineComponent ä¼ å
¥setup</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-Jsx"><span class="toc-number">7.</span> <span class="toc-text">Vue & Jsx</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A8render-%E4%B8%AD%E4%BD%BF%E7%94%A8-jsx"><span class="toc-number">7.1.</span> <span class="toc-text">å¨render ä¸ä½¿ç¨ jsx</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A8-setup-%E4%B8%AD%E4%BD%BF%E7%94%A8jsx"><span class="toc-number">7.2.</span> <span class="toc-text">å¨ setup ä¸ä½¿ç¨jsx</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#defineComponent-%E7%AE%80%E5%86%99"><span class="toc-number">7.3.</span> <span class="toc-text">defineComponent ç®å</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%87%AA%E8%A1%8C%E5%AF%BC%E5%87%BA-vNo
244de-%E5%AF%B9%E8%B1%A1"><span class="toc-number">7.4.</span> <span class="toc-text">èªè¡å¯¼åº vNode 对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#defineComponent-%E7%9A%84%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0"><span class="toc-number">7.5.</span> <span class="toc-text">defineComponent ç第äºä¸ªåæ°</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8-jsx"><span class="toc-number">8.</span> <span class="toc-text">ç´æ¥å¨ vue ä¸ä½¿ç¨ jsx</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E5%AF%BC%E5%87%BA-jsx-%E5%AF%B9%E8%B1%A1"><span class="toc-number">8.1.</span> <span class="toc-text">ç´æ¥å¯¼åº jsx 对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E7%94%A8%E5%9C%A8-template-%E4%B8%8A"><span class="toc-number">8.2.</span> <span class="toc-text">ç´æ¥ç¨å¨ template ä¸</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6%EF%BC%88%E5%85%B6%E4%B8%80%EF%BC%89"><span class="toc-number">8.3.</span> <span class="toc-text">å½æ°å¼ç»ä»¶ï¼å
¶ä¸ï¼</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8B%AC%E7%AB%8B%E7%9A%84-Jsx-%E6%96%87%E4%BB%B6"><span class="toc-number">9.</span> <span class="toc-text">ç¬ç«ç Jsx æ件</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>ææ°æç« </span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/0dced23f9a71/" title="Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼">Vueçä¸åé£æ ¼åæ³ï¼ä½ ç¥éä¹ï¼</a><time datetime="2024-10-24T10:52:24.000Z" title="åè¡¨äº 2024-10-24 10:52:24">2024-10-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/421b80af7984/" title="GitHub">GitHub</a><time datetime="2024-10-24T02:58:54.469Z" title="åè¡¨äº 2024-10-24 02:58:54">2024-10-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/d9b2231487d1/" title="ä¸æ解读react-hook(useStateãuseReducerãuseEffectãuseCallbackãuseMemoãuseRefãuseContext...)">ä¸æ解读react-hook(useStateãuseReducerãuseEffectãuseCallbackãuseMemoãuseRefãuseContext...)</a><time datetime="2024-09-06T10:02:42.000Z" title="åè¡¨äº 2024-09-06 10:02:42">2024-09-06</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/dc707376a421/" title="GPT4å级æå(2024å¹´5æææ°)">GPT4å级æå(2024å¹´5æææ°)</a><time datetime="2024-05-15T10:21:23.000Z" title="åè¡¨äº 2024-05-15 10:21:23">2024-05-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/a4dd5826810e/" title="CSS @符å·è§åç使ç¨ï¼@font-faceã@keyframesã@mediaã@scopeçï¼">CSS @符å·è§åç使ç¨ï¼@font-faceã@keyframesã@mediaã@scopeçï¼</a><time datetime="2024-02-20T11:23:26.000Z" title="åè¡¨äº 2024-02-20 11:23:26">2024-02-20</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2023 - 2024 By YangTao</div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"><span>éICPå¤2021000562å·</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="é
读模å¼"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="ç®ç¹è½¬æ¢">ç®</button><button id="darkmode" type="button" title="æµ
è²åæ·±è²æ¨¡å¼è½¬æ¢"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="åæ ååæ åæ¢"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="ç®å½"><i class="fas fa-list-ul"></i></button><button id="chat-btn" type="button" title="è天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="ç´è¾¾è¯è®º"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="åå°é¡¶é¨"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div>
244<script src="/js/utils.js"></script>
244<script src="/js/main.js"></script>
244<script src="/js/tw_cn.js"></script>
244<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script>
244<div class="js-pjax">
244<script>(() => { 245 const initGitalk = () => { 246 const gitalk = new Gitalk(Object.assign({ 247 clientID: '82c5496065cfe6d3d6d6', 248 clientSecret: '798e420c011e4d4eb32f94b0e6261830a24c3c96', 249 repo: 'ytanck.github.io', 250 owner: 'ytanck', 251 admin: ['ytanck'], 252 id: '9a94d3f53b6acc5de2c064cc85b61876', 253 updateCountCallback: commentCount 254 },null)) 255 256 gitalk.render('gitalk-container') 257 } 258 259 const loadGitalk = async() => { 260 if (typeof Gitalk === 'function') initGitalk() 261 else { 262 await getCSS('https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css') 263 await getScript('https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js') 264 initGitalk() 265 } 266 } 267 268 const commentCount = n => { 269 const isCommentCount = document.querySelector('#post-meta .gitalk-comment-count') 270 if (isCommentCount) { 271 isCommentCount.textContent= n 272 } 273 } 274 275 if ('Gitalk' === 'Gitalk' || !false) { 276 if (false) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk) 277 else loadGitalk() 278 } else { 279 window.loadOtherComment = loadGitalk 280 } 281})()</script>
281<script>(() => { 282 const initValine = () => { 283 const valine = new Valine(Object.assign({ 284 el: '#vcomment', 285 appId: 'epBB1Z21rnGhwEtsu57MeE1d-gzGzoHsz', 286 appKey: 'jzsxVdOEZgUj76hevYcbr4pV', 287 avatar: '', 288 serverURLs: 'https://epbb1z21.lc-cn-n1-shared.com', 289 emojiMaps: "", 290 path: window.location.pathname, 291 visitor: false 292 }, null)) 293 } 294 295 const loadValine = async () => { 296 if (typeof Valine === 'function') initValine() 297 else { 298 await getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js') 299 initValine() 300 } 301 } 302 303 if ('Gitalk' === 'Valine' || !false) { 304 if (false) btf.loadComment(document.getElementById('vcomment'),loadValine) 305 else setTimeout(loadValine, 0) 306 } else { 307 window.loadOtherComment = loadValine 308 } 309})()</script>
309</div>
309<script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script>
309<script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script>
309<script>(() => { 310 const isChatBtn = true 311 const isChatHideShow = false 312 313 if (isChatBtn) { 314 const close = () => { 315 Chatra('minimizeWidget') 316 Chatra('hide') 317 } 318 319 const open = () => { 320 Chatra('openChat', true) 321 Chatra('show') 322 } 323 324 window.ChatraSetup = { 325 startHidden: true 326 } 327 328 window.chatBtnFn = () => { 329 const isShow = document.getElementById('chatra').classList.contains('chatra--expanded') 330 isShow ? close() : open() 331 } 332 } else if (isChatHideShow) { 333 window.chatBtn = { 334 hide: () => { 335 Chatra('hide') 336 }, 337 show: () => { 338 Chatra('show') 339 } 340 } 341 } 342 343 (function(d, w, c) { 344 w.ChatraID = 'PhLXQufxgCL6iLDEc' 345 var s = d.createElement('script') 346 w[c] = w[c] || function() { 347 (w[c].q = w[c].q || []).push(arguments) 348 } 349 s.async = true 350 s.src = 'https://call.chatra.io/chatra.js' 351 if (d.head) d.head.appendChild(s) 352 })(document, window, 'Chatra') 353 354})()</script>
354<div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">æç´¢</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> æ°æ®åºå è½½ä¸</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="æç´¢æç« " type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div>
354<script src="/js/search/local-search.js"></script>
354</div></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.