Vue3+TypeScript系列笔记
5.编写第一个Vue3.0组合式组件
由vue2的选项式入手，推出vue3的组合式
根组件App.vue代码如下：
<template>
<Person/>
</template>
<script lang="ts">
//import Person from './components/Person_Options.vue'
import Person from './components/Person.vue'
export default{
name:'App',
components:{
Person}
}
</script>
<style>
</style>
5.1回顾vue2的选项式写法
以组件Person_Options.vue为例，简单回顾vue2的选项式写法
<template>
<div class="person">
<h3>姓名：{
{ name }}</h3>
<h3>年龄：{
{ age }}</h3>
<h3>电话：{
{ tel }}</h3>
<h3>简介：{
{ introduction }}</h3>
<button @click="changeAge">修改年龄</button>
<button @click="showIntroduction">修改简介</button>
</div>
</template>
<script lang="ts">
export default{
name:'Person',
data() {
return{
name:'nomi糯米',
age:20,
tel:'18888888888',
introduction:''
}
},
methods:{
changeAge(){
this.age += 1
console.log(this.age)
},
showIntroduction(){
this.introduction = "大声喊出超喜欢！(^ ~ ^)"
console.log(this.introduction)
}
}
}
</script>
<style scoped>
.person{
width: 500px;
margin: 0 auto;
border:solid #006effc1 2px;
box-shadow: #006effc1 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button{
width: 80px;
border: none;
color: #fff;
background-color: #006effc1;
border-radius: 40px;
padding: 5px;
margin: 0 5px;
}
</style>
vue2中是Options类型的API(选项式API):数据、方法、计算属性等都分散在data,methods,computed…中，如果想要新增，修改或删除一个方法，就需要分别去寻找并修改data,methodes,computed等等，如果一个项目较为庞大，数据，方法等较多就不便于维护和复用
5.2编写第一个Vue3.0组合式组件
如果不熟悉Vue2的小伙伴可以跳过5.1从此处开始阅读
Composition API（组合式API）是Vue 3新增的：组合式API是Vue 3中引入的一种新的编程模式，它提供了一种更灵活、更高效的方式来组织和复用代码。相比于Vue 2中的选项式API，组合式API通过引入setup函数，使得开发者能够更直观地组织和复用代码。官方和社区普遍推荐的是使用组合式API，所以此笔记后续的篇幅将以组合式API进行展开和深入。
以组件Person.vue为例
<template>
<div class="person">
<h3>姓名：{
{ name }}</h3>
<h3>年龄：{
{ age }}</h3>
<h3>电话：{
{ tel }}</h3>
<h3>简介：{
{ introduction }}</h3>
<button @click="changeAge">修改年龄</button>
<button @click="showIntroduction">修改简介</button>
</div>
</template>
<script lang="ts">
export default{
name:'Person',
setup(){
//vue3中setup函数中的this是undefined,vue3已经弱化this了
console.log(this)
//数据：
/*在vue2中是写在data中的，现在是直接定义了变量，
但是此时的name,age,tel,introduction都不是响应式的数据
*/
let name = 'nomi糯米';
let age = 20;
let tel = '18888888888';
let introduction = '大声喊出超喜欢！';
//方法:
/*F12打开console查看输出结果
我们发现点击后，现在age的值在控制台中已经发生了变化
但是页面却并没有变化
因为方法中的age现在也不是响应式的
下面的showIntroduction是一样的
*/
function changeAge(){
age += 1
console.log(age)
}
function showIntroduction(){
introduction = "大声喊出超喜欢！(^ ~ ^)"
console.log(introduction)
}
//在这里先将数据、方法交出去，模板中才可以使用
return{
name,age,tel,introduction,changeAge,showIntroduction}
}
}
</script>
<style scoped>
.person{
width: 500px;
margin: 0 auto;
border:solid #006effc1 2px;
box-shadow: #006effc1 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button{
width: 80px;
border: none;
color: #fff;
background-color: #006effc1;
border-radius: 40px;
padding: 5px;
margin: 0 5px;
}
</style>
项目运行效果：
在vue3中，我们发现在script中使用了setup()函数来实现了第一个组合式API的编写,现在在setup中包含了原有的data和method等数据，这些数据和方法都是在setup中定义返回的，我们先使用return将这些数据、方法一起交出去。模板中才可以使用这些对象。但是这种直接赋值的写法无法做到数据的响应式，现在的changeAge()和showIntroduction()点击后发生变化的值仍然无法响应到页面。
所以在后续的笔记中，会介绍Vue3中实现数据响应式的四种方法：reactive()、toRef()、toRefs()和ref()。并且通过示例代码详细展示如何使用这些方法创建响应式数据，以及它们在实际应用中的区别和使用场景。
5.3 选项式与组合式的区别
上面知道了vue3组合式组件的实现方法，在这里绘制了一张图来清晰展示选项式与组合式组件的区别
小结
- 组合式API是Vue 3中引入的一种新的API风格，它提供了一种更灵活的方式来组织和重用组件逻辑
- 脚本script使用setup函数支持组合式API
- vue3中setup函数中的this指向是undefined,vue3已经弱化了this，所以取值的时候不能使用this
扩展
- Vue 2和Vue 3是Vue.js框架的两个主要版本，虽然vue3也提供了响应式的API风格，但是它们在多个方面存在显著的区别。
- 在Vue 2中，响应式系统主要依赖JavaScript的
Object.defineProperty()方法来劫持对象的属性访问器（getter和setter）。 - 在Vue 3中，为了解决Vue 2中存在的一些限制，如不能检测数组索引和长度的变化、不能检测对象属性的添加或删除，Vue使用了JavaScript的
Proxy对象和ReflectAPI来实现响应式系统。这使得Vue 3能够更精确地追踪数据变化，并提高了性能。 - 在vue3官方文档的代码示例中，vue3与vue2的脚本script和模板template的位置进行了调整，但是如果已习惯了vue2的写法，仍然可按照以前的位置进行编写(如上面vue3代码的顺序)
- vue3中模板template不再要求唯一根元素啦
vue3和vue2的更多差异将会撰写新的博客进行详细归纳~