Vue3-Day2

Vue3-Day2

响应式数据

基础类型的响应式数据（ref）

在setup中，使用ref函数设置响应式数据。

数据会变成对象，在之后的使用中，需要.value去获取或修改值

<template>
  <div class="person">
    <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">tel</button>
  </div>

</template>

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

  // data
  let name = ref('zhangsan')
  let age = ref(18)
  let tel = 13812341234

  // function
  function changeName() {
    name.value = 'lisi'
  }

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

  function showTel() {
    alert(tel)
    tel += 1
  }
</script>


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

  button {
    margin: 0 5px;
  }
</style>

对象类型的响应式数据（reactive）

<template>
  <div class="person">
    <h2>brand:{{ car.brand }} ,price:{{ car.price }} mi</h2>
    <button @click="changePrice">changePrice</button>
  </div>

  <ul>
    <li v-for="game in games" :key="game.id">{{ game.name }}</li>
  </ul>

  <button @click="changeGame">changeFirstGameName</button>
</template>

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

  // data
  let car = reactive({
    brand: 'xiaomi',
    price: 1000
  })

  let games = reactive([{
    id: 'game1',
    name: "name1"
  },
    {
      id: 'game2',
      name: "name2"
    }, {
      id: 'game3',
      name: "name3"
    }])

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

  function changeGame() {
    games[0].name = 'gameChange'
  }
</script>


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

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
</style>

ref：可以定义基本类型和对象类型的响应式数据
reactive：只能定义对象类型的响应式数据

ref包含了reactive，
但是ref必须使用.value，例如ref(xx)，需要使用xx的话就需要xx.value，无论xx是什么类型(xx.value.name, xx.value[0])
可以使用volar插件(包含在Vue-Official中)来提醒每次使用ref时需要添加.value的问题

使用reactive，重新分配一个对象时，会使数据失去响应式，需要使用的话得使用Object.assign(o1, o2)
o2的属性都赋值给o1

但是ref可以直接赋值

<script>
  function changeCar() {
    Object.assign(car, {brand: 'audi', price: 888})
  }
</script>

总结

直接使用ref，遇到问题再使用reactive，有经验的自己写

解构响应式数据

toRefs

将数据结构成ref

<script setup lang="ts" name="Person">
    import {ref, reactive, toRefs} from 'vue'

    let person = reactive({
        name: 'zhangsan',
        age: 18
    })

    // 当前的这个name和age的指针地址和person中的name和age相同，
    // 任意修改外部的name/age或者person内部的name/age，两边的值都会做出修改
    let {name, age} = toRefs(person)

    function changeName() {
        person.name += '='
        console.log(person.name
        name.value
    )
    }

    function changeName2() {
        name.value += '='
        console.log(name)
    }
</script>

toRef

<script setup lang="ts" name="Person">

    import {ref, reactive, toRefs, toRef} from 'vue'

    let person = reactive({
        name: 'zhangsan',
        age: 18
    })

    let name = toRef(person, 'name')

    console.log(name.value)
</script>