【从0到项目实战 vue3+vite】4. vue3基础-响应式

---

开始

还原App.vue为如下

<script setup>

script>

<template>
  
template>

<style scoped>

style>

运行项目

yarn dev

浏览器打开http://localhost:5173/

为一片空白,则为下面的教程做准备

---

---

---

input双向绑定

简单绑定

• 例子

<input v-model='a' />

• 完整代码

<script setup>
import { ref } from 'vue';

const a = ref('通过输入框改变我的值，来改变a的值')
script>

<template>
  <h1>a的值为: {{ a }}h1>
  <input v-model='a' />
template>

<style scoped>
style>

• 显示

绑定object对象

• 完整代码

<script setup>
import { ref } from 'vue';

const a = {
	val: '通过输入框改变我的值，来改变a的值'
}
script>

<template>
  <h1>a.val的值为: {{ a.val }}h1>
  <h1>a的值为: {{ a }}h1>
  <input v-model='a.val' />
template>

<style scoped>
style>

• 显示 (如图可知，绑定普通object对象，无法让dom引用值动态更新显示，但是实际上a.val的值已经改变)

绑定object对象（能够动态更新显示，方法1）

• 完整代码

<script setup>
import { reactive } from 'vue';

const a = reactive({
	val: '通过输入框改变我的值，来改变a的值'
})

script>

<template>
  <h1>a.val的值为: {{ a.val }}h1>
  <h1>a的值为: {{ a }}h1>
  <input v-model='a.val' />
template>

<style scoped>
input{
  font-size: 20px;
}
style>

• 显示 (通过reactive将对象变为响应式数据)
  

绑定object对象（能够动态更新显示，方法2）

• 完整代码

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

const a = {
	val: ref('通过输入框改变我的值，来改变a的值')
}

const { val } = a; // 解包

script>

<template>
  <h1>a.val的值为: {{ a.val }}h1>
  <h1>a的值为: {{ a }}h1>
  <input v-model='val' />
template>

<style scoped>
input{
  font-size: 20px;
}
style>

• 显示 (通过ref将对象a的val属性变为响应式数据, 但是此时a为非响应式，a.val为响应式数据)