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
对象和Reflect
API来实现响应式系统。这使得Vue 3能够更精确地追踪数据变化,并提高了性能。 - 在vue3官方文档的代码示例中,vue3与vue2的脚本script和模板template的位置进行了调整,但是如果已习惯了vue2的写法,仍然可按照以前的位置进行编写(如上面vue3代码的顺序)
- vue3中模板template不再要求唯一根元素啦
vue3和vue2的更多差异将会撰写新的博客进行详细归纳~