uni-app官网_link管理

main.js 项目根目录必需创建 index.html 文件只支持使用 ES6 模块规范 vuex 用法避免在同一元素上同时使用 v-if 与 v-for

以下列举迁移到 vue3，必须适配的几个点，vue2 项目才能正常运行在 vue3 上。更多查看完整的非兼容特性列表

# main.js

创建应用实例

// 之前 - Vue 2
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false    // vue3 不再需要
App.mpType = 'app'    // vue3 不再需要
const app = new Vue({
...App
app.$mount()

        
         &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 id="环境变量"&gt;&lt;a href="#环境变量" class="header-anchor"&gt;#&lt;/a&gt; 环境变量&lt;/h2&gt; &lt;div class="code" data-v-5495d31a=""&gt;&lt;div class="page-runtime" data-v-5495d31a=""&gt;&lt;div class="page-snippet" data-v-5495d31a=""&gt;&lt;div class="page-tabs" data-v-5495d31a=""&gt;&lt;div class="pages-tabs-header" data-v-5495d31a=""&gt;&lt;p class="pages-tabs-header-text pages-tabs--active" data-v-5495d31a=""&gt;Vue2&lt;/p&gt;&lt;p class="pages-tabs-header-text " data-v-5495d31a=""&gt;Vue3&lt;/p&gt;&lt;/div&gt;&lt;div class="page-snippet-code" data-v-5495d31a=""&gt;&lt;div class="language-JS extra-class" data-v-5495d31a=""&gt;&lt;pre class="language-js" data-v-5495d31a=""&gt;&lt;code data-v-5495d31a=""&gt;&lt;span class="token comment" data-v-5495d31a=""&gt;// 配置环境变量&lt;/span&gt;
&lt;span class="token comment" data-v-5495d31a=""&gt;// 根目录.env文件 必须 VUE_APP_ 开头&lt;/span&gt;
&lt;span class="token constant" data-v-5495d31a=""&gt;VUE_APP_SOME_KEY&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;=&lt;/span&gt; &lt;span class="token number" data-v-5495d31a=""&gt;123&lt;/span&gt;
&lt;span class="token comment" data-v-5495d31a=""&gt;// 获取环境变量&lt;/span&gt;
process&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;env&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token constant" data-v-5495d31a=""&gt;NODE_ENV&lt;/span&gt;         &lt;span class="token comment" data-v-5495d31a=""&gt;// 应用运行的模式&lt;/span&gt;
process&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;env&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token constant" data-v-5495d31a=""&gt;VUE_APP_SOME_KEY&lt;/span&gt; &lt;span class="token comment" data-v-5495d31a=""&gt;// 123&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="code-content" style=";" data-v-5495d31a=""&gt;&lt;iframe src="" frameborder="0" class="code-iframe" data-v-5495d31a=""/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Tips&lt;/strong&gt;&lt;/p&gt; &lt;ul&gt;&lt;li&gt;Vue2 更多 &lt;a href="https://uniapp.dcloud.net.cn/tutorial/env.html#env" target="_blank" rel="noopener noreferrer"&gt;设置环境变量方式&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Vue3 非H5端，应直接访问 process.env.* 获取环境变量，不支持访问 process&lt;/li&gt;&lt;/ul&gt; &lt;h2 id="全局属性"&gt;&lt;a href="#全局属性" class="header-anchor"&gt;#&lt;/a&gt; 全局属性&lt;/h2&gt; &lt;p&gt;例如：全局网络请求&lt;/p&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token comment"&gt;// 之前 - Vue 2&lt;/span&gt;
&lt;span class="token class-name"&gt;Vue&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;prototype&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function-variable function"&gt;$http&lt;/span&gt; &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token operator"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token comment"&gt;// 之后 - Vue 3&lt;/span&gt;
&lt;span class="token keyword"&gt;const&lt;/span&gt; app &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;createApp&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
app&lt;span class="token punctuation"&gt;.&lt;/span&gt;config&lt;span class="token punctuation"&gt;.&lt;/span&gt;globalProperties&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function-variable function"&gt;$http&lt;/span&gt; &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token operator"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="插件使用"&gt;&lt;a href="#插件使用" class="header-anchor"&gt;#&lt;/a&gt; 插件使用&lt;/h2&gt; &lt;p&gt;例如：使用 vuex 的 store&lt;/p&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token comment"&gt;// 之前 - Vue 2&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; store &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"./store"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token class-name"&gt;Vue&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;prototype&lt;span class="token punctuation"&gt;.&lt;/span&gt;$store &lt;span class="token operator"&gt;=&lt;/span&gt; store&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token comment"&gt;// 之后 - Vue 3&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; store &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"./store"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;const&lt;/span&gt; app &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;createApp&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;App&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
app&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;use&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;store&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="项目根目录必需创建-index-html-文件"&gt;&lt;a href="#项目根目录必需创建-index-html-文件" class="header-anchor"&gt;#&lt;/a&gt; 项目根目录必需创建 index.html 文件&lt;/h2&gt; &lt;p&gt;粘贴复制如下内容：&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token doctype"&gt;&lt;span class="token punctuation"&gt;&amp;lt;!&lt;/span&gt;&lt;span class="token doctype-tag"&gt;DOCTYPE&lt;/span&gt; &lt;span class="token name"&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt; &lt;span class="token attr-name"&gt;lang&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;en&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class="token attr-name"&gt;charset&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;UTF-8&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token attr-name"&gt;name&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;viewport&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token attr-name"&gt;content&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token comment"&gt;&amp;lt;!--preload-links--&amp;gt;&lt;/span&gt;
    &lt;span class="token comment"&gt;&amp;lt;!--app-context--&amp;gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name"&gt;id&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;app&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token comment"&gt;&amp;lt;!--app-html--&amp;gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class="token attr-name"&gt;type&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;module&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name"&gt;src&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;/main.js&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token script"/&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="只支持使用-es6-模块规范"&gt;&lt;a href="#只支持使用-es6-模块规范" class="header-anchor"&gt;#&lt;/a&gt; 只支持使用 ES6 模块规范&lt;/h2&gt; &lt;p&gt;commonJS 需改为 ES6 模块规范&lt;/p&gt; &lt;h3 id="模块导入"&gt;&lt;a href="#模块导入" class="header-anchor"&gt;#&lt;/a&gt; 模块导入&lt;/h3&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token comment"&gt;// 之前 - Vue 2, 使用 commonJS&lt;/span&gt;
&lt;span class="token keyword"&gt;var&lt;/span&gt; utils &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;require&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"../../../common/util.js"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token comment"&gt;// 之后 - Vue 3， 只支持 ES6 模块&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; utils &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"../../../common/util.js"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="模块导出"&gt;&lt;a href="#模块导出" class="header-anchor"&gt;#&lt;/a&gt; 模块导出&lt;/h3&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token comment"&gt;// 之前 - Vue 2, 依赖如使用 commonJS 方式导出&lt;/span&gt;
module&lt;span class="token punctuation"&gt;.&lt;/span&gt;exports&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token constant"&gt;X&lt;/span&gt; &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token constant"&gt;X&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token comment"&gt;// 之后 - Vue 3， 只支持 ES6 模块&lt;/span&gt;
&lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token constant"&gt;X&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="vuex-用法"&gt;&lt;a href="#vuex-用法" class="header-anchor"&gt;#&lt;/a&gt; vuex 用法&lt;/h2&gt; &lt;div class="code" data-v-5495d31a=""&gt;&lt;div class="page-runtime" data-v-5495d31a=""&gt;&lt;div class="page-snippet" data-v-5495d31a=""&gt;&lt;div class="page-tabs" data-v-5495d31a=""&gt;&lt;div class="pages-tabs-header" data-v-5495d31a=""&gt;&lt;p class="pages-tabs-header-text pages-tabs--active" data-v-5495d31a=""&gt;Vue2&lt;/p&gt;&lt;p class="pages-tabs-header-text " data-v-5495d31a=""&gt;Vue3&lt;/p&gt;&lt;/div&gt;&lt;div class="page-snippet-code" data-v-5495d31a=""&gt;&lt;div class="language-js extra-class" data-v-5495d31a=""&gt;&lt;pre class="language-js" data-v-5495d31a=""&gt;&lt;code data-v-5495d31a=""&gt;&lt;span class="token keyword" data-v-5495d31a=""&gt;import&lt;/span&gt; Vue &lt;span class="token keyword" data-v-5495d31a=""&gt;from&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"vue"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;span class="token keyword" data-v-5495d31a=""&gt;import&lt;/span&gt; Vuex &lt;span class="token keyword" data-v-5495d31a=""&gt;from&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"vuex"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
Vue&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;use&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;Vuex&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;span class="token keyword" data-v-5495d31a=""&gt;const&lt;/span&gt; store &lt;span class="token operator" data-v-5495d31a=""&gt;=&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;new&lt;/span&gt; &lt;span class="token class-name" data-v-5495d31a=""&gt;Vuex&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;Store&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property" data-v-5495d31a=""&gt;state&lt;/span&gt;&lt;span class="token operator" data-v-5495d31a=""&gt;:&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;,&lt;/span&gt;
&lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;span class="token keyword" data-v-5495d31a=""&gt;export&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;default&lt;/span&gt; store&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="code-content" style=";" data-v-5495d31a=""&gt;&lt;iframe src="" frameborder="0" class="code-iframe" data-v-5495d31a=""/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 id="避免在同一元素上同时使用-v-if-与-v-for"&gt;&lt;a href="#避免在同一元素上同时使用-v-if-与-v-for" class="header-anchor"&gt;#&lt;/a&gt; 避免在同一元素上同时使用 v-if 与 v-for&lt;/h2&gt; &lt;p&gt;而 Vue3 中，v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合，由于语法上存在歧义，建议避免在同一元素上同时使用两者（&lt;a href="https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;）。&lt;/p&gt; &lt;h2 id="生命周期的适配"&gt;&lt;a href="#生命周期的适配" class="header-anchor"&gt;#&lt;/a&gt; 生命周期的适配&lt;/h2&gt; &lt;p&gt;在 Vue3 中组件卸载的生命周期被重新命名&lt;/p&gt; &lt;ul&gt;&lt;li&gt;&lt;code&gt;destroyed&lt;/code&gt; 修改为 &lt;code&gt;unmounted&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;beforeDestroy&lt;/code&gt; 修改为 &lt;code&gt;beforeUnmount&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt; &lt;div class="custom-block warning"&gt;&lt;p class="custom-block-title"&gt;created 和 onLoad 生命周期执行顺序&lt;/p&gt; &lt;p&gt;created为组件生命周期，onLoad为页面生命周期。因此created执行先于onLoad更合理。&lt;/p&gt; &lt;p&gt;Vue3 在实现时 created 先于 onLoad 执行；Vue2 项目由于历史包袱较重不便修改，仅在使用组合式API时与Vue3对齐。&lt;/p&gt; &lt;p&gt;在编写代码时不应依赖 created 和 onLoad 生命周期执行顺序&lt;/p&gt;&lt;/div&gt; &lt;h2 id="事件的适配"&gt;&lt;a href="#事件的适配" class="header-anchor"&gt;#&lt;/a&gt; 事件的适配&lt;/h2&gt; &lt;p&gt;Vue3 现在提供了一个&lt;code&gt;emits&lt;/code&gt;选项，类似于现有&lt;code&gt;props&lt;/code&gt;选项。此选项可用于定义组件可以向其父对象发出的事件， &lt;a href="https://v3.cn.vuejs.org/guide/migration/emits-option.html#overview" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;强烈建议使用&lt;code&gt;emits&lt;/code&gt;记录每个组件发出的所有事件。&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;这一点特别重要，因为去除了&lt;code&gt;.native&lt;/code&gt;修饰符。&lt;code&gt;emits&lt;/code&gt; 现在在未使用声明的事件的所有侦听器都将包含在组件的中&lt;code&gt;$attrs&lt;/code&gt;，默认情况下，该侦听器将绑定到组件的根节点。&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class="token attr-name"&gt;@click&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;onClick&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;OK&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token script"&gt;&lt;span class="token language-javascript"&gt;
  &lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;emits&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;&lt;span class="token string"&gt;"click"&lt;/span&gt;&lt;span class="token punctuation"&gt;]&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;methods&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
      &lt;span class="token function"&gt;onClick&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
        &lt;span class="token keyword"&gt;this&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;$emit&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"click"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token string"&gt;"OK"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="vue3-项目部分小程序端事件延迟或调用失败"&gt;&lt;a href="#vue3-项目部分小程序端事件延迟或调用失败" class="header-anchor"&gt;#&lt;/a&gt; Vue3 项目部分小程序端事件延迟或调用失败&lt;/h3&gt; &lt;p&gt;可在执行事件的元素上添加 &lt;code&gt;data-eventsync="true"&lt;/code&gt; 属性以解决此问题，如：&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class="token attr-name"&gt;@click&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;onClick&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name"&gt;data-eventsync&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;true&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;OK&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="v-model-的适配"&gt;&lt;a href="#v-model-的适配" class="header-anchor"&gt;#&lt;/a&gt; v-model 的适配&lt;/h2&gt; &lt;p&gt;Vue3 的 v-model 相对 Vue2 来说 ，有了较大的改变。可以使用多 &lt;code&gt;model&lt;/code&gt;,相应语法也有变化。&lt;a href="https://v3.cn.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A7%88" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;h3 id="修改-modelvalue"&gt;&lt;a href="#修改-modelvalue" class="header-anchor"&gt;#&lt;/a&gt; 修改 modelValue&lt;/h3&gt; &lt;p&gt;用于自定义组件时，Vue3 v-model prop 和事件默认名称已更改 &lt;code&gt;props.value&lt;/code&gt; 修改为 &lt;code&gt;props.modelValue&lt;/code&gt; ,&lt;code&gt;event.value&lt;/code&gt; 修改为 &lt;code&gt;update:modelValue&lt;/code&gt;&lt;/p&gt; &lt;div class="language-javascript extra-class"&gt;&lt;pre class="language-javascript"&gt;&lt;code&gt;&lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;props&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token comment"&gt;// value:String,&lt;/span&gt;
    &lt;span class="token comment"&gt;// 替换 value 为 modelValue&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;modelValue&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; String&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="事件返回"&gt;&lt;a href="#事件返回" class="header-anchor"&gt;#&lt;/a&gt; 事件返回&lt;/h2&gt; &lt;p&gt;将之前的 &lt;code&gt;this.$emit('input')&lt;/code&gt; 修改为 &lt;code&gt;this.$emit('update:modelValue')&lt;/code&gt; ，vue3 中将省略这一步骤&lt;/p&gt; &lt;p&gt;自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;ChildComponent&lt;/span&gt; &lt;span class="token attr-name"&gt;v-model&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token comment"&gt;&amp;lt;!-- 是以下的简写: --&amp;gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;ChildComponent&lt;/span&gt;
  &lt;span class="token attr-name"&gt;:modelValue&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token attr-name"&gt;&lt;span class="token namespace"&gt;@update:&lt;/span&gt;modelValue&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle = $event&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;若需要更改 model 名称，作为组件内 model 选项的替代，现在我们可以将一个 argument 传递给 v-model：&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;ChildComponent&lt;/span&gt; &lt;span class="token attr-name"&gt;&lt;span class="token namespace"&gt;v-model:&lt;/span&gt;title&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token comment"&gt;&amp;lt;!-- 是以下的简写: --&amp;gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;ChildComponent&lt;/span&gt; &lt;span class="token attr-name"&gt;:title&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name"&gt;&lt;span class="token namespace"&gt;@update:&lt;/span&gt;title&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;pageTitle = $event&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="插槽的适配"&gt;&lt;a href="#插槽的适配" class="header-anchor"&gt;#&lt;/a&gt; 插槽的适配&lt;/h2&gt; &lt;p&gt;Vue3 将不支持 &lt;code&gt;slot="xxx"&lt;/code&gt; 的用法 ，请使用 &lt;code&gt;v-slot:xxx&lt;/code&gt; 用法。&lt;a href="https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;div class="code" data-v-5495d31a=""&gt;&lt;div class="page-runtime" data-v-5495d31a=""&gt;&lt;div class="page-snippet" data-v-5495d31a=""&gt;&lt;div class="page-tabs" data-v-5495d31a=""&gt;&lt;div class="pages-tabs-header" data-v-5495d31a=""&gt;&lt;p class="pages-tabs-header-text pages-tabs--active" data-v-5495d31a=""&gt;Vue2&lt;/p&gt;&lt;p class="pages-tabs-header-text " data-v-5495d31a=""&gt;Vue3&lt;/p&gt;&lt;/div&gt;&lt;div class="page-snippet-code" data-v-5495d31a=""&gt;&lt;div class="language-html extra-class" data-v-5495d31a=""&gt;&lt;pre class="language-html" data-v-5495d31a=""&gt;&lt;code data-v-5495d31a=""&gt;&lt;span class="token comment" data-v-5495d31a=""&gt;&amp;lt;!--  Vue2 支持的用法 --&amp;gt;&lt;/span&gt;
&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;lt;&lt;/span&gt;uni-nav-bar&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;lt;&lt;/span&gt;view&lt;/span&gt; &lt;span class="token attr-name" data-v-5495d31a=""&gt;slot&lt;/span&gt;&lt;span class="token attr-value" data-v-5495d31a=""&gt;&lt;span class="token punctuation attr-equals" data-v-5495d31a=""&gt;=&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;"&lt;/span&gt;left&lt;span class="token punctuation" data-v-5495d31a=""&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" data-v-5495d31a=""&gt;class&lt;/span&gt;&lt;span class="token attr-value" data-v-5495d31a=""&gt;&lt;span class="token punctuation attr-equals" data-v-5495d31a=""&gt;=&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;"&lt;/span&gt;city&lt;span class="token punctuation" data-v-5495d31a=""&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token comment" data-v-5495d31a=""&gt;&amp;lt;!-- ... --&amp;gt;&lt;/span&gt;
  &lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;lt;/&lt;/span&gt;view&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token tag" data-v-5495d31a=""&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;lt;/&lt;/span&gt;uni-nav-bar&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="code-content" style=";" data-v-5495d31a=""&gt;&lt;iframe src="" frameborder="0" class="code-iframe" data-v-5495d31a=""/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 id="不再支持过滤器"&gt;&lt;a href="#不再支持过滤器" class="header-anchor"&gt;#&lt;/a&gt; 不再支持过滤器&lt;/h2&gt; &lt;p&gt;从 Vue 3.0 开始，过滤器已删除，不再支持，建议用方法调用或计算属性替换它们。&lt;a href="https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;h2 id="api-promise-化-调用结果的方式"&gt;&lt;a href="#api-promise-化-调用结果的方式" class="header-anchor"&gt;#&lt;/a&gt; API &lt;code&gt;Promise 化&lt;/code&gt; 调用结果的方式&lt;/h2&gt; &lt;p&gt;在 Vue3 中，处理 API &lt;code&gt;Promise 化&lt;/code&gt; 调用结果的方式不同于 Vue2。&lt;a href="https://uniapp.dcloud.io/api/#api-promise-%E5%8C%96" target="_blank" rel="noopener noreferrer"&gt;更多&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;ul&gt;&lt;li&gt;Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法&lt;/li&gt; &lt;li&gt;Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据&lt;/li&gt;&lt;/ul&gt; &lt;h3 id="转换方法"&gt;&lt;a href="#转换方法" class="header-anchor"&gt;#&lt;/a&gt; 转换方法&lt;/h3&gt; &lt;div class="code" data-v-5495d31a=""&gt;&lt;div class="page-runtime" data-v-5495d31a=""&gt;&lt;div class="page-snippet" data-v-5495d31a=""&gt;&lt;div class="page-tabs" data-v-5495d31a=""&gt;&lt;div class="pages-tabs-header" data-v-5495d31a=""&gt;&lt;p class="pages-tabs-header-text pages-tabs--active" data-v-5495d31a=""&gt;Vue2&lt;/p&gt;&lt;p class="pages-tabs-header-text " data-v-5495d31a=""&gt;Vue3&lt;/p&gt;&lt;/div&gt;&lt;div class="page-snippet-code" data-v-5495d31a=""&gt;&lt;div class="language-js extra-class" data-v-5495d31a=""&gt;&lt;pre class="language-js" data-v-5495d31a=""&gt;&lt;code data-v-5495d31a=""&gt;&lt;span class="token comment" data-v-5495d31a=""&gt;// Vue 2 转 Vue 3, 在 main.js 中写入以下代码即可&lt;/span&gt;
&lt;span class="token keyword" data-v-5495d31a=""&gt;function&lt;/span&gt; &lt;span class="token function" data-v-5495d31a=""&gt;isPromise&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token parameter" data-v-5495d31a=""&gt;obj&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
  &lt;span class="token keyword" data-v-5495d31a=""&gt;return&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;
    &lt;span class="token operator" data-v-5495d31a=""&gt;!&lt;/span&gt;&lt;span class="token operator" data-v-5495d31a=""&gt;!&lt;/span&gt;obj &lt;span class="token operator" data-v-5495d31a=""&gt;&amp;amp;&amp;amp;&lt;/span&gt;
    &lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token keyword" data-v-5495d31a=""&gt;typeof&lt;/span&gt; obj &lt;span class="token operator" data-v-5495d31a=""&gt;===&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"object"&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;||&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;typeof&lt;/span&gt; obj &lt;span class="token operator" data-v-5495d31a=""&gt;===&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"function"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;&amp;amp;&amp;amp;&lt;/span&gt;
    &lt;span class="token keyword" data-v-5495d31a=""&gt;typeof&lt;/span&gt; obj&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;then &lt;span class="token operator" data-v-5495d31a=""&gt;===&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"function"&lt;/span&gt;
uni&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;addInterceptor&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
  &lt;span class="token function" data-v-5495d31a=""&gt;returnValue&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token parameter" data-v-5495d31a=""&gt;res&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
    &lt;span class="token keyword" data-v-5495d31a=""&gt;if&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token operator" data-v-5495d31a=""&gt;!&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;isPromise&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;res&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
      &lt;span class="token keyword" data-v-5495d31a=""&gt;return&lt;/span&gt; res&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
    &lt;span class="token keyword" data-v-5495d31a=""&gt;return&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;new&lt;/span&gt; &lt;span class="token class-name" data-v-5495d31a=""&gt;Promise&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token parameter" data-v-5495d31a=""&gt;resolve&lt;span class="token punctuation" data-v-5495d31a=""&gt;,&lt;/span&gt; reject&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
      res&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;then&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token parameter" data-v-5495d31a=""&gt;res&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
        &lt;span class="token keyword" data-v-5495d31a=""&gt;if&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;res&lt;span class="token punctuation" data-v-5495d31a=""&gt;[&lt;/span&gt;&lt;span class="token number" data-v-5495d31a=""&gt;0&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;]&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
          &lt;span class="token function" data-v-5495d31a=""&gt;reject&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;res&lt;span class="token punctuation" data-v-5495d31a=""&gt;[&lt;/span&gt;&lt;span class="token number" data-v-5495d31a=""&gt;0&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;]&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
        &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;else&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
          &lt;span class="token function" data-v-5495d31a=""&gt;resolve&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;res&lt;span class="token punctuation" data-v-5495d31a=""&gt;[&lt;/span&gt;&lt;span class="token number" data-v-5495d31a=""&gt;1&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;]&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
      &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="code-content" style=";" data-v-5495d31a=""&gt;&lt;iframe src="" frameborder="0" class="code-iframe" data-v-5495d31a=""/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 id="生命周期钩子的组合式-api-使用方式"&gt;&lt;a href="#生命周期钩子的组合式-api-使用方式" class="header-anchor"&gt;#&lt;/a&gt; 生命周期钩子的组合式 API 使用方式&lt;/h2&gt; &lt;p&gt;在 Vue3 组合式 API 中，也需要遵循 uni-app 生命周期钩子规范, 如 onLaunch 等应用生命周期仅可在 App.vue 中监听，使用中请注意生命周期钩子的适用范围。&lt;a href="https://uniapp.dcloud.net.cn/collocation/frame/lifecycle" target="_blank" rel="noopener noreferrer"&gt;查看全部生命周期钩子&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;只能在 &lt;code&gt;&amp;lt;script setup&amp;gt;&lt;/code&gt; 单文件语法糖或 &lt;code&gt;setup()&lt;/code&gt; 方法中使用生命周期钩子，以 A 页面跳转 B 页面传递参数为例：&lt;/p&gt; &lt;div class="code" data-v-5495d31a=""&gt;&lt;div class="page-runtime" data-v-5495d31a=""&gt;&lt;div class="page-snippet" data-v-5495d31a=""&gt;&lt;div class="page-tabs" data-v-5495d31a=""&gt;&lt;div class="pages-tabs-header" data-v-5495d31a=""&gt;&lt;p class="pages-tabs-header-text pages-tabs--active" data-v-5495d31a=""&gt;方法一&lt;/p&gt;&lt;p class="pages-tabs-header-text " data-v-5495d31a=""&gt;方法二&lt;/p&gt;&lt;/div&gt;&lt;div class="page-snippet-code" data-v-5495d31a=""&gt;&lt;div class="language-js extra-class" data-v-5495d31a=""&gt;&lt;pre class="language-js" data-v-5495d31a=""&gt;&lt;code data-v-5495d31a=""&gt;&lt;span class="token comment" data-v-5495d31a=""&gt;// 从 A 页面跳转 B 页面时传递参数 ?id=1&amp;amp;name=uniapp，xxx 为跳转的页面路径&lt;/span&gt;
&lt;span class="token comment" data-v-5495d31a=""&gt;//uni.navigateTo({&lt;/span&gt;
&lt;span class="token comment" data-v-5495d31a=""&gt;//  url: 'xxx?id=1&amp;amp;name=uniapp'&lt;/span&gt;
&lt;span class="token comment" data-v-5495d31a=""&gt;// 方法一：在 B 页面 &amp;lt;script setup&amp;gt; 中&lt;/span&gt;
&lt;span class="token operator" data-v-5495d31a=""&gt;&amp;lt;&lt;/span&gt;script setup&lt;span class="token operator" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="token keyword" data-v-5495d31a=""&gt;import&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
    onLoad&lt;span class="token punctuation" data-v-5495d31a=""&gt;,&lt;/span&gt;
    onShow
  &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt; &lt;span class="token keyword" data-v-5495d31a=""&gt;from&lt;/span&gt; &lt;span class="token string" data-v-5495d31a=""&gt;"@dcloudio/uni-app"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
  &lt;span class="token comment" data-v-5495d31a=""&gt;// onLoad 接受 A 页面传递的参数&lt;/span&gt;
  &lt;span class="token function" data-v-5495d31a=""&gt;onLoad&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token parameter" data-v-5495d31a=""&gt;option&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;log&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token string" data-v-5495d31a=""&gt;"B 页面 onLoad:"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;,&lt;/span&gt; option&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt; &lt;span class="token comment" data-v-5495d31a=""&gt;//B 页面 onLoad: {id: '1', name: 'uniapp'}&lt;/span&gt;
  &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
  &lt;span class="token function" data-v-5495d31a=""&gt;onShow&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt; &lt;span class="token operator" data-v-5495d31a=""&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token punctuation" data-v-5495d31a=""&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" data-v-5495d31a=""&gt;.&lt;/span&gt;&lt;span class="token function" data-v-5495d31a=""&gt;log&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;(&lt;/span&gt;&lt;span class="token string" data-v-5495d31a=""&gt;"B 页面 onShow"&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" data-v-5495d31a=""&gt;}&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;)&lt;/span&gt;&lt;span class="token punctuation" data-v-5495d31a=""&gt;;&lt;/span&gt;
&lt;span class="token operator" data-v-5495d31a=""&gt;&amp;lt;&lt;/span&gt;&lt;span class="token operator" data-v-5495d31a=""&gt;/&lt;/span&gt;script&lt;span class="token operator" data-v-5495d31a=""&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="code-content" style=";" data-v-5495d31a=""&gt;&lt;iframe src="" frameborder="0" class="code-iframe" data-v-5495d31a=""/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 id="mp-调整为-scope"&gt;&lt;a href="#mp-调整为-scope" class="header-anchor"&gt;#&lt;/a&gt; &lt;code&gt;$mp&lt;/code&gt; 调整为 &lt;code&gt;$scope&lt;/code&gt;&lt;/h2&gt; &lt;p&gt;在 Vue3 中，this 对象下的 &lt;code&gt;$mp&lt;/code&gt; 调整为 &lt;code&gt;$scope&lt;/code&gt;&lt;/p&gt; &lt;h2 id="在-nvue-使用-vuex"&gt;&lt;a href="#在-nvue-使用-vuex" class="header-anchor"&gt;#&lt;/a&gt; 在 nvue 使用 Vuex&lt;/h2&gt; &lt;p&gt;在 Vue3 中，如果 nvue 使用了 Vuex 的相关 API，需要在 main.js 的 createApp 的返回值中 return 一下 Vuex 示例：&lt;/p&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token keyword"&gt;import&lt;/span&gt; Vuex &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"vuex"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;function&lt;/span&gt; &lt;span class="token function"&gt;createApp&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token keyword"&gt;const&lt;/span&gt; app &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;createSSRApp&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;App&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  app&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;use&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;store&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token keyword"&gt;return&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    app&lt;span class="token punctuation"&gt;,&lt;/span&gt;
    Vuex&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// 如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="需主动开启-sourcemap"&gt;&lt;a href="#需主动开启-sourcemap" class="header-anchor"&gt;#&lt;/a&gt; 需主动开启 sourcemap&lt;/h2&gt; &lt;p&gt;App，小程序端源码调试，需要在 vite.config.js 中主动开启 sourcemap&lt;/p&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token keyword"&gt;import&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; defineConfig &lt;span class="token punctuation"&gt;}&lt;/span&gt; &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"vite"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; uni &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;"@dcloudio/vite-plugin-uni"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
 * @type {import('vite').UserConfig}
&lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token function"&gt;defineConfig&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;build&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;sourcemap&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;true&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;plugins&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;&lt;span class="token function"&gt;uni&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;]&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="小程序平台"&gt;&lt;a href="#小程序平台" class="header-anchor"&gt;#&lt;/a&gt; 小程序平台&lt;/h2&gt; &lt;h3 id="监听原生的点击事件"&gt;&lt;a href="#监听原生的点击事件" class="header-anchor"&gt;#&lt;/a&gt; 监听原生的点击事件&lt;/h3&gt; &lt;p&gt;在 vue3 的小程序平台中，监听原生的点击事件可以先使用 tap。
在 vue3 中，移除了.native 修饰符，所以编译器无法预知 click 是要触发原生事件，还是组件的自定义事件，故并未转换成小程序的 tap 事件。&lt;/p&gt; &lt;h3 id="style"&gt;&lt;a href="#style" class="header-anchor"&gt;#&lt;/a&gt; style&lt;/h3&gt; &lt;p&gt;vue3 出于性能考虑，style 中暂不支持 div、p 等 HTML 标签选择器，推荐使用 class 选择器，&lt;a href="https://uniapp.dcloud.net.cn/vernacular.html#%E7%BB%84%E4%BB%B6-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%8F%98%E5%8C%96" target="_blank" rel="noopener noreferrer"&gt;template 中的 HTML 标签仍会进行转换&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;。&lt;/p&gt; &lt;h3 id="真机调试"&gt;&lt;a href="#真机调试" class="header-anchor"&gt;#&lt;/a&gt; 真机调试&lt;/h3&gt; &lt;ul&gt;&lt;li&gt;vue3 微信开发者工具真机调试页面空白，如&lt;a href="https://ask.dcloud.net.cn/question/162915" target="_blank" rel="noopener noreferrer"&gt;帖子&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;vue3 微信小程序真机调试，如&lt;a href="https://ask.dcloud.net.cn/question/173162" target="_blank" rel="noopener noreferrer"&gt;帖子&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;p&gt;均可以通过在 manifest.json 的 &lt;code&gt;mp-weixin&lt;/code&gt; 中配置 &lt;code&gt;minified&lt;/code&gt; 为 &lt;code&gt;true&lt;/code&gt; 来解决&lt;/p&gt; &lt;div class="language-json extra-class"&gt;&lt;pre class="language-json"&gt;&lt;code&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token property"&gt;"mp-weixin"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token property"&gt;"setting"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
      &lt;span class="token comment"&gt;// ...其他配置&lt;/span&gt;
      &lt;span class="token property"&gt;"minified"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="vue3-支持的手机版本最低到多少"&gt;&lt;a href="#vue3-支持的手机版本最低到多少" class="header-anchor"&gt;#&lt;/a&gt; vue3 支持的手机版本最低到多少？&lt;/h2&gt; &lt;blockquote&gt;&lt;p&gt;vue3 支持的范围是：Android &amp;gt; 4.4（具体因系统 webview 版本而异，原生安卓系统升级过系统 webview 一般 5.0 即可，国产安卓系统未使用 x5 内核时一般需 7.0 以上）, ios &amp;gt;= 10&lt;/p&gt;&lt;/blockquote&gt; &lt;blockquote&gt;&lt;p&gt;Android &amp;lt; 4.4，配置 X5 内核支持，首次需要联网下载，可以配置下载 X5 内核成功后启动应用，&lt;a href="https://uniapp.dcloud.net.cn/collocation/manifest.html#appwebview" target="_blank" rel="noopener noreferrer"&gt;详情&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/blockquote&gt; &lt;h2 id="vue3-nvue-暂不支持-recycle-list-组件"&gt;&lt;a href="#vue3-nvue-暂不支持-recycle-list-组件" class="header-anchor"&gt;#&lt;/a&gt; vue3 nvue 暂不支持 recycle-list 组件&lt;/h2&gt; &lt;p&gt;vue3 nvue 暂不支持 recycle-list 组件&lt;/p&gt; &lt;h2 id="h5-平台发行时-会默认启动摇树"&gt;&lt;a href="#h5-平台发行时-会默认启动摇树" class="header-anchor"&gt;#&lt;/a&gt; h5 平台发行时，会默认启动摇树&lt;/h2&gt; &lt;p&gt;vue3 在 h5 平台发行时，为了优化包体积大小，会默认启动摇树，仅打包明确使用的 api，
如果要关闭摇树，可以在 manifest.json 中配置：&lt;/p&gt; &lt;div class="language-json extra-class"&gt;&lt;pre class="language-json"&gt;&lt;code&gt;&lt;span class="token property"&gt;"h5"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token property"&gt;"optimization"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
        &lt;span class="token property"&gt;"treeShaking"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
            &lt;span class="token property"&gt;"enable"&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="url-search-params"&gt;&lt;a href="#url-search-params" class="header-anchor"&gt;#&lt;/a&gt; 通过 props 来获取页面参数&lt;/h2&gt; &lt;p&gt;vue3 全平台新增：通过 props 来获取页面参数的使用方式&lt;/p&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class="token attr-name"&gt;setup&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token script"&gt;&lt;span class="token language-javascript"&gt;
  &lt;span class="token comment"&gt;// 页面可以通过定义 props 来直接接收 url 传入的参数&lt;/span&gt;
  &lt;span class="token comment"&gt;// 如：uni.navigateTo({ url: '/pages/index/index?id=10' })&lt;/span&gt;
  &lt;span class="token keyword"&gt;const&lt;/span&gt; props &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;defineProps&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;id&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; String&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  console&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;log&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"id="&lt;/span&gt; &lt;span class="token operator"&gt;+&lt;/span&gt; props&lt;span class="token punctuation"&gt;.&lt;/span&gt;id&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt; &lt;span class="token comment"&gt;// id=10&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;div class="language-html extra-class"&gt;&lt;pre class="language-html"&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token script"&gt;&lt;span class="token language-javascript"&gt;
  &lt;span class="token comment"&gt;// 页面可以通过定义 props 来直接接收 url 传入的参数&lt;/span&gt;
  &lt;span class="token comment"&gt;// 如：uni.navigateTo({ url: '/pages/index/index?id=10' })&lt;/span&gt;
  &lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;props&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
      &lt;span class="token literal-property property"&gt;id&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
        &lt;span class="token literal-property property"&gt;type&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; String&lt;span class="token punctuation"&gt;,&lt;/span&gt;
    &lt;span class="token function"&gt;setup&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token parameter"&gt;props&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
      console&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;log&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"id="&lt;/span&gt; &lt;span class="token operator"&gt;+&lt;/span&gt; props&lt;span class="token punctuation"&gt;.&lt;/span&gt;id&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt; &lt;span class="token comment"&gt;// id=10&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="vue-i18n"&gt;&lt;a href="#vue-i18n" class="header-anchor"&gt;#&lt;/a&gt; 小程序和App端不支持插值方式定义国际化&lt;/h2&gt; &lt;p&gt;因运行平台限制，目前在小程序和 App 端不支持插值方式定义国际化,需要使用 Messages Functions 定义国际化信息，&lt;a href="https://vue-i18n.intlify.dev/guide/advanced/function.html" target="_blank" rel="noopener noreferrer"&gt;参考文档&lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;示例：&lt;/p&gt; &lt;div class="language-js extra-class"&gt;&lt;pre class="language-js"&gt;&lt;code&gt;&lt;span class="token keyword"&gt;const&lt;/span&gt; messages &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;en&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token function-variable function"&gt;greeting&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token parameter"&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt; named &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token operator"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token template-string"&gt;&lt;span class="token template-punctuation string"&gt;`&lt;/span&gt;&lt;span class="token string"&gt;hello, &lt;/span&gt;&lt;span class="token interpolation"&gt;&lt;span class="token interpolation-punctuation punctuation"&gt;${&lt;/span&gt;&lt;span class="token function"&gt;named&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;'name'&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token interpolation-punctuation punctuation"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string"&gt;!&lt;/span&gt;&lt;span class="token template-punctuation string"&gt;`&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt; &lt;footer class="page-edit"&gt;&lt;div class="edit-link"&gt;&lt;a href="https://gitcode.net/dcloud/unidocs-zh/edit/master/docs/tutorial/migration-to-vue3.md" target="_blank" rel="noopener noreferrer"&gt;帮助我们改善此页面！&lt;/a&gt; &lt;span&gt;&lt;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"&gt;&lt;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"/&gt; &lt;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"/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="last-updated"&gt;&lt;span class="prefix"&gt;上次更新:&lt;/span&gt; &lt;span class="time"&gt;2023/7/10 15:13:04&lt;/span&gt;&lt;/div&gt;&lt;/footer&gt; &lt;!----&gt;  &lt;div id="footNavBox" data-v-07435f30=""&gt;&lt;div class="footNav" data-v-07435f30=""&gt;&lt;div id="footNavClassify" data-v-07435f30=""&gt;&lt;div class="footNavItem" data-v-07435f30=""&gt;&lt;div class="navItemTitle" data-v-07435f30=""&gt;开发产品&lt;/div&gt;&lt;div class="navLine" data-v-07435f30=""/&gt;&lt;div class="navItemDetailBox" data-v-07435f30=""&gt;&lt;a target="_blank" href="https://www.dcloud.io/hbuilderx.html" class="navItemDetail" data-v-07435f30=""&gt;HBuilderX&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;uni-app&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/README" class="navItemDetail" data-v-07435f30=""&gt;uniCloud&lt;/a&gt;&lt;a target="_blank" href="https://nativesupport.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;uniMPsdk&lt;/a&gt;&lt;a target="_blank" href="https://www.dcloud.io/runtime.html" class="navItemDetail" data-v-07435f30=""&gt;5+Runtime&lt;/a&gt;&lt;a target="_blank" href="https://www.dcloud.io/wap2app.html?platform=wap2app" class="navItemDetail" data-v-07435f30=""&gt;wap2app&lt;/a&gt;&lt;a target="_blank" href="https://www.dcloud.io/mui.html" class="navItemDetail" data-v-07435f30=""&gt;MUI&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/uni-id" class="navItemDetail" data-v-07435f30=""&gt;uni-id&lt;/a&gt;&lt;a target="_blank" href="https://ext.dcloud.net.cn/plugin?id=3851" class="navItemDetail" data-v-07435f30=""&gt;uni-search&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/unipay" class="navItemDetail" data-v-07435f30=""&gt;uniPay&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/unipush" class="navItemDetail" data-v-07435f30=""&gt;uniPush&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.io/univerify" class="navItemDetail" data-v-07435f30=""&gt;uni-verify&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/frv/intro.html" class="navItemDetail" data-v-07435f30=""&gt;uni实人认证&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/send-sms" class="navItemDetail" data-v-07435f30=""&gt;sms&lt;/a&gt;&lt;a target="_blank" href="https://ext.dcloud.net.cn/plugin?id=5057" class="navItemDetail" data-v-07435f30=""&gt;uni-starter&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/admin" class="navItemDetail" data-v-07435f30=""&gt;uni-admin&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.io/uniCloud/upgrade-center" class="navItemDetail" data-v-07435f30=""&gt;uni-upgrade-center&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/uni-im" class="navItemDetail" data-v-07435f30=""&gt;uni-im&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/uni-ai" class="navItemDetail" data-v-07435f30=""&gt;uni-ai&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/uni-cms" class="navItemDetail" data-v-07435f30=""&gt;uni-cms&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;div id="aboutusBox" data-v-07435f30=""&gt;&lt;div class="footNavItem" data-v-07435f30=""&gt;&lt;div class="navItemTitle" data-v-07435f30=""&gt;运营产品&lt;/div&gt;&lt;div class="navLine" data-v-07435f30=""/&gt;&lt;div class="navItemDetailBox" data-v-07435f30=""&gt;&lt;a target="_blank" href="https://uniad.dcloud.net.cn/login" class="navItemDetail" data-v-07435f30=""&gt;uni-AD&lt;/a&gt;&lt;a target="_blank" href="https://tongji.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;uni统计&lt;/a&gt;&lt;a target="_blank" href="https://www.dcloud.io/dportal.html" class="navItemDetail" data-v-07435f30=""&gt;uni发行&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.net.cn/tutorial/safe.html" class="navItemDetail" data-v-07435f30=""&gt;uni安全专题&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="footNavItem" data-v-07435f30=""&gt;&lt;div class="navItemTitle" data-v-07435f30=""&gt;开发者服务&lt;/div&gt;&lt;div class="navLine" data-v-07435f30=""/&gt;&lt;div class="navItemDetailBox" data-v-07435f30=""&gt;&lt;a target="_blank" href="https://ask.dcloud.net.cn/explore/" class="navItemDetail" data-v-07435f30=""&gt;问答社区&lt;/a&gt;&lt;a target="_blank" href="https://dev.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;开发者后台&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="footNavItem" data-v-07435f30=""&gt;&lt;div class="navItemTitle" data-v-07435f30=""&gt;技术文档&lt;/div&gt;&lt;div class="navLine" data-v-07435f30=""/&gt;&lt;div class="navItemDetailBox" data-v-07435f30=""&gt;&lt;a target="_blank" href="https://uniapp.dcloud.io/" class="navItemDetail" data-v-07435f30=""&gt;uni-app文档&lt;/a&gt;&lt;a target="_blank" href="https://uniapp.dcloud.io/uniCloud/README" class="navItemDetail" data-v-07435f30=""&gt;uniCloud文档&lt;/a&gt;&lt;a target="_blank" href="https://nativesupport.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;原生开发者支持文档&lt;/a&gt;&lt;a target="_blank" href="https://hx.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;HBuilder文档&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="footNavItem" data-v-07435f30=""&gt;&lt;div class="navItemTitle" data-v-07435f30=""&gt;生态服务&lt;/div&gt;&lt;div class="navLine" data-v-07435f30=""/&gt;&lt;div class="navItemDetailBox" data-v-07435f30=""&gt;&lt;a target="_blank" href="https://ext.dcloud.net.cn/" class="navItemDetail" data-v-07435f30=""&gt;插件市场&lt;/a&gt;&lt;a target="_blank" href="https://open.dcloud.net.cn/pages/login/login" class="navItemDetail" data-v-07435f30=""&gt;OAuth用户开放平台&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="hbLogo" data-v-07435f30=""/&gt; &lt;div class="introduce" data-v-07435f30=""&gt;&lt;div class="introduce-item" data-v-07435f30=""&gt;&lt;span class="introduce-title" data-v-07435f30=""&gt;关于我们：&lt;/span&gt; &lt;a href="https://dcloud.io/" target="_blank" class="navItemDetail" data-v-07435f30=""&gt;
						DCloud官网
					&lt;/a&gt;&lt;/div&gt;&lt;div class="introduce-item" data-v-07435f30=""&gt;&lt;span class="introduce-title" data-v-07435f30=""&gt;联系我们：&lt;/span&gt; &lt;a href="mailto:bd@dcloud.io" target="_blank" class="navItemDetail" data-v-07435f30=""&gt;
						商务合作：bd@dcloud.io
						广告合作：uniad@dcloud.io
					&lt;/a&gt;&lt;/div&gt;&lt;/div&gt; &lt;div data-v-07435f30=""&gt;&lt;div class="companyBox" data-v-07435f30=""&gt;&lt;span class="companyInfo" data-v-07435f30=""&gt;&lt;span class="companyInfo-dcloud" data-v-07435f30=""&gt;DCloud.io&lt;/span&gt; 数字天堂（北京）网络技术有限公司是&lt;/span&gt; &lt;div class="companyInfo" style="display: inline; margin-left: 5px" data-v-07435f30=""&gt;&lt;a href="//www.w3.org/" target="_blank" class="w3c" data-v-07435f30=""&gt;W3C&lt;/a&gt;
				&lt;a href="//www.html5plus.org/" target="_blank" class="html5" data-v-07435f30=""&gt;HTML5中国产业联盟&lt;/a&gt;
			&lt;/a&gt; &lt;div class="domainImgBox" data-v-07435f30=""&gt;&lt;img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/jgwab.png" class="domainImg" data-v-07435f30=""/&gt; &lt;a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802035340" target="_blank" class="beian" data-v-07435f30=""&gt;京公网安备：11010802035340号&lt;/a&gt;&lt;/div&gt; &lt;span class="anbaoInfo" data-v-07435f30=""&gt;国家信息安全等级保护三级，证书编号：11010813802-20001&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/main&gt; &lt;div class="sticker vuepress-toc"&gt;&lt;h5&gt;本页导读&lt;/h5&gt; &lt;div class="vuepress-toc-item vuepress-toc-h2 active"&gt;&lt;a href="#main-js" title="main.js" style="padding-left:0rem;"&gt;
			main.js
			项目根目录必需创建 index.html 文件
			只支持使用 ES6 模块规范
			vuex 用法
			避免在同一元素上同时使用 v-if 与 v-for
			生命周期的适配
			事件的适配
			Vue3 项目部分小程序端事件延迟或调用失败
			v-model 的适配
			修改 modelValue
			插槽的适配
			不再支持过滤器
			API Promise 化 调用结果的方式
			生命周期钩子的组合式 API 使用方式
			$mp 调整为 $scope
			在 nvue 使用 Vuex
			需主动开启 sourcemap
			小程序平台
			监听原生的点击事件
			style
			vue3 支持的手机版本最低到多少？
			vue3 nvue 暂不支持 recycle-list 组件
			h5 平台发行时，会默认启动摇树
			通过 props 来获取页面参数
        
       