Loading... ## 响应式变量 ### 普通变量 如果直接使用 `let name=xxx`在之后对name变量进行变换的时候就不会刷新界面，我们需要把name变量变为响应式变量来解决这些问题。 ```vue <template> <h1 class="title">你好啊，我是{{ name }}</h1> <button @click="ChangeName">修改名字</button> </template> <script lang="ts" setup name="test"> import { ref } from 'vue'; let name=ref('Yanlin') function ChangeName() { name.value='little' } </script> ``` 在这段代码中，从vue中导入了ref来表明这个变量是响应式变量。 在更改值的过程中需要变成 变量名.value 因为变为响应式变量后，name变为了一个对象，而在template中自带了.value，但是在script中还是要加.value 在这段代码中，点击修改名字时，little就会变成yanlin ### 对象类型 在遇到更高级的类型（如数组）时，我们可以使用`reactive`来表明响应式变量 ```vue <template> <div class="test"> <h2>今天启动什么？</h2> <ul> <li v-for="g in game":key="g.id"> {{ g.name }} </li> </ul> <button @click="ChangeName">修改名字</button> </div> </template> <script lang="ts" setup name="test"> import { ref } from 'vue'; import { reactive } from 'vue' let name=ref('Yanlin') let game=reactive([ {id:1,name:"原神"}, {id:2,name:"农"}, {id:3,name:"舟"} ]) function ChangeName(){ game[0].name="原批" } </script> <style> </style> ``` 这段代码在我们点击修改名字时，会把原神改为原批   当然，我们也可以使用ref来定义对象类型。而reactive只可以定义对象类型。 ```vue <template> <div class="test"> <h2>今天启动什么？</h2> <ul> <li v-for="g in game":key="g.id"> {{ g.name }} </li> </ul> <button @click="ChangeName">修改名字</button> </div> </template> <script lang="ts" setup name="test"> import { ref } from 'vue'; import { reactive } from 'vue' let name=ref('Yanlin') let game=ref([ {id:1,name:"原神"}, {id:2,name:"农"}, {id:3,name:"舟"} ]) function ChangeName(){ game.value[0].name="原批" } </script> <style> </style> ``` 但是需要注意：更改数值的时候要加`.value` ### ref和reactive的对比 #### 宏观角度上 - `ref`可以作用在基本类型和对象类型上 - `reactive`只能作用在对象类型上。 #### 区别 - `ref`创建的变量必须使用`.value` - `reactive`会重新分配一个新对象（不能重新赋值成另外一个对象） #### 使用原则 - 如果是一个基本类型，必须使用`ref` - 如果是对象类型，层级不深，则`ref`，`reactive`都可以 - 如果是深层级的响应式变量，最好使用`reactive` #### 注意点 如果使用reactive却还是要重新赋值时，应该使用`Object.assign()`函数 用法：`Object.assign(obj1,obj2,obj3)` 可以把`obj2`和`obj3`加起来赋值给`obj1`而不会使响应式失效 ```vue <template> <div class="test"> <h2>今天启动什么？</h2> <ul> <li v-for="g in game":key="g.id"> {{ g.name }} </li> </ul> <button @click="ChangeName">修改名字</button> </div> </template> <script lang="ts" setup name="test"> import { ref } from 'vue'; import { reactive } from 'vue' let name=ref('Yanlin') let game=reactive([ {id:1,name:"原神"}, {id:2,name:"农"}, {id:3,name:"舟"} ]) function ChangeName(){ Object.assign(game,[{id:1,name:"别打游戏了！！",},{id:2,name:"谁玩原生谁是二比"}]) } </script> <style> </style> ```  而`ref`类型可以直接重新赋值。 #### toRefs与toRef ```vue <template> <div class="test"> <h2>今天启动什么？</h2> <ul> <li v-for="g in game":key="g.id"> {{ name }} </li> </ul> <button @click="ChangeName">修改名字</button> </div> </template> <script lang="ts" setup name="test"> import { ref, toRefs } from 'vue'; import { reactive } from 'vue' let game=reactive([ {id:1,name:"原神"}, {id:2,name:"农"}, {id:3,name:"舟"} ]) let {id,name} = game[0] function ChangeName(){ game[0].name="123" } </script> <style> </style> ``` 如果直接这样子编写点击按钮以后并不会改变成123，这是因为复制后的name并不是响应式变量。 如果需要变成响应式变量，就需要用到 toRefs ```vue <template> <div class="test"> <h2>今天启动什么？</h2> <ul> <li v-for="g in game":key="g.id"> {{ name }} </li> </ul> <button @click="ChangeName">修改名字</button> </div> </template> <script lang="ts" setup name="test"> import { ref, toRefs } from 'vue'; import { reactive } from 'vue' let game=reactive([ {id:1,name:"原神"}, {id:2,name:"农"}, {id:3,name:"舟"} ]) let {id,name} = toRefs(game[0]) function ChangeName(){ game[0].name="123" } </script> <style> </style> ``` 当然，你也可以使用toRef，使用方法是： `let nl = toRef(game[0],'age')` 是一样的效果 最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！