本文共 2157 字，大约阅读时间需要 7 分钟。

Setup是VUE3.0中为我们新提供的的组件选项。

创建组件实例，然后初始化props，紧接着就调用setup函数，从生命周期钩子的视角来看，他在beforecreate之前调用。

setup()是函数，具有return，return函数中定义的变量，把其暴露给模板。

一：setup

1：Setup可以替代VUE2中的data和method函数。

（1）：使用VITE创建一个空项目，默认会给我们一个helloworld组件，我们使用这个组件做测试。

项目搭建，请移步《》

上代码，这里大概展示一下VUE3的新写法

Helloworld.vue

<template>  <h1>{   {    msg }}</h1>  <button @click="count++">count is: {   {    count }}</button>  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>  <button @click="clickMe()">点我弹窗</button></template> <script lang='ts'>import {       ref,} from "vue";export default {     name: 'HelloWorld',  props: {       msg: String  },  // 使用setup 代替 data  // 因为我这里使用的是typescript，因此需要给参数指定类型  setup(props:any,context:any){       let count = ref(0);     const clickMe = () => {         // 使用ref关键字绑定的变量，赋值 的时候必须使用.value      count.value++;      alert('hi');    }    return {         count,      clickMe    }  },//*/   // 这是VUE2.0的写法，data与methods  /*data() {       return {         count: 0    }  },  methods:{       clickMe(){         alert('hi');    }  }//*/}</script>

2：setup的两个参数（prpos，context）

关于setup的参数，官方文档有详尽的介绍，具体，请参照：

https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数

（1）：prpos

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

这个就是父组件传入子组件的参数。具体，请参照上方的代码。

看到这里，其实你可以停下来，自己搭建一个项目试一下。

（2）：context

这个参数名称不是固定的，叫什么都行。

传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {     setup(props, context) {       // Attribute (非响应式对象)    console.log(context.attrs)     // 插槽 (非响应式对象)    console.log(context.slots)     // 触发事件 (方法)    console.log(context.emit)  }}

这里我只用到了emit（触发事件），这个可以用作将子组件的值传递给父组件。具体我们之后组件那部分再说。

3：setup中没有办法访问到this。

this在setup中不可用，方法和声明周期都可以写在setup中，如果在方法中访问setup中的变量时，直接变量名就可以使用。方法名和变量名要在setup中return出去才可以正常执行。

4：setup()是函数，具有return，return函数中定义的变量，把其暴露给模板。

具体，请参见第一部分的示例代码

二：ref关键字

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

一定要注意，ref创建的是一个响应式数据。这个在VUE3.0中非常灵活，几乎是怎么玩都行的。具体后边还会说到，这里大概说一下基本用法。

1：引入ref

import {       ref,} from "vue";

2：使用注意点

在 VUE 的模板中使用 ref 的值不需要通过 value 获取 （Vue 会通过自动给 ref 的值加上 .value）

在 js 中使用 ref 的值必须使用 .value 获取

上方代码实现效果：

有好的建议，请在下方输入你的评论。

欢迎访问个人博客

欢迎访问小程序：

转载地址：http://qmhwz.baihongyu.com/