vue3中setup的作用及使用场景分析

更新时间：2024年11月07日 10:36:22 作者：shix .

本文主要介绍了Vue 3.0中的setup函数,包括其概述、使用场景和具体用法,通过本文的介绍,我们可以看到,setup函数是用来将组件的状态和行为进行分离的一个重要工具,感兴趣的朋友跟随小编一起看看吧

Vue 3.0中的setup函数是一个全新的选项，它是在组件创建时执行的一个函数，用于替代Vue2.x中的beforeCreate和created钩子函数。setup函数的作用是将组件的状态和行为进行分离，使得组件更加清晰和易于维护。
在本文中，我们将详细讲解setup函数的作用和使用方法，并提供代码示例来帮助读者更好地理解。

一、setup函数的概述

概念
setup函数是Vue 3.0新增的一个关键字，它是在组件创建时执行的函数。该函数接收两个参数：props和context。其中，props是一个对象，包含了组件接收到的所有props属性；context是一个对象，包含了一些与组件实例相关的属性和方法。在setup函数中，我们可以使用这两个参数来访问并设置组件的状态和行为。使用场景

声明响应式的数据和计算属性
注册事件处理函数
定义生命周期钩子函数
注册子组件
访问父级组件的属性和方法
访问路由和状态管理器等全局对象

二、如何使用setup函数

1.声明响应式的数据和计算属性
在setup函数中，我们可以像Vue 2.x中一样声明响应式的数据和计算属性。不过在Vue 3.0中，我们需要使用ref和computed函数来完成这些操作。

<template>
  <div>{{ count }}, {{ doubleCount }}</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
  name: 'Example',
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return {
      count,
      doubleCount
    };
  }
};
</script>

在上面的代码中，我们使用ref函数来声明一个响应式的count变量，并使用computed函数来创建一个计算属性doubleCount，该计算属性依赖于count变量。
2. 注册事件处理函数
在Vue 2.x中，我们可以在methods选项中定义一个事件处理函数。而在Vue 3.0中，我们可以在setup函数中使用普通的JavaScript函数来实现相同的功能。

<template>
  <button @click="increment">{{ count }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
  name: 'Example',
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
};
</script>

在上面的代码中，我们使用ref声明了一个响应式的count变量，并定义了一个名为increment的函数，在点击按钮时会将count变量的值加1。
3. 定义生命周期钩子函数
在Vue 2.x中，我们可以在created和mounted钩子函数中执行一些初始化操作。而在Vue 3.0中，我们可以在setup函数中使用onMounted和onUnmounted函数来实现相同的功能。

<template>
  <div>{{ message }}</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
  name: 'Example',
  setup() {
    const message = ref('');
    const intervalId = setInterval(() => {
      message.value += 'hello ';
    }, 1000);
    onMounted(() => {
      console.log('mounted');
    });
    onUnmounted(() => {
      console.log('unmounted');
      clearInterval(intervalId);
    });
    return {
      message
    };
  }
};
</script>

在上面的代码中，我们使用ref声明了一个响应式的message变量，并使用setInterval函数定时向该变量中添加字符串。在setup函数中，我们使用onMounted函数注册一个函数，在组件挂载时执行；使用onUnmounted函数注册一个函数，在组件卸载时执行。在本例中，我们在组件卸载时清除了定时器。
4. 注册子组件
在Vue 2.x中，我们可以使用components选项将子组件注册到父组件中。而在Vue 3.0中，我们可以在setup函数中使用普通的JavaScript函数来注册子组件。

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import Child from './Child.vue';
export default defineComponent({
  name: 'Example',
  components: {
    Child
  },
  setup() {
    return {};
  }
});
</script>

在上面的代码中，我们使用defineComponent函数定义了一个具有注册子组件能力的组件。在setup函数中，我们返回了一个空对象。
5. 访问父级组件的属性和方法
在Vue 2.x中，我们可以通过 p a r e n t 和 parent和 parent和emit等属性和方法来访问父级组件的属性和方法。而在Vue 3.0中，我们可以在setup函数中使用inject和provide函数来获取和提供属性。

<!-- parent -->
<template>
  <div>
    <Child :increment="increment" />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';
export default defineComponent({
  name: 'Example',
  components: {
    Child
  },
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    provide('increment', increment);
    return {
      count
    };
  }
});
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>
<script>
import { defineComponent, inject } from 'vue';
export default defineComponent({
  name: 'Child',
  props: ['increment'],
  setup() {
    const count = inject('count');
    return {
      count
    };
  }
});
</script>

在上面的代码中，我们使用provide函数提供了一个名为increment的函数，并在子组件中使用inject函数获取该函数。注意，在调用provide函数时，我们需要传递一个键值对，表示提供的属性和值的关系。
6. 访问路由和状态管理器等全局对象
除了访问父级组件的属性和方法之外，我们还可以在setup函数中访问其他全局对象，比如路由和状态管理器等。

<template>
  <div>{{ count }}</div>
</template>
<script>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
  name: 'Example',
  setup() {
    const count = ref(0);
    const route = useRoute();
    const router = useRouter();
    const navigate = () => {
      router.push('/');
    };
    return {
      count,
      route,
      navigate
    };
  }
};
</script>

在上面的代码中，我们使用useRoute和useRouter函数来访问路由相关的属性和方法。其中，useRoute函数返回了当前路由对象，包含了当前路由的路径、参数、查询参数等信息；useRouter函数返回了一个路由管理器对象，包含了一些常用的路由操作方法，比如push和replace等。在setup函数中，我们为组件提供了一个名为navigate的函数，用于跳转到主页。

三、总结

本文主要介绍了Vue 3.0中的setup函数，包括其概述、使用场景和具体用法。通过本文的介绍，我们可以看到，setup函数是用来将组件的状态和行为进行分离的一个重要工具。我们可以在setup函数中声明响应式的数据和计算属性、注册事件处理函数、定义生命周期钩子函数、注册子组件、访问父级组件的属性和方法，以及访问路由和状态管理器等全局对象。通过合理使用setup函数，我们可以使得组件更加清晰和易于维护。

到此这篇关于vue3中setup的作用及使用场景分析的文章就介绍到这了,更多相关vue3 setup作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3
setup

vue项目登录模块滑块拼图验证功能实现代码(纯前端)
滑块验证作为一种反机器人的工具,也会不断发展和演进,以适应不断变化的威胁,这篇文章主要给大家介绍了vue项目登录模块滑块拼图验证功能实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
vue+Element-ui实现分页效果实例代码详解
这篇文章主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
vue-quill-editor二次封装,实现自定义文件上传方式
这篇文章主要介绍了vue-quill-editor二次封装,实现自定义文件上传方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题
这篇文章主要介绍了vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题,解决方法很简单，只需要一行简短代码就可以解决，下面小编给大家详细讲解，需要的朋友可以参考下
2023-05-05
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
elementUI中el-upload文件上传的实现方法
ElementUI的组件支持多种事件钩子,如http-request、before-upload和on-change,以实现自定义文件上传处理,这篇文章主要介绍了elementUI中el-upload文件上传的实现方法,需要的朋友可以参考下
2024-11-11
Vue商品控件与购物车联动效果的实例代码
这篇文章主要介绍了Vue商品控件与购物车联动效果的实例代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-07-07
用Vue实现页面访问拦截的方法详解
大家在做前端项目的时候,大部分页面, 游客都可以直接访问 , 如遇到需要登录才能进行的操作,页面将提示并跳转到登录界面,那么如何才能实现页面拦截并跳转到对应的登录界面呢,本文小编就来给大家介绍一下Vue实现页面访问拦截的方法,需要的朋友可以参考下
2023-08-08
vue实现页面加载动画效果
这篇文章主要为大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
vue的基本用法与常见指令
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
2017-08-08