使用组合式API的方式定义响应式变量，必须通过ref 或reactive 函数来实现

一、使用ref函数定义响应式变量

这里ref定义的时候不仅可以定义初始的数据类型还可以定义对象数组之类的数据

//假如定义为对象

<script setup name="one">
 import { ref } from 'vue'
let infor = ref({
    name: 'Copydragon',
    age: 18
})

cosnt onclick=()=(){
//如果是one.age的话打印出来的是一个undefine
    one.value.age++;
}


</script>

<template>
    <div>
        <h1>Welcome to {{ one.name }}!</h1>
       
    </div>

    <div>
        <button @onclick = "rm">
            点击修改用户名
        </button>
        
    </div>
</template>

通过 ‘.’获取值 

语法为：let xxx = ref(初始值) 。使用如下：

<script setup name="App">
  import { ref } from 'vue'

  let username = ref('张三');

  const onChangeUsername = () => {
    username.value = '李四';
  }
</script>

<template>
  <div>用户名：{{ username }}</div>
  <button @click="onChangeUsername">修改用户名</button>
</template>

使用ref函数定义的响应式变量，有两点需要注意：

• 在模板中可直接使用变量。
• 在script标签中，若要操作变量，则需要通过username.value来实现。

设计：

通过点击按钮来改变定义的响应式变量

<template>
    <div>
        <h1>Welcome to {{ username }}!</h1>
        <p>Your password is {{ password }}</p>
    </div>

    <div>
        <button @click = "rm">
            点击修改用户名
        </button>
        
    </div>
</template>

<script setup name="name">
    import { ref } from 'vue'
    let username = ref( 'CopyDragon');
    let password = ref( '123456');
    let i = ref(1);

    function rm(){
        username.value += i.value++;
    }
    
</script>

<style lang="scss" scoped>

</style>

 在APP.vue里的template中加上这个响应式：

<script setup>

import name from './components/xiangying_bianlaing.vue'; //导入路径

// import Options_wokr from './components/Options_wokr.vue';
// import Compositions_API from './components/Compositions_API.vue';
</script>

<template>
  <div>
    <name></name> //渲染
  </div>
  
</template>

二、使用reactive函数定义响应式变量

定义一些复合型响应式变量，则应该使用reactive 函数来实现。基本语法为：let xxx = reactive(源对象) 。使用如下：

<script setup name="App">
  import { reactive } from 'vue'

  let author = reactive({username: "张三", age: 18})

  let books = reactive([
    {name: '水浒传',author: '施耐庵'},
    {name: '三国演义',author: '罗贯中'}
  ])

  const onModifyBookName = () => {
    books[0].name = '红楼梦'
  }

  const onUpdateUsername = () => {
    author.username = "李四"
  }

</script>

<template>
  <h1>用户名为：{{author.username}}</h1>
  <button @click="onUpdateUsername">修改用户名</button>
  <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>作者</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="book in books" :key="book.name">
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="onModifyBookName">修改书名</button>
</template>

reactive 函数适合使用那些深层次的响应式变量。如果需要重新给reactive 函数定义的响应式变量赋值，那么需要通过Object.assign 来实现，否则将会失去响应式的功能

Object.assign(books, [{name: '红楼梦',author: '曹雪芹'}])

 forEach() 方法来修改全部数组

// 假设 book 是一个包含多个书籍对象的数组  
let book = [  
    { name: '西游记', author: '吴承恩', price: 99.99 },  
    { name: '红楼梦', author: '曹雪芹', price: 109.99 },  
    // ... 其他书籍对象  
];  
  
// 使用 forEach 来遍历数组并修改每个书籍的 price 属性  
book.forEach(bookItem => {  
    // 这里我们假设要给每个价格增加 10%  
    bookItem.price += bookItem.price * 0.1;  
    // 或者，如果您有一个特定的新价格要设置，可以这样做：  
    // bookItem.price = 新价格;  
});  
  
// 现在 book 数组中的每个书籍对象都有更新后的 price 属性


//修改单一变量
// 假设我们要更新第一个书籍对象的 price  
let newPrice = 119.99; // 新价格  
Object.assign(book[0], { price: newPrice });

设计：

设计一个图书信息表，通过两个按钮分别进行下一本书和上一本书的信息

<!-- 用reacitve来定义响应式变量
reacitve只能定义复合类型的变量，不能定义基本类型的变量，如：string、number、boolean等。 -->

<template>
    <div>
        <h1>书名：{{ book[i].name }}</h1>
        <p>作者：{{ book[i].author }}</p>
        <p>价格：{{ book[i].price }}</p>
    </div>

    <div>点击查看下一本书</div>
    <button @click="nextBook">下一本书</button>
    <button @click="prevBook">上一本书</button>
</template>

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

let i = ref(0); // 定义响应式变量i，初始值为0
let book = reactive ([
    {
     name: '西游记',
     author: '吴承恩',
     price: 99.99,
    },
    {
        name: '红楼梦',
        author: '曹雪芹',
        price: 109.99,
    },
    {
        name: '三国演义',
        author: '罗贯中',
        price: 89.99,
    },
    {
        name: '水浒传',
        author: '施耐庵',
        price: 129.99,
    }
])

// Object.assign() //修改单一的变量
// book.forEach(bookItem => {
    //用book.forEach()来进行修改所有的变量
// });

const nextBook = () => {
    if (i.value >= 3) {
        i.value = book.length - 1;
        alert('这是最后一本书了！');
    }
    i.value ++;
}

const prevBook = () => {
    if (i.value <= 0) {
        i.value = 0;
        alert('这是第一本书了！');
    }
    i.value --;

}
</script>

<style scoped>

</style>

 

三、ref和reactive对比

• 如果要定义一个基本数据类型的响应式变量，则必须使用ref。
• 如果要定义一个层级不深的复合类型的响应式变量，则ref和reactive都可以。
• 如果要定义一个层级很深的复合类型的响应式变量，则推荐使用reactive。