Vue3のスクリプトセットアップ構文シュガーの詳細な説明

#スクリプト セットアップ構文シュガー

結合 API: setup()

基本的な使い方

Vue 3 の複合 API シリーズでは、新しい

setup 関数が導入されました。これはコンポーネント オプションであり、コンポーネントを作成する前に実行されます。 . プロパティが解析されると、合成された API へのエントリ ポイントとして機能します。 [学習ビデオ共有: vue ビデオ チュートリアル、Web フロントエンド ビデオ]

setup オプションは受信 props## です# 関数と context 関数については、ドキュメントを参照して説明します。さらに、setup によって返されるすべてのものを、コンポーネントのテンプレートだけでなくコンポーネントの残りの部分 (計算されたプロパティ、メソッド、ライフサイクル フックなど) に公開します。 <pre class='brush:php;toolbar:false;'>&lt;script&gt; // 这是一个基于 TypeScript 的 Vue 组件 import { defineComponent } from &amp;#39;vue&amp;#39; export default defineComponent({ setup(props, context) { // 在这里声明数据，或者编写函数并在这里执行它 return { // 需要给 `&lt;template /&gt;` 用的数据或函数，在这里 `return` 出去 } }, }) &lt;/script&gt;</pre>新しい

setup

オプションは、コンポーネントが作成される前に、props が解析された後に実行され、結合 API への入り口となります。 。 注:

setup

で

this
を使用するとコンポーネント インスタンスが見つからないため、使用しないでください。 setup への呼び出しは、data プロパティ、computed プロパティ、または methods が解析される前に行われるため、## では使用できません。 #setup を取得しました。 setup を追加したスクリプト タグでは、 メソッドを宣言する必要はありません。この記述方法により、すべてのトップレベルの変数と関数が自動的にテンプレートに公開されます ( template ) ここで

を使用して、「

テンプレートに公開することは、外部に公開することと同じではありません

」という文を強調します。
ヒント: 氏の発言 より簡単に言うと、Vue 3 ライフサイクルを使用すると、コンポーネント関連のビジネス コード全体が

setup

で実行できます。

他のライフ サイクルは setup 後に有効になるため、Vue2

コンポーネント ライフ サイクル##の Vue3 ライフ サイクルの変更を比較してみましょう。 #Vue ライフ サイクルの変更については、次の表から直感的に理解できます。

Vue 2 ライフ サイクル

Vue 3ライフサイクル実行時間の説明setupコンポーネント作成前の実行コンポーネントの作成後に実行##beforeMountonBeforeMountコンポーネントがノードにマウントされる前に実行されます#onMounted#beforeUpdateonBeforeUpdateコンポーネントの更新前に実行onUpdatedonBeforeUnmountonUnmountedonErrorCaptured

		beforeCreate
	created	setup
##mounted	##コンポーネントがマウントされた後に実行されます
		#updated
コンポーネントの更新 完了後に実行		beforeDestroy
コンポーネントのアンインストール前に実行		destroyed
コンポーネントのアンマウントが完了した後に実行されます		errorCaptured
から例外をキャッチしたときにアクティブ化されます。子孫コンポーネントのフック関数		可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。 script setup 语法糖 它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。 自动注册属性和方法无需返回，直接使用 1.<script setup></script> 语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。 2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。 你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！ 使用方式也很简单，只需要在 script 标签加上 setup 关键字即可 <script setup> </script> 组件核心 API 的使用 组件自动注册 在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。 示例： <template> <Child /> </template> <script setup> import Child from &#39;@/components/Child.vue&#39; </script> 定义组件的 props defineProps ----> [用来接收父组件传来的 props] 代码示列： 通过defineProps指定当前 props 类型，获得上下文的props对象。 示例： <script setup> import { defineProps } from &#39;vue&#39; const props = defineProps({ title: String, }) </script> <!-- 或者 --> <script setup> import { ref,defineProps } from &#39;vue&#39;; type Props={ msg:string } defineProps<Props>(); </script> 定义 emit defineEmit ----> [子组件向父组件事件传递] 使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。  代码示列： <script setup> import { defineEmits } from &#39;vue&#39; const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;]) </script> 父子组件通信 defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。 //父组件 <template> <Child @getChild="getChild" :title="msg" /> </template> <script setup> import { ref } from &#39;vue&#39; import Child from &#39;@/components/Child.vue&#39; const msg = ref(&#39;parent value&#39;) const getChild = (e) => { // 接收父组件传递过来的数据 console.log(e); // child value } </script> //子组件 <template> <div @click="toEmits">Child Components</div> </template> <script setup> // defineEmits,defineProps无需导入，直接使用 const emits = defineEmits([&#39;getChild&#39;]); const props = defineProps({ title: { type: String, defaule: &#39;defaule title&#39; } }); const toEmits = () => { emits(&#39;getChild&#39;, &#39;child value&#39;) // 向父组件传递数据 } // 获取父组件传递过来的数据 console.log(props.title); // parent value </script> 子组件通过 defineProps 接收父组件传过来的数据，子组件通过 defineEmits 定义事件发送信息给父组件 useSlots() 和 useAttrs() 获取 slots 和 attrs 注：useContext API 被弃用，取而代之的是更加细分的 api。 可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。 useAttrs：见名知意，这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 class、属性、方法。 <template> <component v-bind=&#39;attrs&#39;></component> </template> <srcipt setup> const attrs = useAttrs(); <script> useSlots: 顾名思义，获取插槽数据。 使用示例： // 旧 <script setup> import { useContext } from &#39;vue&#39; const { slots, attrs } = useContext() </script> // 新 <script setup> import { useAttrs, useSlots } from &#39;vue&#39; const attrs = useAttrs() const slots = useSlots() </script> defineExpose API defineExpose ----> [组件暴露出自己的属性] 传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。 <script setup></script> 的组件默认不会对外部暴露任何内部声明的属性。 如果有部分属性要暴露出去，可以使用 defineExpose 注意：目前发现defineExpose暴露出去的属性以及方法都是 unknown 类型，如果有修正类型的方法，欢迎评论区补充。 如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例： //子组件 <template> {{msg}} </template> <script setup> import { ref } from &#39;vue&#39; let msg = ref("Child Components"); let num = ref(123); // defineExpose无需导入，直接使用 defineExpose({ msg, num }); </script> //父组件 <template> <Child ref="child" /> </template> <script setup> import { ref, onMounted } from &#39;vue&#39; import Child from &#39;@/components/Child.vue&#39; let child = ref(null); onMounted(() => { console.log(child.value.msg); // Child Components console.log(child.value.num); // 123 }) </script> 定义响应变量、函数、监听、计算属性computed <script setup > import { ref,computed,watchEffect } from &#39;vue&#39;; const count = ref(0); //不用 return ，直接在 templete 中使用 const addCount=()=>{ //定义函数，使用同上 count.value++; } //创建一个只读的计算属性 ref： const plusOne = computed(() => count.value + 1) // 创建一个可写的计算属性 ref const plusOne = computed({ get: () => count.value + 1, set: (val) => { count.value = val - 1 } }) //定义监听，使用同上 //...some code else watchEffect(()=>console.log(count.value)); </script> watchEffect和watch区别 1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行） 2、watch需要传递监听的对象，watchEffect不需要 3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下 4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。 reactive 返回一个对象的响应式代理。 <script setup> import { reactive, onUnmounted } from &#39;vue&#39; const state = reactive({ counter: 0 }) // 定时器 每秒都会更新数据 const timer = setInterval(() => { state.counter++ }, 1000); onUnmounted(() => { clearInterval(timer); }) </script> <template> <div>{{state.counter}}</div> </template> 使用ref也能达到我们预期的'counter',并且在模板中,vue进行了处理，我们可以直接使用counter而不用写counter.value. ref和reactive的关系: ref是一个{value:'xxxx'}的结构，value是一个reactive对象 ref 暴露变量到模板 曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明： export const count = ref(0) 不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量 <script setup > import { ref } from &#39;vue&#39; const counter = ref(0);//不用 return ，直接在 templete 中使用 const timer = setInterval(() => { counter.value++ }, 1000) onUnmounted(() => { clearInterval(timer); }) </script> <template> <div>{{counter}}</div> </template> 其他 Hook Api useCSSModule：CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少，不过多做介绍。 useCssVars: 此 api 暂时资料比较少。介绍v-bind in styles时提到过。 useTransitionState: 此 api 暂时资料比较少。 useSSRContext: 此 api 暂时资料比较少。 支持 async await 异步 注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用. <script setup> const post = await fetch(`/api/post/1`).then((r) => r.json()) </script> <script setup></script> 中可以使用顶层 await。结果代码会被编译成 async setup()： <script setup> const post = await fetch(`/api/post/1`).then(r => r.json()) </script> 另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。 注意 async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。 定义组件其他配置 配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个 script，在上方写入对应的 export即可，需要单开一个 script。 <script setup></script> 可以和普通的 <script></script> 一起使用。普通的 <script></script> 在有这些需要的情况下或许会被使用到： 无法在 <script setup></script> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。 声明命名导出。 运行副作用或者创建只需要执行一次的对象。 在script setup 外使用export default，其内容会被处理后放入原组件声明字段。 <script> // 普通 `<script>`, 在模块范围下执行(只执行一次) runSideEffectOnce() // 声明额外的选项 export default { name: "MyComponent", inheritAttrs: false, customOptions: {} } </script> <script setup> import HelloWorld from &#39;../components/HelloWorld.vue&#39; // 在 setup() 作用域中执行 (对每个实例皆如此) // your code </script> <template> <div> <HelloWorld msg="Vue3 + TypeScript + Vite"/> </div> </template> 注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 <keep-alive></keep-alive> 包含或排除或直接检查组件的选项时，你需要这个名字。 （學習影片分享：web前端開發、程式設計基礎影片）

以上がVue3のスクリプトセットアップ構文シュガーの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。