Vue3.X——Composition API

最新推荐文章于 2025-07-03 08:54:20 发布

B_rabbit_d

最新推荐文章于 2025-07-03 08:54:20 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3.X 文章标签： vue js vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/B_rabbit_d/article/details/114915053

vue3.X 专栏收录该内容

10 篇文章

订阅专栏

本文对比了Vue2.X与3.X在处理业务逻辑时的差异，指出Vue3通过引入Composition API解决了代码碎片化问题，提高了代码可维护性，并详细介绍了Composition API的使用方法及其本质。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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——递归监听与非递归监听