front-end-dictionary
/
vue-v3.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue3资源和面试题 | 前端宝典</title>
    <meta name="generator" content="VuePress 1.9.7">

    <meta name="description" content="涵盖常见面试题、开发工具介绍">

    <link rel="preload" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css" as="style"><link rel="preload" href="/front-end-dictionary/assets/js/app.88ed2bc2.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/2.22fea77d.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/21.14370795.js" as="script"><link rel="prefetch" href="/front-end-dictionary/assets/js/10.c7840575.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/11.564b3bac.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/12.3de2e7ff.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/13.8666c730.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/14.d8abfcfe.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/15.15ad8667.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/16.854da236.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/17.d6fe8b8b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/18.32323657.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/19.21b2db1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/20.6d96ceec.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/22.44f2db92.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/3.099dce6b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/4.47f3f56c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/5.f118685e.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/6.b79a085d.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/7.94eeef1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/8.f5e643c9.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/9.e180f19c.js">
    <link rel="stylesheet" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-dictionary/" class="home-link router-link-active"><img src="http://www.itheima.com/images/logo.png" alt="前端宝典" class="logo"> <span class="site-name can-hide">前端宝典</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  黑马官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-router相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vuex相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  服务器端渲染
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue3相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react基础
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react-router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  redux相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Hooks相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  其他相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原生小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app开发
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
  开发工具
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  黑马官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-router相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vuex相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  服务器端渲染
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue3相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react基础
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  react-router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  redux相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Hooks相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  其他相关
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原生小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app开发
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
  开发工具
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>vue3资源和面试题</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-dictionary/vue-v3.html#_1、相关资源" class="sidebar-link">1、相关资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/front-end-dictionary/vue-v3.html#_2、面试题" class="sidebar-link">2、面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vue3和vue2区别" class="sidebar-link">vue3和vue2区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vite和webapck区别" class="sidebar-link">vite和webapck区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vue3-如何定义响应式数据" class="sidebar-link">vue3 如何定义响应式数据</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vue3里面如何使用this" class="sidebar-link">vue3里面如何使用this</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#介绍一下setup语法糖" class="sidebar-link">介绍一下setup语法糖</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#computed用法" class="sidebar-link">computed用法</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#watch用法" class="sidebar-link">watch用法</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#watch和watcheffect区别" class="sidebar-link">watch和watchEffect区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#toraw和torefs作用" class="sidebar-link">toRaw和toRefs作用</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#ref和shallowref区别" class="sidebar-link">ref和shallowRef区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#生命周期函数" class="sidebar-link">生命周期函数</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#过滤器" class="sidebar-link">过滤器</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vue3里面组件通信" class="sidebar-link">vue3里面组件通信</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#如何实现类似vue2的原型挂载" class="sidebar-link">如何实现类似vue2的原型挂载</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#defineexpose是什么" class="sidebar-link">defineExpose是什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#defineemits是什么" class="sidebar-link">defineEmits是什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#动态组件变化" class="sidebar-link">动态组件变化</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#插件和全局组件注册机制变化" class="sidebar-link">插件和全局组件注册机制变化</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#混入和hooks区别" class="sidebar-link">混入和hooks区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#hooks函数和普通函数区别" class="sidebar-link">hooks函数和普通函数区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#v-model变化" class="sidebar-link">v-model变化</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#sync变化" class="sidebar-link">.sync变化</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#vue-router变化" class="sidebar-link">vue-router变化</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#介绍一下pinia" class="sidebar-link">介绍一下pinia</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/vue-v3.html#对比一下pina和vuex" class="sidebar-link">对比一下pina和vuex</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue3资源和面试题"><a href="#vue3资源和面试题" class="header-anchor">#</a> vue3资源和面试题</h1> <h2 id="_1、相关资源"><a href="#_1、相关资源" class="header-anchor">#</a> 1、相关资源</h2> <h2 id="_2、面试题"><a href="#_2、面试题" class="header-anchor">#</a> 2、面试题</h2> <h3 id="vue3和vue2区别"><a href="#vue3和vue2区别" class="header-anchor">#</a> vue3和vue2区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ol><li><strong>选项式API</strong></li></ol> <ul><li>v2: options API(选项式API):【必会】
<ul><li>优点:对于新手容易,按照固定选项实现功能，代码一旦庞大不好维护。</li> <li>缺点: 对于代码的阅读\维护\复用(逻辑)不是很友好, 虽然v2中也可以通过Mixins实现逻辑的复用，但是容易命名冲突</li></ul></li> <li>v3: composition API(组合式API)  【必会】
<ul><li>优点: 功能代码组合在一起，编译抽离复用和维护，开发也方便。</li></ul></li></ul> <ol start="2"><li><strong>使用</strong></li></ol> <ul><li>v2: 配合vuex,对与ts的支持不是很好,不允许使用多个根节点  【必会】</li> <li>v3: 也可以使用vuex，推荐配合pina,底层就使用ts重构的,对ts支持很好,多个根节点  【必会】</li></ul> <ol start="3"><li><strong>性能</strong></li></ol> <ul><li>v3的性能会比v2快1.2_2倍:</li> <li>虚拟dom的创建:  【看情况背诵】
<ul><li>v2中,数据发生变化,会将模板进行重编译,生成所有的虚拟dom,</li> <li>v3中数据发生变化,看该虚拟dom是否参与更新,如果参与更新,创建新的虚拟dom,如果不参与更新,直接复用上一次的虚拟dom</li></ul></li> <li>v3采用了静态标记,给静态节点打上标记,diff的过程只对比动态节点,忽略静态节点  【看情况背诵】</li> <li>事件函数的缓存: 事件函数每次在模板编译的时候会进行缓存  【看情况背诵】</li> <li>v3的tree shaking:实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的,v3的打包比v2的小  【看情况背诵】</li></ul> <ol start="4"><li>**响应式原理 **【必会】</li></ol> <ul><li>v2:Object.defineProperty ，新增属性无法劫持，需要通过$set</li> <li>v3: Proxy， 一次对深层次的所有属性都可以代理，新增的也可以实现代理，不需要$set</li></ul></details> <h3 id="vite和webapck区别"><a href="#vite和webapck区别" class="header-anchor">#</a> vite和webapck区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>vite原理: 启动项目不会对项目进行完全打包,启动服务,将资源通过服务进行托管,项目加载而是<strong>通过浏览器利用esm(es module)的方式加载资源,使用到资源才会加载才会处理,这实际上是让浏览器接管了打包程序的部分工作</strong>。</li> <li>webpack 真正的打包: 每次启动都会读取配置文件进行编译打包,然后启动浏览器,浏览器加载资源,热更新的也就自然不好。</li></ul></details> <h3 id="vue3-如何定义响应式数据"><a href="#vue3-如何定义响应式数据" class="header-anchor">#</a> vue3 如何定义响应式数据</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>主要是通过ref和reactive这两个响应式API。</p> <p>ref: 将简单数据类型或复杂数据类型处理为响应式</p> <ul><li>模板中使不需要.value,在js中使用需.value访问；</li> <li>方便重置数据（重置直接给.value赋值即可）</li></ul> <p>reactive:</p> <ul><li>只能将复杂数据类型处理为响应式，不需要value访问</li> <li>不方便重置数据（重置需要通过Object.assign方法）</li></ul> <p>推荐的使用方式:</p> <ul><li>语法层面: 简单数据类型推荐使用ref, 复杂数据类型推荐使用reactive</li> <li>性能: <strong>更推荐全部使用ref,  ref的性能在vue3.2之后比reactive高260%</strong></li></ul></details> <h3 id="vue3里面如何使用this"><a href="#vue3里面如何使用this" class="header-anchor">#</a> vue3里面如何使用this</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>在setup函数里面是无法使用this的，如果真要实现通过<code>getCurrentInstance</code> 获取当前组件实例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span>  <span class="token punctuation">{</span> proxy<span class="token punctuation">,</span>emit<span class="token punctuation">,</span>props  <span class="token punctuation">}</span><span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 获取当前组件实例</span>
<span class="token comment">// proxy类似this</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></details> <h3 id="介绍一下setup语法糖"><a href="#介绍一下setup语法糖" class="header-anchor">#</a> 介绍一下setup语法糖</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>是vue3.2之后提供的一种组合式API新的书写方式，简化了组合式开发。</p> <ul><li>不需要export default 对象</li> <li>定义的变量和方法直接在模板中使用，无需return</li> <li>导入组件无需注册，直接使用</li> <li>setup里面的代码执行的时机比beforeCreate还要早</li> <li>无法直接使用this，需要通过 getCurrentInstance 获取组件实例，读取proxy 属性作为this使用</li> <li>缺点暂时无法直接添加name属性进行命名，解决方案： 通过插件vite-plugin-vue-setup-extend 实现。</li></ul></details> <h3 id="computed用法"><a href="#computed用法" class="header-anchor">#</a> computed用法</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>函数式编程思想，调用computed函数实现，传入一个函数或一个对象。 最终返回的数据在js中也要.value访问</p> <p>用法：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>computed(()=&gt;{
	return 内容
})
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language- line-numbers-mode"><pre class="language-text"><code>computed({
	set(val){},
	get(){ return 内容 }
})
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>::</p> <h3 id="watch用法"><a href="#watch用法" class="header-anchor">#</a> watch用法</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>函数式编程思想，调用watch函数实现，传入最多三个参数 <code>watch(监听对象，执行函数,配置)</code></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 单个监听
watch(变量,(newVal,oldVal)=&gt;{},{ immediate:true, deep:true })

// 多个监听
watch([变量1,变量2],(newVal,oldVal)=&gt;{},{ immediate:true, deep:true })

// 监听对象属性
watch(对象=&gt;属性名,(newVal,oldVal)=&gt;{},{ immediate:true, deep:true })

// 监听对象多个属性
watch([对象=&gt;属性名1,对象=&gt;属性名2],(newVal,oldVal)=&gt;{},{ immediate:true, deep:true })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li>深度监听 <code>deep:true</code></li> <li>立即执行  <code>immediate: true</code></li></ul></details></details> <h3 id="watch和watcheffect区别"><a href="#watch和watcheffect区别" class="header-anchor">#</a> watch和watchEffect区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>watch是用来实现监听数据的变化的，值变化了才会调用</p></li> <li><p>watchEffect 也是用来实现，第一次就执行一下，函数内部用到的值只要变化了会继续调用</p></li> <li><p>用法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">watch</span><span class="token punctuation">(</span>监听对象，执行函数<span class="token punctuation">,</span>配置<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> num <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> str <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 class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 页面打开就调用一次，所以类似immediate为true</span>
<span class="token comment">// 只要任何地方修改了num或str的值， 那么watchEffect就会重新执行</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li></ul></details> <h3 id="toraw和torefs作用"><a href="#toraw和torefs作用" class="header-anchor">#</a> toRaw和toRefs作用</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>toRaw 将响应式数据变成普通数据，一般提交数据的时候处理一下</li> <li>toRefs 将一个响应式对象里面的属性解构出来，且每个解构出来的变量依然具备响应式和原对象数据还关联。</li></ul></details> <h3 id="ref和shallowref区别"><a href="#ref和shallowref区别" class="header-anchor">#</a> ref和shallowRef区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>这两个都是vue3用来添加响应式的，不同的是添加的深度不同</p> <ul><li><p>使用ref创建的对象，里面任意深度的属性与视图都是响应性的</p></li> <li><p>与ref不同，shallowRef修改深层属性时，并不会更新视图</p></li> <li><p>为什么要使用shallowRef？</p> <p>因为ref方法会递归遍历对象的所有属性，使所有属性都具备响应性，所以，当对象很复杂且庞大时，过多的监听会导致性能上的损耗。如假设有一个文章列表数组，我们只是单纯的渲染。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>list <span class="token operator">=</span> <span class="token punctuation">[</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 literal-property property">auto</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</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 literal-property property">auto</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</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 literal-property property">auto</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//...</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>像这种做展示用的数据，并不需要每个属性都做响应性，此时使用shallowRef就很合适</p></li></ul></details> <h3 id="生命周期函数"><a href="#生命周期函数" class="header-anchor">#</a> 生命周期函数</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>vue3中的生命周期函数来自vue,所以需要通过vue按需引入,<strong>setup中生命周期函数可以多次调用</strong></p> <p>setup执行时机比beforeCreate还要早，所以无法使用this</p> <ol><li>创建阶段</li></ol> <ul><li>vue2: beforeCreate/created</li> <li>vue3: setup</li></ul> <ol><li>挂载阶段</li></ol> <ul><li>vue2: beforeMount/mounted</li> <li>vue3: onBeforeMount/onMounted</li></ul> <ol><li>更新阶段</li></ol> <ul><li>vue2: beforeUpdate/updated</li> <li>vue3: onBeforeUpdate/onUpdated</li></ul> <ol><li>销毁阶段</li></ol> <ul><li>vue2: beforeDestory/destoryde</li> <li>vue3:  <strong>onBeforeUnMounte/onUnMounted</strong></li></ul></details> <h3 id="过滤器"><a href="#过滤器" class="header-anchor">#</a> 过滤器</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>无法使用过滤器，已经删除了，如果想实现，通过定义函数，调用函数实现</p></details> <h3 id="vue3里面组件通信"><a href="#vue3里面组件通信" class="header-anchor">#</a> vue3里面组件通信</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p><strong>父子通信</strong></p> <ul><li>defineProps和defineEmits</li> <li>通过ref获取组件实例，主要子组件要通过 defineExpose暴露相关内容</li></ul></li> <li><p><strong>祖先后代通信</strong></p> <ul><li><p>provide和inject</p></li> <li><p>注意：</p> <ul><li><p>在选项式开发的时候 provide和inject不是响应式的。</p></li> <li><p>在组合式开发中也要注意，provide提供的的一定要是响应式对象</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> num <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">19</span><span class="token punctuation">)</span>
<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">&quot;num&quot;</span><span class="token punctuation">,</span>num<span class="token punctuation">)</span>  <span class="token comment">// 注意： 这里后面千万不能写 num.value 这样就不具备响应式</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ul></li></ul></li> <li><p><strong>pinia实现通信</strong></p></li></ul></details> <h3 id="如何实现类似vue2的原型挂载"><a href="#如何实现类似vue2的原型挂载" class="header-anchor">#</a> 如何实现类似vue2的原型挂载</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>vue2里面可以通过  <code>Vue.protyotype.xx</code> 实现原型挂载，在组件中通过 <code>this.xx</code> 读取，vue3无法实现</p></li> <li><p>vue3里面通过在 应用实例 app上面配置globalProperties里面进行挂载</p> <ul><li><p>main.js中  <code>app.globalProperties.xx</code></p></li> <li><p>组件中：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span>  <span class="token punctuation">{</span> proxy  <span class="token punctuation">}</span><span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 获取当前组件实例</span>
proxy<span class="token punctuation">.</span>xx <span class="token comment">// 读取实现</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ul></li></ul></details> <h3 id="defineexpose是什么"><a href="#defineexpose是什么" class="header-anchor">#</a> defineExpose是什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>expose是vue3.2提供的一个新特性，因为默认组件是封闭的，无法从外部直接ref获取组件内部属性和方法，这是一种优点，有效维护了组件内部的安全。 需要暴露的内容要通过 expose或者 definExpose进行暴露。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 组合式API</span>
<span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token literal-property property">属性</span><span class="token operator">:</span>数据
   <span class="token literal-property property">方法</span><span class="token operator">:</span>方法
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 选项式API</span>
<span class="token literal-property property">expose</span><span class="token operator">:</span><span class="token punctuation">{</span>
   <span class="token literal-property property">属性</span><span class="token operator">:</span>数据
   <span class="token literal-property property">方法</span><span class="token operator">:</span>方法
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></details> <h3 id="defineemits是什么"><a href="#defineemits是什么" class="header-anchor">#</a> defineEmits是什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>在vue3里组件的自定义事件需要在emits或者 defineEmits 里面进行声明的，如果没有被声明的则会被当作原生事件进行去执行，这是更加规范的一种表现， 正式因为这样也就没有 .native修饰符的价值，所以vue3没有了native修饰符。</p></details> <h3 id="动态组件变化"><a href="#动态组件变化" class="header-anchor">#</a> 动态组件变化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>vue2中 is属性绑定的是变量是一个字符串</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>变量<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--该变量的值是一个字符串，为需要展示的组件名称--&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>vue2中 is属性绑定的是变量是一个组件对象</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>变量<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--该变量的值是一个组件对象--&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></details> <h3 id="插件和全局组件注册机制变化"><a href="#插件和全局组件注册机制变化" class="header-anchor">#</a> 插件和全局组件注册机制变化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>vue2中：通过Vue构造函数实现</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&quot;全局组件名&quot;</span><span class="token punctuation">,</span>组件对象<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>插件名<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>vue3中：通过app实例实现</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createVue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&quot;全局组件名&quot;</span><span class="token punctuation">,</span>组件对象<span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>插件名<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></details> <h3 id="混入和hooks区别"><a href="#混入和hooks区别" class="header-anchor">#</a> 混入和hooks区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>混入是mixins，在vue2和vue3里面都有，是用来实现逻辑复用的。但是缺点就是容易造成命名冲突，更多是配合选项式api开发</li> <li>自定义hooks是vue3里面实现逻辑复用的方式，是将需要复用的代码抽离出去，有效实现复用。 在组合式API开发里面我们使用。</li></ul></details> <h3 id="hooks函数和普通函数区别"><a href="#hooks函数和普通函数区别" class="header-anchor">#</a> hooks函数和普通函数区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>自定义hook函数是用来实现逻辑复用的，一般是项目中的业务逻辑；</li> <li>自定义hooks函数要求按照 <code>use函数名</code> 取名称</li> <li>自定义hooks函数内部可以使用 <strong>生命周期函数、定义响应式函数都可以正常使用，但是普通函数是无法实现的。</strong></li></ul></details> <h3 id="v-model变化"><a href="#v-model变化" class="header-anchor">#</a> v-model变化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>vue2中 组件 v-model的本质是 自定义属性<code>value</code>和自定义事件<code>input</code>的语法糖（只能有一个v-model）</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量=$event<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</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">&quot;</span>变量<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li> <li><p>vue3中 组件 v-model的本质是 自定义属性<code>modelValue</code> 和自定义事件 <code>update:modelValue</code> 的语法糖 (可以有多个v-model)</p></li></ul></details> <h3 id="sync变化"><a href="#sync变化" class="header-anchor">#</a> .sync变化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>vue里面没有了.sync修饰符，vue3里面可以有多个v-model，通过<code>v-model:变量名</code> 实现</p> <p>vue2中</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</span> <span class="token attr-name">:自定义属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">@update:</span>自定义属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量=$event<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</span> <span class="token attr-name">:自定义属性名.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>vue3中</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</span> <span class="token attr-name">:自定义属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">@update:</span>自定义属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>变量=$event<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>自定义组件</span> <span class="token attr-name"><span class="token namespace">v-model:</span>自定义属性名&quot;变量&quot;</span> <span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></details> <h3 id="vue-router变化"><a href="#vue-router变化" class="header-anchor">#</a> vue-router变化</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>vue3里面使用 vue-router4； vue2里面使用vue-router3</p> <ul><li><p>创建实例变化</p> <ul><li><p>vue2通过 <code>new VueRouter</code>实现</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">routes</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mode</span><span class="token operator">:</span><span class="token string">&quot;hash/history&quot;</span>  <span class="token comment">// 默认hash</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li> <li><p>vue3通过 <code>createRouter</code> 实现</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token comment">// createWebHashHistory 和 createMemoryHistory (SSR相关) 同理</span>

<span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token comment">// 一定要配置history选项来指定路由模式，否则报错</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></li></ul></li> <li><p>获取路由实例和路由信息方式不同</p> <ul><li>vue2 通过  <code>this.$route和 this.$router 来实现</code></li> <li>vue3 通过 <code>useRoute 和 useRouter</code> 来实现</li></ul></li> <li><p>动态添加路由实例（页面权限）</p> <ul><li>vue2 通过 <code>router.addRoutes(数组)</code></li> <li>vue3 通过 <code>router.addRoute(单个对象)</code></li></ul></li></ul></details> <h3 id="介绍一下pinia"><a href="#介绍一下pinia" class="header-anchor">#</a> 介绍一下pinia</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>是vue3里面实现状态管理的一种方式，推荐使用pinia，vue2里面推荐使用vuex</li> <li>pinia数据流更加的简单，没有了 mutation概念，action里面可以直接修改state，可以同步也可以异步</li> <li>模块化更加的清晰简单，直接使用调用模块，访问和修改数据和方法更加轻松，直接通过模块去访问和调用即可。</li></ul> <hr> <p>使用：</p> <ul><li><p>main.js中</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code>import <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> from 'pinia'
const pinia = createPinia() <span class="token comment">// 创建pinia实例</span>
app.use(pinia)  <span class="token comment">// 安装实例</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li> <li><p>创建模块</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 选项式API开发</span>
<span class="token comment">// const useXxxStore = defineStore('仓库名',对象)</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> useCounterStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'counter'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</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 class="token literal-property property">getters</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token function-variable function">dobuleCount</span><span class="token operator">:</span><span class="token parameter">state</span><span class="token operator">=&gt;</span>state<span class="token punctuation">.</span>count<span class="token operator">*</span><span class="token number">2</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token operator">++</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 class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 组合式API开发</span>
<span class="token comment">// const useXxxStore = defineStore('仓库名',函数)</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> useCounterStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'counter'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <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 class="token comment">// 类似state</span>
    <span class="token keyword">const</span> dobuleCount <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 operator">=&gt;</span>count<span class="token punctuation">.</span>value<span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">)</span>  <span class="token comment">// 类似getters</span>
    <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>  <span class="token comment">// 类似mutation或action</span>
        count<span class="token punctuation">.</span>value<span class="token operator">++</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span>dobuleCount<span class="token punctuation">,</span>increment <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></li> <li><p>组件中访问和调用</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>count<span class="token punctuation">)</span>   <span class="token comment">// 委婉读取数据局</span>
<span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>dobuleCount  <span class="token comment">//直接读取数据</span>

<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
counter<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">// 委婉调用方法</span>
<span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>increment  <span class="token comment">//直接调用方法</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></li></ul></details> <h3 id="对比一下pina和vuex"><a href="#对比一下pina和vuex" class="header-anchor">#</a> 对比一下pina和vuex</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>vuex数据流更加的复杂， action-&gt;mutation-&gt;state；pinia数据流更加简单，直接读取和操作</li> <li>vuex模块化嵌套复杂，pinia模块化简单，要使用哪个模块直接用哪个模块</li> <li>vuex不能直接修改state，读取数据和修改都麻烦需要通过指定方法或辅助函数； pinia很简单，只要得到仓库实例，直接读取数据调用方法</li></ul></details></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/front-end-dictionary/assets/js/app.88ed2bc2.js" defer></script><script src="/front-end-dictionary/assets/js/2.22fea77d.js" defer></script><script src="/front-end-dictionary/assets/js/21.14370795.js" defer></script>
  </body>
</html>