Vue-响应式数据

一、ref创建基本类型的响应式数据

vue3可以使用ref、reactive去定义响应式数数据。

知识点汇总

• 使用ref需要先引入ref，import {ref} from 'vue'
• 在模板 template 中使用了添加ref 的响应式数据，变量的后面不用添加.value
• 所有js代码里面，去操作res包裹的东西，必须要加上 .value
• 使用ref包裹的变量，都变成了对象，其中不带下划线的value 是提供我们自己使用的。
• ref可以定义基本类型、对象类型的响应式数据。

这个value中就是真正的变量数据。

Person.vue组件中的代码：

<template>
    <div class="person">
        <!-- 模板里面不用 name.value，自动帮你加上.value -->
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>地址：{{address}}</h2>
        <button @click="changeName">修改名字</button> 
        <button @click="changeAge">增加年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    //引入ref，所有js代码里面，去操作res包裹的东西，必须要加上 .value
    import {ref} from 'vue' 

    //数据
    let name = ref('张三') // 注意ref是函数
    let age = ref(18) 
    let tel = 13888888888
    let address = '河北 . 邯郸'
    console.log(1,name)
    console.log(2,age)

    //方法
    function changeName(){
        name.value = 'zhang-san' 
        console.log(1,name.value)
    } 
    function changeAge(){
        age.value += 1
        console.log(2,age.value) 
    } 
    function showTel(){
        alert(tel)
    } 
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

二、reactive创建对象类型的响应式数据

reactive用于定义对象类型的数据

知识点汇总：

• 使用reactive()可以把对象类型的数据变成响应式的。
• 数组也是对象，也可以使用reactive()去包裹数组。
• reactive定义的对象类型的响应式数据是深层次的。
• reactive只能定义对象类型的响应式数据。

<template>
    <div class="person">

       <h2>一辆{{car.brand}}价值{{car.price}}万</h2>
       <button @click="changePrice">修改汽车的价格</button> 
        <hr>
        <ul>                        <!-- “:” 就是把 “g.id” 当成js表达式去解析-->
            <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>
        
        <hr>
        <h2>测试：{{obj.a.b.c}}</h2>
        <button @click="changeC">修改第一个 c 的数字</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    //引入reactive
    import {reactive} from 'vue'

    //使用 reactive 把car对象 变成响应式的
    //使用reactive(对象类型) 将对象类型的数据  变成响应式的
    let car = reactive({brand:'奔驰',price:100})
    console.log(car) //打印出来对象类型的数据存放在 Target 中
    
    //定义数组，数组也是对象
    //使用reactive(数组) 将数组类型的数据 变成响应式的
    let games = reactive([
        {id:'hjhdjshj01',name:'穿越火线'},
        {id:'hjhdjshj02',name:'王者荣耀'},
        {id:'hjhdjshj03',name:'原神'},
    ])

    //reactive定义的对象类型的响应式数据是深层次的
    let obj = reactive({
        a:{
            b:{
                c:666
            }
        }
    })

    //方法
    function changePrice(){
        car.price += 10
    }

    function changeFirstGame(){
        games[0].name = '恐龙快打'
    }

    //reactive定义的对象类型的响应式数据是深层次的
    function changeC(){
        obj.a.b.c = 777
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

三、ref创建对象类型的响应式数据

注意： 使用ref处理对象类型的数据时在js代码中不要忘了加上 .value

ref 处理对象类型的数据底层用的是reactive

<script setup lang="ts" name="Person">
    let car = ref({brand:'奔驰',price:100})
    let car1 = reactive({brand:'奔驰',price:100})
    console.log(car)
    console.log(car1)
</script>

<template>
    <div class="person">

       <h2>一辆{{car.brand}}价值{{car.price}}万</h2>
       <button @click="changePrice">修改汽车的价格</button> 
        <hr>
        <ul>                        
            <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    //引入 ref
    import {ref} from 'vue'

    //使用 ref 把car对象 变成响应式的
    let car = ref({brand:'奔驰',price:100})

    //定义数组，数组也是对象
    let games = ref([
        {id:'hjhdjshj01',name:'穿越火线'},
        {id:'hjhdjshj02',name:'王者荣耀'},
        {id:'hjhdjshj03',name:'原神'},
    ])


    //方法
    function changePrice(){
        car.value.price += 10
    }

    function changeFirstGame(){
        games.value[0].name = '恐龙快打'
    }
 
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

四、ref对比reactive

通过Volar插件自动添加 .value

勾选上 Dot Value

如果sum是被 ref() 包裹的数据赋予的，输入sum 便会自动填充.value

知识总结：

1. reactive 重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
2. Object.assign(obj1,obj2,obj3)，表示把 obj2、obj3 中的每一组key-value组合都加在 obj1上，obj1原先的内容会被覆盖。
3. 对于用 reactive 包裹的对象，如果要整体修改对象需要使用Object.assign(obj1,obj2,obj3)
4. 如果用的是 ref 包裹的对象，可以直接使用对象进行赋值。也是响应式的。
5. ref 带 .value 必然是响应式的。

代码示例：

<template>
    <div class="person">

       <h2>一辆{{car.brand}}价值{{car.price}}万</h2>
       <button @click="changeBrand">修改汽车的品牌</button>
       <button @click="changePrice">修改汽车的价格</button> 
       <button @click="changeCar">修改汽车</button> 

       <hr>
       <h2>当前求和为：{{sum}}</h2>
       <button @click="changeSum">点我sum+1</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    //引入 ref、reactive
    import {ref,reactive} from 'vue'

    //数据
    let car = ref({brand:'奔驰',price:100})
    let sum = ref(0)

    //方法
    function changePrice(){
        car.value.price += 10
    }

    function changeBrand(){
        car.value.brand = '宝马'
    }

    function changeCar(){
      // 对于 reactive 来说
      // car = {brand:'奥拓',price:1}  //这样修改不了
      // car = reactive({brand:'奥拓',price:1}) //这样也是修改不了的。
      
      // 只有这种写法，才能响应式的修改 car 对象中的内容
      // Object.assign(obj1,obj2,obj3)
      // 把 obj2、obj3 中的每一组key-value组合都加在 obj1，obj1原先的内容会被覆盖
      // Object.assign(car,{brand:'奥拓',price:1}) //reactive的写法
      // 如果用的是 ref 可以直接修改
      car.value = {brand:'奥拓',price:1} 
      // ref 带 .value 必然是响应式的。

    }

    function changeSum(){
        sum.value += 1
       // sum = ref(9)  //这样是不行的
    }
 
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

ref 和 reactive 的使用建议

1. 若需要一个基本类型的响应式数据，必须使用ref。
2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

五、toRefs与toRef

toRefs()、toRef()，就是把一个响应式对象给解构出来，并且解构出来的数据也具备响应式。

代码示例：

<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}},{{nl}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    import {reactive,toRefs,toRef} from 'vue'
    
    //数据
    let person = reactive({
        name:'张三',
        age:18 
    })

    //toRefs 的作用: 就是 把一个reactive定义的对象 变成 一个ref定义的对象
    //toRefs(person)：此时的 name 和 age 就是响应式的了。
    let {name,age} = toRefs(person)
    
    // let {name,age} = person 相当于以下代码
    // let name = person.name
    // let age = person.age
    // 此时自定义的 name、age 不是响应式的 而 person.name、person.age 这两个是响应式
    
    //toRef
    // 第一个参数是响应式对象，第二个参数是变量名
    let nl = toRef(person,'age')
    console.log(nl) //nl 也是一个 响应式 数据

    // 方法
    function changeName(){
        name.value += '~'
        //自定义 name 里面的值 和 person.name里面的值都会发生改变
        console.log(name.value,person.name)
    }

    function changeAge(){
        age.value += 1
        console.log(age)
    }

</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

power by 尚硅谷