您现在的位置是:首页 >学无止境 >VUE3的setup函数网站首页学无止境

VUE3的setup函数

勤奋上进的兔子 2023-05-16 08:00:02
简介VUE3的setup函数


前言

Vue3是一个面向数据驱动的渐进式JavaScript框架,其的设计理念包括简洁、灵活和高效。相比Vue2,Vue3的架构设计有很大的不同,其中包括响应式系统的重写、虚拟DOM的改进以及Composition API 的引入等等。Vue3的性能得到了显著提升,同时也提供了更多的优化选项,例如Tree-Shaking和Teleport组件等。

同时,Vue3也更好地支持TypeScript,并且推出了一些新的API和全局指令,使得开发更加方便和灵活。Vue3的出现对企业级开发和前端开发者都具有一定的意义和价值。


一、setup函数是什么?

在Vue3中,setup函数是一个新特性,用于编写组件逻辑。它是Composition API 的一部分,用于解决Vue2中一些复杂组件难以维护和理解的问题。通过使用Vue3的setup函数,可以更好地组织代码,提高代码可读性和可维护性。

setup函数在组件实例化时执行,该函数会先于beforeCreate钩子函数执行。在setup函数中,我们可以使用诸如ref、reactive等API来声明响应式数据,并且还可以使用computed、watch等API定义计算属性和监听响应式数据的变化。

此外,在setup函数中还可以定义需要暴露给模板的数据或方法,这些数据和方法都可以直接在模板中使用。

需要注意的是,setup函数在组件实例化之前就已经运行,而且所有的响应式数据都是在创建组件之前被创建的,因此在setup函数中不能访问this。另外,props也是响应式数据,但在setup函数中无法直接访问props,需要通过参数传入。

二、使用步骤

<template>

       <div>
           <p>count: {{ count }}</p>
           <el-button type="danger" @click="increment">危险按钮</el-button>
           <el-button type="danger" @click="fetchData">测试axios</el-button>
       </div>



</template>

<script>
    // 在Vue3中,ref是一个响应式数据类型,用于声明一个普通类型的数据,
    // 并且可以在模板中以响应式的方式使用。
    // ref将基础类型的数据(如数字、字符串等)
    // 转换为一个带有.value属性的响应式对象,在更新数据时需要修改.value属性的值。
    import { ref } from 'vue';
    // 根据实际路径引入 Axios 实例
    import axios from '@/utils/axios';
    export default {
        name: "TestPage",
        /*vue2 使用data+created
        * vue3可以 使用setup等价于data+created
        * */
        setup() {
            // 声明响应式数据
            const count = ref(0);

            // 定义需要暴露给模板的方法
            const increment = () => {
                count.value++;
            };
            let fetchData=()=>{
                axios.get('/data')
                    .then(response => {
                        // 处理响应数据
                        console.log(response.data);
                    })
                    .catch(error => {
                        // 处理错误
                        console.error(error);
                    });
            };


            // 返回一个包含需要暴露给模板的数据或方法的对象
            return {
                count,
                increment,
                fetchData,
            };
        }

    }
</script>

<style scoped>

</style>

三、vue3中文文档和面向vue3的组件库

中文文档简介 | Vue.js

组件库面向 Vue3 的 Material 风格移动端组件库


总结

待补充

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。