Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)
单向绑定
之前学习的栗子，都是单向绑定。
单向绑定: 响应式数据对象的变化会更新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函数生成的响应式数据对象。
