vue3.0 Composition-API

一、Composition-API基本用法

<template>
  <div>
    <p>{{count}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
  import {ref} from 'vue';
export default {
  name: 'App',
  // setup函数是组合API的入口函数
  setup(){
    // let count = 0;
    // 定义了一个名称叫做count变量, 这个变量的初始值是0
    // 这个变量发生改变之后, Vue会自动更新UI
    let count = ref(0);
    // 在组合API中, 如果想定义方法, 不用定义到methods中, 直接定义即可
    function myFn() {
      // alert(123);
      // console.log(count.value);
      count.value += 1;
    }
    // 注意点:
    // 在组合API中定义的变量/方法, 要想在外界使用, 必须通过return {xxx, xxx}暴露出去
    return{count, myFn}
  }
}
</script>

---

二、Composition-API抽取

如下方代码块所示，可以将同一个删除功能下的数据和业务逻辑封装在useRemoveStudent()函数中。这样就解决了vue2.x中数据和业务逻辑分散的问题，便于维护管理

<template>
  <div>
    <ul>
      <li v-for="(stu, index) in state.stus"
          :key="stu.id"
          @click="remStu(index)">
        {{stu.name}} - {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {reactive} from 'vue';
export default {
  name: 'App',
  setup() {
    /*
    // ref函数注意点:
    // ref函数只能监听简单类型的变化, 不能监听复杂类型的变化(对象/数组)
    let state = reactive({
      stus:[
        {id:1, name:'zs', age:10},
        {id:2, name:'ls', age:20},
        {id:3, name:'ww', age:30},
      ]
    });
    function remStu(index) {
      state.stus = state.stus.filter((stu, idx) => idx !== index);
    }
     */
    let {state, remStu} = useRemoveStudent();

    return {state1, remStu}
  }
}
function useRemoveStudent() {
  let state = reactive({
    stus:[
      {id:1, name:'zs', age:10},
      {id:2, name:'ls', age:20},
      {id:3, name:'ww', age:30},
    ]
  });
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx !== index);
  }
  return {state, remStu};
}
</script>

---

三、Composition-API模块化

如下代码块所示，可以将同一个功能下的数据和业务逻辑放在一个js模块里，这样更加方便维护管理

// app.vue
<template>
  <div>
    <form>
      <input type="text" v-model="state2.stu.id">
      <input type="text" v-model="state2.stu.name">
      <input type="text" v-model="state2.stu.age">
      <input type="submit" @click="addStu">
    </form>
    <ul>
      <li v-for="(stu, index) in state.stus"
          :key="stu.id"
          @click="remStu(index)">
        {{stu.name}} - {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>
  import useRemoveStudent from './rem';
  import useAddStudent from './add';
export default {
  name: 'App',
  setup() {
    let {state, remStu} = useRemoveStudent();
    let {state2, addStu} = useAddStudent(state);
    return {state, remStu, state2, addStu}
  }
}
</script>

// add.js
import {reactive} from 'vue';
function useAddStudent(state) {
    let state2 = reactive({
        stu:{
            id:'',
            name:'',
            age:''
        }
    });
    function addStu(e) {
        e.preventDefault();
        const stu = Object.assign({}, state2.stu);
        state.stus.push(stu);
        state2.stu.id = '';
        state2.stu.name = '';
        state2.stu.age = '';
    }
    return {state2, addStu}
}
export default useAddStudent;

---

四、Composition-API本质

option API及vue2.x的方式，vue3.0是支持Composition API 和Option API混合使用的。

Composition API的本质就是在运行的时候将
Composition API中暴露出去的数据暴露在Option API中，及数据注入到vue2.x的data中，函数注入到vue2.x的methods中

<template>
  <div>
    <p>{{name}}</p>
    <button @click="myFn1">按钮</button>
    <p>{{age}}</p>
    <button @click="myFn2">按钮</button>
  </div>
</template>

<script>
  /*
  1.Composition API 和Option API混合使用
  2.Composition API本质 (组合API/注入API)
  3.setup执行时机
  4.setup注意点
  * */
  import {ref} from 'vue';
export default {
  name: 'App',
  data: function(){
    return {
      name: 'lnj',
      // age: 18
    }
  },
  methods:{
    myFn1(){
      alert('abc');
    },
    // myFn2() {
    //   alert('www.it666.com');
    // }
  },
  setup() {
    let age = ref(18);
    function myFn2() {
      alert('www.it666.com');
    }
    return {age, myFn2}
  }
}
</script>

说明：本章内容为博主在原视频基础上写的学习笔记，来源https://www.bilibili.com/video/BV14k4y117LL?p=1，教程版权归原作者所有。