vue3学习笔记 Composition API setup

﹏ヽ暗。殇╰゛Y 2021-09-07 06:19 368阅读 0赞

# 一、Composition API优势 #

相对于vue2的option API Vue3的Composition API设计更有优势

Composition(组合式)Api 功能分组

Composition(组合式)Api 功能导入复用

组合式Api 所解决的问题

(1) 更好的代码组织结构

(2) 相同的代码逻辑可以进行复用

home.vue 3种方式递进升级

<template>
      <div class="home">
        <div>
          <p>{
       { name }}</p>
          <button @click="getName">姓名</button>
        </div>
        <div>
          <p>{
       { age }}</p>
          <button @click="getAge">年龄</button>
        </div>
      </div>
      <HomeB></HomeB>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";
    import HomeB from "./HomeB.vue";
    // import { ref } from "vue";
    import { useName, useAge } from "./user";
    
    export default {
      name: "Home",
      setup() {
        // 1.Composition(组合式)Api
        // const people = {
        //   name: "yusir",
        //   age: 18,
        // };
        // const name = ref("");
        // const getName = () => {
        //   name.value = people.name;
        // };
    
        // const age = ref("");
        // const getAge = () => {
        //   age.value = people.age;
        // };
    
        // return {
        //   name,
        //   getName,
        //   age,
        //   getAge,
        // };
        /* ------------------------ */
        // 2.Composition(组合式)Api 功能分组
        // const people = {
        //   name: "yusir",
        //   age: 18,
        // };
        // return {
        //   ...useName(people), //展开运算符
        //   ...useAge(people),
        // };
    
        // function useName(people) {
        //   const name = ref("");
        //   const getName = () => {
        //     name.value = people.name;
        //   };
        //   return {
        //     name,
        //     getName,
        //   };
        // }
        // function useAge(people) {
        //   const age = ref("");
        //   const getAge = () => {
        //     age.value = people.age;
        //   };
    
        //   return {
        //     age,
        //     getAge,
        //   };
        // }
        /* ------------------------ */
        // 3.Composition(组合式)Api 功能导入复用
        // 组合式Api 所解决的问题
        // (1) 更好的代码组织结构
        // (2) 相同的代码逻辑可以进行复用
        const people = {
          name: "yusir",
          age: 18,
        };
        return {
          ...useName(people), //展开运算符
          ...useAge(people),
        };
      },
      components: {
        HelloWorld,
        HomeB,
      },
    };
    
    </script>

HomeB.vue

<template>
      <div class="home">
        <div>
          <p>{
       { name }}</p>
          <button @click="getName">姓名</button>
        </div>
        <div>
          <p>{
       { age }}</p>
          <button @click="getAge">年龄</button>
        </div>
      </div>
    </template>
    <script>
    import { useName, useAge } from "./user";
    
    export default {
      name: "HomeB",
      setup() {
        const people = {
          name: "yusirxiaer",
          age: 19,
        };
        return {
          ...useName(people), //展开运算符
          ...useAge(people),
        };
      },
    };
    </script>
    <style lang='less' scoped></style>

user.js

import {
      ref
    } from 'vue'
    export function useName(people) {
      const name = ref("");
      const getName = () => {
        name.value = people.name;
      };
      return {
        name,
        getName,
      };
    }
    export function useAge(people) {
      const age = ref("");
      const getAge = () => {
        age.value = people.age;
      };
    
      return {
        age,
        getAge,
      };
    }

# 二、setup 入口函数 #

## 1.组件创建之前被调用  ##

setup 先于created执行，this指向windows

created()里打印的this 是proxy对象 指向组件实例

### setup函数参数  ###

**Props Context** (看HomeB子组件)

Context JavaScript对象

*  context.attrs: Attribute属性(非响应式对象)非props数据
 *  context.slots: 插槽（非响应式对象）
 *  context.emit: 触发事件的方法 === this.$emit

## 2.this不会只指向当前组件实例 ##

## 3.返回值 ##

返回一个对象,对象的属性可以直接在模板中进行使用（就像Vue2使用data和methods一样）

看代码例子

Home.vue

<template>
      <HomeB :title="title" desc="父组件传递过来的普通属性" @update="update">
        <h1>普通的匿名插槽</h1>
        <h2>{
       { title }}</h2>
      </HomeB>
    </template>
    
    <script>
    // @ is an alias to /src
    import HomeB from "./HomeB.vue";
    
    export default {
      name: "Home",
      setup() {
      },
      data() {
        return {
          title: "父组件的title",
        };
      },
      created() {
        console.log("created()打印this");
        console.log(this);
      },
      methods: {
        update(newTitle) {
          this.title = newTitle;
        },
      },
      components: {
        HomeB,
      },
    };
    
    </script>

HomeB.vue

<template>
      <div class="homeB">
        
      </div>
    </template>
    <script>
    export default {
      name: "HomeB",
      props: {
        title: {
          type: String,
          required: true,
        },
      },
      setup(props, { attrs, slots, emit }) {
        console.log("props:", props);
        console.log("Attribute (非响应式的对象):", attrs);
        console.log("插槽:", slots.default());
        emit("update", "子组件更新数据的事件");
      },
    };
    </script>
    <style lang='less' scoped></style>