ホームページ >ウェブフロントエンド >Vue.js >vue3 での setup() 関数と reactive() 関数の使用の簡単な分析
vue3 での setup() 関数と reactive() 関数の使用の簡単な分析
- 青灯夜游転載
- 2023-04-17 18:21:292066ブラウズ
この記事では、結合 API の基本概念、setup() エントリ関数の概念、および vue3 プロジェクトでの reactive() の使用方法について説明します。
#1. 結合 API 比較 vue2 プロジェクト構造
- 1. 利点: 学習と使用が簡単で、コードを記述する場所が合意されています。
- 2. 欠点: 大規模なプロジェクトの場合、コードの再利用、管理、メンテナンスが難しくなります。
- 3. 説明: 同じ関数のデータとビジネス ロジックが同じファイル内の N か所に分散されており、ビジネスの複雑さが増すにつれて、データに類似したデータを頻繁に使用する必要があります。 () そしてメソッドでの前後の処理
- 1. 利点: 同じ機能のデータとビジネス ロジックをまとめて整理できるため、再利用とメンテナンスが容易になります。
- 2. 欠点: 適切なコード構成と分割機能が必要であり、Vue2 ほど簡単に始めることはできません。
- 3. 説明: 注: 誰もが Vue3.0 バージョンにより適切に移行できるようにするために、現在、Vue2.x オプション API の記述方法がサポートされています。
2. setup() 関数の使用
##2.1 setup() 関数の基本概念Vue3 の setup() は、Vue3 の新しいコンポーネント構成項目であり、 Vue2 )、computed()、およびその他の構成項目。 setup() はより簡潔な記述方法を提供し、Vue3 が提供する Comboposition API をより適切に活用できます。 setup() 関数は、props と context という 2 つのパラメータを受け入れます。このうち、propsはコンポーネントが受け取るプロパティ値であり、contextにはコンポーネントの何らかの構成情報が含まれます。
1. 概要: setup は Vue3 の新しいコンポーネント設定項目であり、組み合わせ API のエントリ関数として機能します。- 2. 実行タイミング: インスタンスの作成前 (Vue2 の beforeCreate よりもさらに前) に呼び出されます。
- 3. 注: セットアップ実行時にインスタンスが作成されていないため、data およびメソッド内のデータをセットアップで直接使用することはできません。そのため、Vue3 セットアップのこれもバインドされています。未定義。
- Vue2 のデータとメソッドの設定項目は Vue3 でも使用できますが、推奨されません。データとメソッドを setup 関数に記述して渡すことを推奨します return 戻るには、テンプレート内で直接
2.2.setup() 初めての体験App.vue<template>
<h1 @click="say()">{{ msg }}</h1>
</template>
<script>
export default {
setup() {
const msg = 'Hello Vue3'
const say = () => {
console.log(msg)
}
return { msg, say }
},
}
</script>
エフェクト ビュー:
注: vue2 の data() およびメソッドと同様に、これらは結果として呼び出す前に、戻り値として書き込む必要があります。 
<script>
import { h } from 'vue'
export default {
name: 'App',
setup() {
return () => h('h2', 'Hello Vue3')
},
}
</script>コンソールは h2 タグを含む Hello Vue3 を出力します。
2.3.reactive() 関数 reactive 関数を使用して、配列を応答性の高いデータにラップします。 reactive は、通常のオブジェクト/配列を reactive データにラップして使用するために使用される関数ですが、基本的なデータ型を直接処理することはできません (Proxy に基づいており、Proxy はオブジェクトをプロキシすることしかできないため)。
たとえば、「クリックして現在の行情報を削除する」という要件がある場合、
App.vueこの時点で、reactive() を使用して配列をラップし、応答性の高いデータにします。インポートすることを忘れないでください<template> <ul> <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li> </ul> </template> <script> export default { name: 'App', setup() { const arr = ['a', 'b', 'c'] const removeItem = (index) => { arr.splice(index, 1) } return { arr, removeItem, } }, } </script>
vueTools で表示すると、データはその後削除されます。クリックします。しかし、ページ上には実際のレンダリングはありません。
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const arr = reactive(['a', 'b', 'c'])
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem,
}
},
}
</script>
現在、ページは応答性があり、クリックされると削除され、ページも応答性になります
同様に、reactive() を使用してオブジェクトをラップして使用します
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<input type="submit" />
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
// 默认是递归监听的，对象里面任何一个数据的变化都是响应式的
state.arr.splice(index, 1)
}
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>
上記のコードの解釈:
v-model を通じて入力ボックスとイベントの削除と追加の操作を定義しました双方向バインディング データを押して、データの追加と削除を完了します。
これで、setup() の使用法がより明確に理解できましたか?以下に書き方を簡略化してみましょう。
2.3.1 reactive() のさらなる抽出最適化: 同じ関数のデータとビジネス ロジックを 1 つの関数、コードに抽出します。読みやすく、再利用しやすくなります。 <template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<input type="submit" />
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
function useRemoveItem() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
state.arr.splice(index, 1)
}
return { state, removeItem }
}
function useAddItem(state) {
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
user,
handleSubmit,
}
}
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, handleSubmit } = useAddItem(state)
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>
将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。
2.3.2reactive()再进行进一步文件拆分并且引入
App.vue
<template>
<form >
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<button type="submit" @click.prevent="submit">提交</button>
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import {useRemoveItem,handleSubmit} from './hooks'
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, submit } = handleSubmit(state)
return {
state,removeItem,user,submit
}
},
}
</script>hooks/index.js
import { reactive } from 'vue'
export const useRemoveItem=()=> {
const state= reactive( {
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
]
})
const removeItem=(index)=>{
state.arr.splice(index,1)
console.log(state.arr);
}
return { state, removeItem }
}
export const handleSubmit=(state)=>{
const user = reactive({
id: '',
name: '',
})
console.log(1);
const submit = () => {
state.arr.push({
...user
})
user.id = ''
user.name = ''
}
return { user, submit }
}以上がvue3 での setup() 関数と reactive() 関数の使用の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。