Vue3.0学习 （9）-双向数据绑定

双向数据绑定是啥？为什么使用？
what：实现双向数据绑定，即 js - html ；html -js
why： 比如 html 中的 input 输入框，我们可以从服务器获取相应数据显示到html中 ，如果 input 中的数据发生了变化 我们也需要相应的把数据发送到服务器保存起来。

单向数据绑定-显示数据

数据从 js 中传到 html 中（只是能显示出来数据，如果js中的数据发生了变化，html中的数据是不会变的）。

1、代码：

 <input :value="age" type="text"></input>            
 <button @click="onClick1">年龄</button>

const age =18

function onClick1(){
     console.log(age)
     alert(age)
 }

2、效果：更改输入框数据后，弹出数据未变。

3、双向数据绑定实现方式

如果想实现当输入框内数据变化后，变量的数据同时发生变化，需要使用以下方式：
1）docment.getelm…
2）event (类似小程序)
3）使用vue3.0 v-model 指令 + 响应式对象 方式实现

双向数据绑定

使用上述第三种方式实现。

1、代码：

  <input v-model="age" type="text"></input>            
  <button @click="onClick1">年龄</button>

--引入ref 方法
const {createApp,ref,reactive} = Vue

const age =ref(18)

function onClick1(){
    console.log(age)
    alert(age.value)
}

2、代码解读：

1）ref ：使用 ref 会把变量包装成一个响应式对象，与普通的对象不同，普通对象与使用console.log打印出包装的对象：

普通对象
const profie{
	age：18
}
包装对象
const age=ref(18)

2）html 中 不需要 使用 ref 封装对象的 .value 进行数据绑定，vue内部已经处理了，直接使用：age 。 js中需要使用 age.value。

3）v-model 不是实现双向数据绑定的根本，v-model只是一个工具。数据是响应式对象才是根本。如果数据不是 ref 包装的，那么也无法实现双向数据绑定。

4）除了ref之外 也可以使用 reactive 。ref一般包装变量，reactive一般包装对象。例，用法与ref相同。

const profie = reactive { 
age :18
}

3、效果：更改数据后：数据发生变化。

单向数据绑定-真正单向

数据从 js 中传到 html 中（不仅能显示出来数据，如果js中的数据发生了变化，html中的数据是会同时变化）。

1、代码

<div>{{number}}</div>
<button @click="onincrement">+1</button>

--let number =1  必须是响应式对象才行
let number =ref(1)
function onincrement(){
    number.value++;
    console.log(number.value)
}

2、效果

点击 按钮 +1 日志中记录出变量在变， html中数据也在相应变化。