Vue3：常用的Composition API（组合API）

常用的Composition API（组合API）

1、setup

setup函数的两种返回值：

• 若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）

<template>
  <div class="home">
    <h1{{msg}}</h1>
  </div>
</template>

<script>
export default {
  setup() {
    // 现在暂时还不考虑响应式数据的问题
    // 数据 
    let msg = "hello world!"
    // 方法
    let fn= function (){}
    return {msg}
  }
}
</script>

• 若返回一个渲染函数，则可以自定义渲染内容（了解）

<script>
import {h} from 'vue'
export default {
  setup() {
    // 返回一个渲染函数
    // h相当于document.CreateElement()
    return ()=>{return h("h1","vue3返回渲染函数")}
  }
}
</script>

• 注意点

• 尽量不要和Vue2.x配置混用

• Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法

• 但在setup中不能访问到Vue2.x配置(data，methods，computed......)

• 如有重名，setup优先

• setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性

*注

<script setup>
    //这种script标签可以不用写返回值
</script>

 

 

2、ref函数

 

• 作用：定义一个响应式的数据

• 语法：const xxx = ref("value")

• 创建一个包含响应式的数据的引用对象(reference对象)

• js中操作数据：xxx.value

• 模板中读取数据不需要.value,直接<div>{{xxx}}</div>

<template>
  <div class="home">
    <p>{{n}}</p>
    <button @click="changeMsg()">点击测试vue3.0的基本数据</button>
  </div>
</template>

<script>
import { ref } from "vue"
export default {
  setup() {
    // 1.基本数据类型
    let n= ref(1);
    let obj= ref({name:"lili"})
    // 方法
    let changeMsg = function () {
      console.log(name.value);
    }
    return {
      name, age, changeMsg, more, changeMore
    }
  }
}
</script>

• 注意

  • 接收的数据类型可以是基本数据类型也可以是引用数据类型

  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的

  • 对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数

3、reactive函数

• 作用：定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)

• 语法：const 代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象）

• reactive定义的响应式数据是“深层次的”

• 内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的

<template>
  <div class="home">
    <h1>显示vue3.0的数据和方法</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>工作:{{more.job}}</h2>
    <h2>薪资:{{more.salary}}</h2>
    <h2>c:{{more.a.b.c}}</h2>
    <button @click="changeMsg()">点击测试vue3.0的基本数据</button>
    <button @click="changeMore()">点击测试vue3.0的引用数据</button>
  </div>
</template>

<script>
//1.引入
import {ref,reactive} from "vue"
export default {
  setup() {
    let name = ref("lucy");
    let age = ref(18);
    let more = reactive({
      job: "前端开发工程师",
      salary: "10k",
      a:{
        b:{
          c:"ccccccccccccc"
        }
      }
    })

    // 方法
    let changeMsg = function () {
      name.value = "lili";
      age.value = 19;
      console.log(name, age);
    }

    //2.修改 
    let changeMore = function () {
      more.salary = "20K";
    }
    return {
      name, age, changeMsg, more, changeMore
    }
  }
}
</script>

4、计算属性

<template>
  <div class="home">
    <h1>vue3.0的计算属性----------{{count}}</h1>
  </div>
</template>

<script>
// 注意:vue2.x和vue3.x不要混用
// 1.引入
import { computed } from "vue"
export default {

  data() {
    return {};
  },
  computed: {
    count() {}
  },

  setup() {
    // 2.使用
    let count= computed(() => {})
    return { count}
  }
}
</script>