Vue3.X——Composition API

• 2.X存在的问题
  Vue3.X兼容2.X的写法，在2.X写法上，我们发现同一功能的业务逻辑非常分散，例如实现删除功能所需的数据放在 data 里，实现该功能的方法可能放在 methods 里，也有可能放在 computed 或 watch 里，在大项目中会造成后期维护困难，例如：

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '模块一',
      msg2: '模块二'
    }
  },
  methods: {
    add() { '模块一的方法' },
    remove() { '模块二的方法' }
  },
  computed: {
	'模块一',
    '模块二'
  },
  watch: {
	'模块一',
    '模块二'
  }
}
</script>

• 3.X解决方法
  3.X为了解决代码碎片化的问题，引入了 Composition API，它能把同一功能的业务逻辑整合在一起，极大地提高了代码的可维护性，例如：
  效果图：
  代码实现：

  <!- App.vue ->
  <template>
    <form action="">
      <input type="text" v-model="state2.list.id">
      <input type="text" v-model="state2.list.name">
      <input type="text" v-model="state2.list.age">
      <input type="submit" @click="add" value="新增">
    </form>
    <ul @click="operation" id="list">
      <li v-for="(item, index) in state.list" :key="index">
        <span style="margin-right: 10px">{{ item.name }}-{{ item.age }}</span>
        <button id="edit">修改</button>
        <button id="del">删除</button>
      </li>
    </ul>
  </template>
  
  <script>
  import rowOperation from './rowOperation.js';
  import addOperation from './addOperation.js';
  export default {
    name: 'App2',
    setup() {
      let { state, operation } = rowOperation();
      let { state2, add } = addOperation(state);
      // 所有需要在视图中展示的数据和使用的方法都必须return出来
      return {state, operation, state2, add};
    }
  }
  </script>
  

  // rowOperation.js 行操作
  import {reactive} from 'vue';
  function rowOperation() {
    let state = reactive({
      list: [
        {id: 0, name: 'zs', age: 15},
        {id: 1, name: 'ls', age: 18},
        {id: 2, name: 'ww', age: 19}
      ]
    })
    function operation(e) {
      e = e || window.event;
      let target = e.target || e.srcElement; //兼容IE8
      if(target.parentNode.tagName.toLowerCase() == 'li') {
        let li = document.querySelectorAll('li'); //querySelectorAll返回类数组
        let index = Array.prototype.indexOf.call(li, target.parentNode); 
        switch(target.id) {
          case 'edit':
            edit(index);
            break;
          case 'del':
            del(index);
        }
      }
    }
    // 编辑
    function edit(index) {
      ...
    }
    // 删除
    function del(index) {
      ...
    }
    // 记得把在视图展示的数据和用到的方法return出来
    return {state, operation};
  }
  export default rowOperation;
  

  // addOperation.js 新增操作
  import {reactive} from 'vue';
  function addOperation(state) {
    let state2 = reactive({
      list: {
        id: '',
        name: '',
        age: ''
      }
    })
    function add(e) {
      e.preventDefault();
      ...
    }
    return {state2, add};
  }
  export default addOperation;
  

• Composition API 的本质
  Composition API 可以称为组合API，也可称之为注入API，它的本质是把 Composition API 暴露出来的数据和方法注入到 data 和 methods 中，例如：

  import {ref} from 'vue';
  export default {
      data() {
          return {
              msg1: '123'
              //msg2: 0
          }
      },
      methods: {
          myFun1() {
              ...
          }
          // myFun2() {
          //     ...
          // }
      },
      setup() {
          let msg2 = ref(0);
          function myFun2() {
              ...
          }
          return {state, myFun2};
      }
  }
  

• setup()的执行时间与注意点
  Vue3.X 允许 Composition API 和 Option API 混合使用，但是 setup() 函数的执行时间是在 beforeCreate 之前，因此无法调用 data 和 methods ，vue3.X为了避免在 setup() 中误用 data 和 methods ，this 被设置为 undefined ，即：

  export default {
      data() {
          return {
              msg: 'hello'
          }
      },
      methods: {
          myFun() {
              ...
          }
      },
      setup() {
          console.log(this); //undefined
          console.log(this.msg); //error
          this.myFun(); //error
      }
  }
  

注意：setup() 不能是异步函数！！例：

async setup() { //页面内容将无法展示
    ....
}

目录：VUE3.X笔记——目录
上一篇：VUE3.X——reactive与ref
下一篇：VUE3.X——递归监听与非递归监听