七月在线-机器学习集训营15期2022最新-会须一饮三百杯

关于Vue3和Ts的心得和考虑
七月在线-机器学习集训营15期2022最新

download：https://www.51xuebc.com/thread-499-1-1.html

1 前言
Vue3曾经正式发布了一段时间了，各种生态曾经成熟。最近运用taro+vue3重构冷链的小程序，经过了一段时间的开发和运用，有了一些本人的考虑。

总的来说，Vue3无论是在底层原理还是在实践开发过程中，都有了很大的进步。

从源码层面来说，运用Proxy替代Object.defineProperty的API，一个是代理的对象，一个是递归监控的属性，从而在性能上有了很大的进步，并且，也处理了对象动态属性增加、数组改动监听上的缺陷；对diff算法停止优化，增加了静态标志，大大进步了Vue的执行效率；还有静态提升、事情监听缓存等一系列提升效率的手腕。

从应用层面来说，主要的改动是将option API改成了composition API（组合式API），在业务中丢弃data、methods、生命周期函数隔分开的开发方式，使代码相关于业务有更强的聚合性，在代码开发、代码阅读、代码维护方面关于开发者都是愈加友好。

关于typescript有了更好的支持，我们晓得，关于大型的前端项目来说，运用typescript的类型校验，能使前端项目有更强的强健性，这也使得Vue3关于大型项目的开发提供了更强的质量保证。

2 组合式API
所谓的组合式API，将Vue2中的data、methods、生命周期、数据监听等option，都封装成钩子函数，然后组合到setup函数中，其中心就在于setup函数。setup函数存在的意义，就是为了运用这些新增的组合式API，并且这些API只能在setup函数中运用。

setup函数执行的机遇是，props初始化之后，beforeCreate函数执行之前，所以在执行setup时，还没有初始化Vue实例，因而在setup中不能运用this对象。setup函数的返回值会被注入到Vue实例中，供Vue组件运用，所以任何数据想在Vue组件的模板中运用，必需在setup函数中return进来。

组合式API的组合，表现在两个层面。第一层的意义是，将某一业务相关数据和处置逻辑放到一同，这是一种关注点的聚合，更便当我们编写代码、处置业务逻辑，并且能更聚焦业务逻辑，更便当我们看代码。第二层面的意义，当某个组件的业务逻辑足够复杂，setup中的代码足够大的状况下，我们能够在setup内部，进一步提取相关的一块业务，使代码逻辑愈加明晰，做到了进一步的聚协作用。

如下面代码所示，将业务代码块A抽出来，则代码块A中return出来的数据就能够在组件中运用：

// 组件
import functionA from 'A'
export default defineComponent({
name: 'componentName',
setup() {
...functionA()
}
})
// 代码块A
export default () => {
return {
a: 1
}
}
3 响应式API
在Vue3中响应式API，主要表现在ref和reactive两个函数。关于响应式API，想说两个问题，第一个是为什么要增加响应式API，第二个是响应式API函数ref和reactive的异同点。

3.1 为什么增加响应式API
在Vue2中一切数据都写在data的option中，data中的数据都是响应式的，这样产生的一个问题是，有些常量数据自身不需求监听，从而形成了资源的糜费。所以在Vue3中增加了响应式API，只需求对需求动态更新dom的数据停止响应式，不需求动态更新dom的数据不停止响应式处置，从很大水平上俭省了资源。这里我觉得需求留意的是，写代码的时分一定要认真考虑一下，哪些数据需求停止响应式绑定，哪些数据不需求停止响应式绑定，而不是一股脑的全给绑定上，这样即便代码逻辑不能很明晰易懂，并且也会影响执行效率（写惯了Vue2的同窗需求留意）。

3.2 ref和reactive的异同点
在理解了为什么要增加响应式API后，我们发现Vue3提供了两个响应式API函数，ref和reactive。为什么会提供两个API呢？ 一个不就能够了吗？那么这两个API之间的区别是什么呢？

在运用层面，ref绑定的数据，需求运用[data].value停止数据更改。而reactive绑定的数据需求运用[data].[prpoerty]的方式停止数据更改。在运用场景方面，普通的，单个的普通数据，我们运用ref来定义响应式。而复杂数据，如：表单数据对象、某一模块的一组数据等，运用reactive来定义响应式。

那么，对象是不是必需用reactive来定义呢？ 其实不是的，都能够。官方说法是：能够依据本身习气运用不同的API。其实，我觉得，他们是有各自的运用场景的，ref更强调的是数据Value的改动，reactive更强调的是数据中某一属性的改动。

4 treeShaking思想
当 Javascript 项目到达一定体积时，将代码分红模块会更易于管理。但是，当这样做时，我们最终可能会导入实践上未运用的代码。Tree Shaking 是一种经过消弭最终文件中未运用的代码来优化体积的办法。

Vue3运用了tree shaking的办法，将组件以及其一切的生命周期函数等办法停止分开，假如在组件中运用的代码将不会呈现在最终的打包文件中，如此，会减少大大Vue3项目的打包体积。由此形成的一个结果就是，运用办法的不同。

4.1 生命周期函数的运用办法

import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 处置业务，普通停止数据恳求
})
return {
counter
}
}
})
4.2 Vuex的运用办法
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。
return {
counter,
storeData
}
}
})
4.3 Router的运用办法
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
return {
counter,
onClick
}
}
})
5 关于Typescript的运用
这一局部是关于Ts的内容，不过它与Vue3的开发息息相关。Vue3整体是运用Ts写的，因而，开发Vue3的项目需求运用Ts，所以，我们还是要理解TS的。

关于Ts的运用这里就不在细说了，在这里想说的的是，在实践业务场景中是如何组织Ts代码的。经过对TS的大量运用，我的一个领会是：Ts的中心思想是先关注数据构造，在依据数据构造停止页面开发。而以前的前端开发形式是，先写页面，然后再关注数据。

比方说，我们要开发一个页面，我们可能需求先定义一些interface。开发页面的时分我们要关注：页面数据的interface、接口返回数据的类型、恳求参数的类型等等。