目次
vue3 では、インターフェイス上で一部のデータを処理する必要がある場合、計算されたプロパティとリスナーを通じて処理でき、これらはすべてプロパティに対して動作し、データを返します。
両者の違いは、計算されるプロパティは最初の初期値か、あるメソッドを呼び出した後に計算で返された値で計算されることと、インターフェースデータの変化に応じてリスナーが変更されることです。戻り値。
1 つは、計算されたプロパティ
1. 通常の実行プログラムを作成し、次のコードをそこにコピーします。
<template>
<div>
<h1>{
{a}}</h1>
<h1>{
{b}}</h1>
<h1>{
{a}}{
{b}}</h1>
<h2>{
{c}}</h2>
</div>
</template>
<script lang="ts" setup>
import {
computed
} from 'vue';
const a = '123';
const b = '456';
//computed 有些值需要通过计算得到
const c = computed(() => {
return a + b
})
// watch()
</script>
<style scoped>
</style>
2.効果
実現したい効果は a と b の値を加算して計算して表示することですが、補間によっても実現できます。
3. 拡張
2番目の手順で述べたように、補間法を使用することもできますが、値を計算する必要がある場合、論理的な判断が多く、補間法は複雑すぎるため、計算プロパティを使用して計算する必要があります
a の値の長さを 3 に変更すると、効果は図のようになります。
a の値の長さを 3 より大きく変更すると、その効果は図に示されています。
コード
<template>
<div>
<h1>{
{a}}</h1>
<h1>{
{b}}</h1>
<h1>{
{a}}{
{b}}</h1>
<h2>{
{c}}</h2>
</div>
</template>
<script lang="ts" setup>
import {
computed
} from 'vue';
// const a = '123';
const a = '1234';
const b = '456';
//computed 有些值需要通过计算得到
const c = computed(() => {
if (a.length == 3) {
return a + b + "长度是3"
} else {
return a + b + "长度不是3"
}
})
// watch()
</script>
<style scoped>
</style>
第二に、聞き手
1. 通常の実行プログラムを作成し、次のコードをそこにコピーします。
データを入力すると、リスナーは a の値を変更し、ログを出力します。
<template>
<input v-model="a" />
</template>
<script lang="ts" setup>
import {
watch,
ref
} from 'vue';
const a = ref('')
//a是监听变量的值，cc是变化后的值
watch(a, (cc) => {
console.log(`1个参数：a is ${cc}`)
})
</script>
<style scoped>
</style>
2.効果
ブラウザを開いて F12 を押し、コンソールの出力データを確認します。
数値を入力するたびにログが自動的に出力されます。つまり、a を監視し、a が変化したときにログが出力されます。
3. 拡張
メソッド内にパラメータが2つある場合
コード：
<template>
<input v-model="a" />
</template>
<script lang="ts" setup>
import {
watch,
ref
} from 'vue';
const a = ref('')
//a是监听变量的值，cc是变化后的值
// watch(a, (cc) => {
// console.log(`1个参数：a is ${cc}`)
// })
//a是监听变量的值，bb是变化前的值，aa是变化后的值
watch(a, (aa, bb) => {
console.log(`2个参数：a is ${bb}`)
console.log(`2个参数：a is ${aa}`)
})
</script>
<style scoped>
</style>
効果：
第 2 パラメータ bb は変更前の値、第 1 パラメータ aa は変更後の値
拡大：
計算プロパティ: 複数の値の変更、結果を取得するには、計算プロパティを使用して、計算を通じて値の結果を取得します。
リスナー: 値の変化を観察するために、値の変更は複数の値に影響します (または複数のイベントを処理します)。
計算されたプロパティはほとんどのシナリオで使用され、計算されたプロパティのパフォーマンスはリスナーのパフォーマンスよりも高くなります。
<template>
<input v-model="vaule2.name" />
<input v-model="data1" />
<button @click="aa">2332</button>
</template>
<script lang="ts" setup>
import {
watch,
reactive,
ref
} from 'vue';
let vaule2 = reactive({
name: "212",
age: 20
})
const aa = (() => {
data1.value.push(6)
})
// 监听对象
watch(() => vaule2.name, (newValue, valuOld) => {
console.log(`对象参数：${newValue}`)
})
//监听数组
let data1 = ref([1, 2, 3])
watch(data1.value, (newValue, valueOld) => {
console.log(`数组参数： ${newValue}`)
})
watch([data1.value, () => vaule2.name], (newValue, valueOld) => {
console.log(`多值参数： ${newValue}`)
})
</script>
<style scoped>
</style>