编写第一个Vue3.0组合式组件

nomi-糯米

已于 2024-08-08 10:25:27 修改

阅读量1k

点赞数 28

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

于 2024-08-07 08:00:00 首次发布

本文链接：https://blog.csdn.net/cute_neko/article/details/140969473

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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的更多差异将会撰写新的博客进行详细归纳~

往期文章：
Vue3项目创建及项目结构分析
 编写并分析Vue3.0的入口文件和根组件