Vue学习之路04----响应式基础

响应式基础

ref() （基本类型的响应式数据）

​ 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态，ref能定义基本类型的，也能定义对象类型的：

import { ref } from 'vue'

let count=ref(0)

​ ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回，在模版中则不需要：

<template>
  <div>
    <h3>{{ count }}</h3>
    <button @click="count++">按钮1</button>
    <button @click="add">按钮2</button>
  </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的递增：

<script setup>

​ 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 <script setup> 来大幅度地简化代码：

以下代码运行效果同上

<template>
  <div>
    <h3>{{ count }}</h3>
    <button @click="count++">按钮1</button>
    <button @click="add">按钮2</button>
  </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">add</button>
  </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">add</button>
    <button @click="change">change</button>
  </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">add1</button>
    <button @click="add2">add2</button>
  </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>