vue3新特性及api介绍（四）

最新推荐文章于 2024-08-12 09:24:35 发布

一笑而泯

最新推荐文章于 2024-08-12 09:24:35 发布

阅读量410

点赞数

文章标签： vue3 vue3新特性 composition composition代码组织

本文链接：https://blog.csdn.net/weixin_42733155/article/details/106064460

版权

Vue3的最大变革在于Composition API，它带来了代码组织方式的改变，以composition为核心，使得代码模块化更精细。reactive、ref等新特性为这种组织方式锦上添花。通过将属性和方法按功能拆分，不再受限于data、methods等传统划分，提升代码复用性和可读性。示例展示了如何用Composition API实现节点拖拽，对比Vue2.x，Composition API让代码复用更加便捷。

摘要由CSDN通过智能技术生成

三、总结

新特性说完了，下面来说一下感想。

在我看来，vue3最大的特点，不是proxy，或者其他新增的api，而是采用compositiond带来的代码组织方式的变化。相关的reactive、ref等等都是锦上添花，以composition为核心组织代码才是最大也最有价值的改进点。

这种新的代码组织方式和透露的思想更符合编程思维，之前的按照选项组织代码的方式更符合我们平时的思维。由此，我们的代码在更小的粒度上实现了模块化。之前每个组件的data、methods等等还是分开的，现在我们是按照功能去拆分代码，不用区分属性、方法、watch等的声明位置。这也能保证在一个公共的入口(setup方法)我们就可以看到所有相关的功能入口，可以看到所有页面中需要用到的属性和方法。而将更小粒度的属性和方法声明放在各自的函数中。

下面就是一个简单的例子，用mouse系类实现节点的拖拽。

<template>
  <div class="node" :style="nodeLayout" @mousedown="mousedownHandle"></div>
</template>
<script>
import { reactive, computed, ref, onMounted, onUnmounted } from "vue";
// 初始化需要的属性
const initLayout = () => {
  const layout = reactive({ x: 0, y: 0 });
  return {
    layout
  };
};
// 初始化需要的事件
const initEvent = layout =>