單向繫結
之前學習的栗子，都是單向繫結。
單向繫結: 響應式資料物件的變化會更新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>
效果展示
可以看到，儘管更改了輸入框的值，但該響應式資料物件還是未更新。
雙向繫結
雙向繫結，也叫表單輸入繫結。
雙向繫結: 響應式資料的變化會更新dom樹，使用者的某些操作造成的資料更新，也會同步更新到響應式資料物件。
提供了一種雙向繫結命令：v-model
語法格式如下：
<標籤 v-model=" 資料來源 "></標籤>
雙向繫結的特點：
- 常用表單中。
- 可以加修飾符。.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>
效果展示
單向繫結和雙向繫結
監聽器
監聽器類似於JavaWeb中的Listener。當某物件發生改變時會觸發特定的函式。
提供了兩種監聽器函式：watch和watchEffect
語法格式如下：
watch(監聽物件，function (newValue, oldValue) {
//要執行的函式方法體，該function一般寫成箭頭函式
})
watchEffect(執行的函式)
監聽器的特點：(下面所說的物件，大部分物件都是響應式資料物件)
-
因為是函式，所以需要從vue引入。
-
watch函式的監聽物件，可以是物件的某個屬性，也可以是某個物件。
-
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>
效果展示
在監聽物件是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>
效果展示
watchEffect函式監聽了所有響應式資料物件，直接寫該物件即可。訪問ref函式生成的響應式資料物件時，需要.value訪問其值。
這裡不展示監聽reactive函式生成的響應式資料物件。