ref()
(基本类型的响应式数据) 在组合式 API 中,推荐使用 ref()
函数来声明响应式状态,ref能定义基本类型的,也能定义对象类型的:
import { ref } from 'vue'
let count=ref(0)
ref()
接收参数,并将其包裹在一个带有 .value
属性的 ref 对象中返回,在模版中则不需要:
<template>
<div>
<h3>{{ count }}h3>
<button @click="count++">按钮1button>
<button @click="add">按钮2button>
div>
template>
<script name="App">
import { ref } from "vue";
export default{
setup(){
let count=ref(0)
function add() {
count.value++;
}
return{
count,add
}
}
}
script>
<style scoped>style>
点击按钮1或按钮2都可实现count的递增:
在 setup()
函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 来大幅度地简化代码:
以下代码运行效果同上
<template>
<div>
<h3>{{ count }}h3>
<button @click="count++">按钮1button>
<button @click="add">按钮2button>
div>
template>
<script setup name="App">
import { ref } from "vue";
let count=ref(0)
function add() {
count.value++;
}
script>
<style scoped>style>
reactive()
(对象类型的响应式数据) 还有另一种声明响应式状态的方式,即使用 reactive()
API。reactive()
将使对象本身,对象数组等具有响应性,在script中也不需要.value:
<template>
<div>
<h3>{{ person.name }}h3>
<h4>{{ person.age }}h4>
<button @click="add">addbutton>
div>
template>
<script setup name="App">
import { reactive } from "vue";
let person=reactive({
name:'利刃',
age:18
})
function add() {
person.age++;
}
// 以下是ref的写法
// let person=ref({
// name:'利刃',
// age:18
// })
// function add() {
// person.value.age++;
// }
script>
<style scoped>style>
点击按钮add可实现age的递增
ref和reactive替代了vue2较为复杂的Object.defineProperty,reactive定义的响应式对象需要整体修改时,需要使用 Object.assign()
<template>
<div>
<h3>{{ person.name }}h3>
<h4>{{ person.age }}h4>
<button @click="add">addbutton>
<button @click="change">changebutton>
div>
template>
<script setup name="App">
import { reactive } from "vue";
let person=reactive({
name:'利刃',
age:18
})
function add() {
person.age++;
}
function change() {
// person={name:'子豪',age:20}
// person=reactive({name:'子豪',age:20})
// 以上2种方法不可行
Object.assign(person,{name:'子豪',age:20})
}
script>
<style scoped>style>
toRefs()
与toRef()
ToRefs()用于解构一个对象里的多个属性,ToRef()则单独解构一个
<template>
<div>
<h3>person对象里的name:{{ person.name }}h3>
<h4>person对象里的age:{{ person.age }}h4>
<h3>解构出来的name:{{ name }}h3>
<h4>解构出来的age:{{ age }}h4>
<button @click="add1">add1button>
<button @click="add2">add2button>
div>
template>
<script setup name="App">
import { reactive, toRefs,toRef } from "vue";
let person=reactive({
name:'利刃',
age:18
})
let {name,age}=toRefs(person)
let myage=toRef(person,'age')
function add1() {
person.age++;
}
function add2() {
age.value++;
}
script>
<style scoped>style>