Java登陸第三十八天——VUE3雙向繫結，監聽器

rowbed發表於2024-04-05
JavaVue

單向繫結

之前學習的栗子，都是單向繫結。

單向繫結: 響應式資料物件的變化會更新dom樹，使用者的某些操作造成的資料更新，不會同步更新到響應式資料物件。

栗子

App.vue

<script setup>
import {ref, reactive} from 'vue';
let msg = ref("hello");
</script>

<template>
  <input v-bind:value="msg" type="text"><br>
  {{ msg }}
</template>

<style scoped>
</style>

效果展示
image

可以看到，儘管更改了輸入框的值，但該響應式資料物件還是未更新。

雙向繫結

雙向繫結，也叫表單輸入繫結。

雙向繫結: 響應式資料的變化會更新dom樹，使用者的某些操作造成的資料更新，也會同步更新到響應式資料物件。

提供了一種雙向繫結命令：v-model

語法格式如下：

<標籤 v-model=" 資料來源 "></標籤>

雙向繫結的特點：

  1. 常用表單中。
  2. 可以加修飾符。.lazy：input標籤觸發change事件後才更新資料。

栗子

App.vue

<script setup>
import {ref, reactive} from 'vue';
let msg = ref("hello");
</script>

<template>
  <input v-model="msg"  type="text"><br>
  {{ msg }}
</template>

<style scoped>
</style>

效果展示
image

單向繫結和雙向繫結

image

監聽器

監聽器類似於JavaWeb中的Listener。當某物件發生改變時會觸發特定的函式。

提供了兩種監聽器函式：watch和watchEffect

語法格式如下：

watch(監聽物件，function (newValue, oldValue) {
//要執行的函式方法體，該function一般寫成箭頭函式
})

watchEffect(執行的函式)

監聽器的特點：(下面所說的物件，大部分物件都是響應式資料物件)

  1. 因為是函式，所以需要從vue引入。

  2. watch函式的監聽物件，可以是物件的某個屬性，也可以是某個物件。

  3. watchEffect監聽所有物件，所以只需要寫執行的函式即可。

watch栗子

App.vue

<script setup>
import {ref, reactive, watch, watchEffect} from 'vue';

let msg = ref("hello")

watch(msg, function (newValue, oldValue) {

  console.log(oldValue + "變為->" + newValue);
})
</script>

<template>
  <input v-model="msg" type="text">
  <h3 v-text="msg"></h3>
</template>

<style scoped>
</style>

效果展示
image

在監聽物件是ref函式生成的響應式資料物件時，會預設指向監聽物件.value。

此時的newValue和OldValue都是監聽物件.value。如果再寫成

watch(msg, function (newValue, oldValue) {
  console.log(oldValue.value + "變為->" + newValue.value);
})

控制檯就會輸出undefind。

watchEffect栗子

App.vue

<script setup>
import {ref, reactive, watch, watchEffect} from 'vue';

let msg = ref("hello")
watchEffect(function () {
  console.log(msg.value+"變為->"+msg.value)
})

</script>

<template>
  <input v-model="msg" type="text">
  <h3 v-text="msg"></h3>
</template>

<style scoped>
</style>

效果展示
image

watchEffect函式監聽了所有響應式資料物件，直接寫該物件即可。訪問ref函式生成的響應式資料物件時，需要.value訪問其值。

這裡不展示監聽reactive函式生成的響應式資料物件。

相關文章