vue3を学ぶには基礎から学んでいきます。setup関数、ref、rectative、watch、computed、piniaなどの使い方を理解する。
今日は vue3 の組み合わせ API、computed、watch について話します。
vue3 でも、computed と watch は、応答性の高いデータの変更や副作用に対処するのに役立つ非常に便利な機能です。
計算された：
注意すべき点:
1. データの計算と導出に使用し、その戻り値が応答性の高いアプリケーションであることを確認する必要があります。 2.
computed は同期的に評価されるため、computed での非同期操作は避けてください。
3. Computed は変更に従って評価されます。依存関係にあるキャッシュ、依存関係が変更された場合にのみ再計算されます
4. Computed には副作用があってはなりません。主な機能は計算を行うことです。DOM の変更などの非同期リクエストを行う場合、それは副作用です。 5.
デフォルトの computed の値を直接変更しないでください。 計算された値は読み取り専用です。
利点:
1. コードが簡素化され、テンプレート領域に複雑な計算ロジックを記述する必要がなくなります。
2. 応答性が高く、依存関係の変更に応じて最新の計算結果が自動的に更新され、ビューとデータの同期が維持されます。
欠点:
1. 依存関係が多すぎる 計算された依存関係が多すぎる、または複雑な場合、大きな計算オーバーヘッドが発生し、パフォーマンスに影響を与える可能性があります。
使用方法:
1. 計算された関数をインポートします
。 2. 関数を実行し、コールバック パラメーター内の応答データに基づいて計算された値を返し、変数を使用してそれを受け取ります。
<script setup>
import {
ref,computed} from 'vue'
const list = ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{
return list.value.filter(item=>item>2)
//验证computed计算的数组变化时是否会重新计算
setTimeout(()=>{
list.value.push(9,10)
},3000)
})
</script>
<template>
<div >
原始响应数据-{
{
list}}
</div>
<div >
计算属性数组-{
{
computedList }}
</div>
</template>
3 秒後に再計算され、依存関係の変更に応じて最新の計算結果が自動的に更新されます。
時計：
注意点:
1. Watch は主に、特定のデータ変更を監視し、副作用操作を実行するために使用されます (例: 非同期リクエストの開始、DOM の変更)
2. watch の return 関数を使用して、データの監視をキャンセルできます
。利点:
1. 高い柔軟性、watch は複数のデータ変更を監視でき、非同期操作を実行でき、より多くのカスタム処理を実行できます。 2.
複雑なシナリオに適応: wacth は、データ変更によって引き起こされる副作用に対処するのに適しています。データ取得後の操作
欠点:
1. コードがより複雑です。計算コードと比較して、監視コードはより複雑で、読み取りと保守が難しい場合があります
:
1. 監視関数をインポートします
。 2. 監視関数を実行して、応答データを渡します。 (ref オブジェクト) と監視対象のコールバック関数
例:
//単一データ ソースの変更を監視するには watch を呼び出します
<script setup>
//导入watch
import {
ref,watch} form 'vue'
const count = ref(0)
const setCount = ()=>{
count.value++
}
//ref对象不需要加.value,内部已经处理
watch(count,(newVal,oldVal)=>{
console.log('老值${oldVal},新值${newVal}')
})
</script>
//複数のデータ ソースの変更を監視するには watch を呼び出します。どのデータが変更されたとしても、コールバックを実行する必要があります
<script setup>
//导入watch
import {
ref,watch} form 'vue'
const count = ref(0)
const name = ref('zs')
//用数组的方式将所有要监听的数据都放进来
//回调函数中第一个数组为新值，第二个数组为旧值
watch([count,name],([newCount,newName],[oldCount,oldName])=>{
console.log('老值[oldCount,oldName],新值[newCount,newName]')
})
</script>
Watch はオブジェクトの特定の属性を正確に監視しますが、
deep がオンになった後は再帰的走査が実行されるため、パフォーマンスが低下します。deepを有効にしない前提で、オブジェクトの特定のプロパティを監視し、特定のプロパティが変化した場合にのみコールバックを実行する 監視を2つのコールバック関数に記述する方法は以下の通りです
。
import {
ref,watch} from 'vue'
cosnt info = ref({
name:'zs',
age:'18'
})
watch(
()=>info.value.age,
(newVal,oldVal)=>{
'在此执行属性age相关的代码操作'}
)
ps:
ref() 関数、入力が単純型データの場合
import {
ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出 0
count.value = 1; // 修改包装后的值
console.log(count.value); // 输出 1
ref() 関数 (入力が複合型データの場合)
import {
ref } from 'vue';
const person = ref({
name: 'Alice',
age: 25
});
//当值为对象类型，会用recative()自动转换它的value
//响应式替换
person.value = {
name: 'Alice',
age: 25
}
console.log(person.value.name); // 输出 'Alice'
// 修改复杂数据类型的某个属性
person.value.name = 'Bob';
console.log(person.value.name); // 输出 'Bob'