Vue3 常用 Composition API (组合式API)

---

一、setup

setup是Vue3.0中的一个新的配置项, 值是一个函数,

组件中所用到的 数据, 方法 等待, 均要配置在setup中

1. setup的两种返回值

1. 若返回一个对象, 则对象中的属性, 方法, 在模板中均可以直接使用

<template>
  <div>
    <h1>名字:{{name}}h1>
    <h2>年龄:{{age}}h2>
  div>
template>

<script>

export default {
  name: 'App',
  setup() {
    // 数据
    let name = "张三"
    let age = "18"
    // 方法
    function sayHello(){
      alert(`我叫${name}, 我${age}岁了`)
    }

    return {
      name,
      age,
      sayHello
    }
  }
}
script>

<style>
style>

2. setup的参数

setup有两个参数, 一个是props, 另一个是context

1. props

2. context

上下文

二、ref函数

把普通的数据定义为Vue可以监测到的响应式数据 ref接收的数据可以是基本类型, 也可以是对象类型.
基本类型的数据 : 响应式是靠Object.defineProperty()的get与set完成
对象类型的数据 : 内部使用了Vue3中的一个新函数, reactive函数.

使用ref函数定义的数据将会变成一个对象

此时想要获取name和age, 就需要使用 name.value, age.value

三、reactive函数

作用 : 定义一个对象类型的响应式数据.
语法 : const 代理对象 = reactive(源对象)

1. 在方法里面可以直接修改数组里面的数据

四、Vue3的响应式原理

通过Proxy : 拦截对象中任意属性的变化, 包括 : 属性的读写, 属性的添加, 属性的删除等.

1. Proxy

代理对象p里面也会有person里面的数据

修改p里面的数据, person里面的数据也会跟着改变

Proxy里面也有getter和setter

1. Proxy的getter, setter 和 deleteProperty

getter接收两个参数 : 源数据 和 读取的属性名

setter接收三个参数 : 源数据, 读取的属性名, 修改的值

deleteProperty : 删除的时候调用

2. Reflect

使用Reflect可以操作对象的属性

3. 使用Reflect

五、计算属性

使用computed函数, 与Vue2中computed配置一致

Demo.vue

<template>
  <h1>姓名: {{fullName}}</h1>  
</template>

<script>
  import {reactive, computed} from "vue"

  export default {
    name: "Demo",
    setup() {
      const person = reactive({
        firstName: "zhang",
        lastName: "san"
      })
      let fullName = computed(()=>{
        return person.firstName + person.lastName
      })

      return {
        person,
        fullName
      }
    }
  }
</script>

<style>

</style>