【Vue3】setup

已于 2022-06-16 13:28:52 修改
阅读量933 收藏 5
点赞数 1
分类专栏： Vue 笔记 文章标签： vue.js javascript 前端
于 2022-02-15 20:21:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_H/article/details/122951556
版权

setup

  • setup 是一个方法，组件中所用到的 [数据]、[方法] 均要配置到 setup 中

    返回 [对象]：对象中的 [属性]、[方法] 均可在模板中直接使用

    返回 [渲染函数]：可自定义渲染内容（了解）

<template>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ showAge() }}</h2>
    <h2>特长：<button @click="selfIntroduction">说话</button></h2>
</template>

<script>
export default {
    name: 'App',
    setup() {
        let name = "superman"
        function showAge() {
            return 21
        }
        function selfIntroduction() {
            console.log(`我是${name}，我今年${showAge()}岁了`);
        }
        return { name, showAge, selfIntroduction }
    }
}
</script>

<template></template>

<script>
import { h } from "vue"; // 引入渲染函数 h
export default {
    name: "App",
    setup() {
        // 渲染函数接收 2 个参数：[渲染的标签元素]、[标签元素的内容]
        return () => h("h1", "渲染内容");
    },
};
</script>

注意事项

  • Vue3 兼容 Vue2 的语法，但不推荐混着使用

    • 在 Vue2 配置 (data、methods、computed…) 中，可以获取 Vue3 (setup) 中的数据 (属性、方法)

      但在 Vue3 配置 (setup) 中，无法获取 Vue2 (data、methods、computed…) 中的数据 (属性、方法)

    • 如有重名，setup 优先！

<template>
    <h1>vue2</h1>
    <h2>{{ vue2_name }}</h2>
    <h2>{{ age }}</h2>
    <button @click="vue2_get_data">{{ show_vue2() }}</button>
    <hr>
    <h1>vue3</h1>
    <h2>{{ vue3_name }}</h2>
    <h2>{{ age }}</h2>
    <button @click="vue3_get_data">{{ show_vue3() }}</button>
</template>

<script>
export default {
    name: 'App',
    // Vue2 写法
    data() {
        return {
            vue2_name: "superman",
            age: 18
        }
    },
    methods: {
        show_vue2() {
            return "Vue2";
        },
        vue2_get_data() {
            console.log("vue2_property", this.vue2_name);
            console.log("vue3_property", this.vue3_name);
            console.log("vue2_function", this.show_vue2());
            console.log("vue3_function", this.show_vue3());
        }
    },
    // Vue3 写法
    setup() {
        let vue3_name = "superman"
        let age = 21
        function show_vue3() {
            return "Vue3";
        }
        function vue3_get_data() {
            console.log("vue3_property", vue3_name);
            console.log("vue2_property", this.vue2_name);
            console.log("vue3_function", show_vue3());
            console.log("vue2_function", this.show_vue2());
        }
        return { vue3_name, age, show_vue3, vue3_get_data }
    }
}
</script>
  • setup 不能是一个 async 函数（后期可以配合 Suspense 标签元素使用，此时 setup 可以是 async 函数）
    因为 async 函数的返回值不再是 return 的对象，而是 Promise 实例，模版会找不到 return 对象中的属性
  • setup 中的数据不是 [响应式] 的：即使数据被修改了，页面也不会更新
<template>
    <p>{{ name }}</p>
    <p>{{ showName() }}</p>
    <button @click="changeData">点击修改</button>
</template>

<script>
export default {
    name: "App",
    setup() {
        let name = "superman";
        function showName() {
            return name;
        }
        function changeData() {
            console.log("oldName", name);
            name = "superwoman";
            console.log("newName", name);
        }
        return { name, showName, changeData };
    },
};
</script>

执行顺序

  • setup > beforeCreate，此时的 this === undefined
  • 如果想在 setup 中获取 this，可以通过 [事件] 异步获取
<template>
    <button @click="showThis">异步获取 this</button>
</template>

<script>
export default {
    name: "App",
    beforeCreate() {
        console.log("beforeCreate", this); // beforeCreate Proxy {…} —— (2)
    },
    setup() {
        console.log("setup", this); // setup undefined —— (1)
        function showThis() {
            console.log("showThis", this); // showThis Proxy {showThis: ƒ} —— (点击)
        }
        return { showThis };
    },
};
</script>

setup 的参数

props

props - 接收父组件传递过来的数据
<template>
    <p>Father：{{ faMsg }}</p>
    <button @click="faMsg += '!'">change</button>
    <hr />
    <!-- 设置自定义属性，以传递数据 -->
    <Son :sonMsg="faMsg" />
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {
    name: "App",
    components: { Son },
    setup() {
        let faMsg = ref("superman");
        return { faMsg };
    },
};
</script>

<template>
    <p>Son：{{ sonMsg }}</p>
    <button @click="sonMsg += '!'">change</button>
</template>

<script>
export default {
    name: "Son",
    props: ["sonMsg"], // 设置 props 属性，以接收数据
    setup(props) {
        // 参数 props：父组件传递过来的数据
        console.log("props", props); // Proxy {msg: 'superman'}
        console.log("props.sonMsg", props.sonMsg); // superman
    },
};
</script>
  • props 对象是响应式的 Proxy 对象
    就是说，传入新的 props 数据时，会更新子组件接收的数据，模版也会更新
  • 官方称，莫要解构 props 对象，会使其失去响应性（但我试了还是响应式的）
setup({ sonMsg }) {
    console.log("sonMsg", sonMsg); // superman
},

context

context - 上下文对象；有 attrs、emit、slots、expose 共 4 个属性
  • attrs、emit、slots 分别等同于 Vue 实例的 $attrs、 $emit 和 $slots 属性
  1. attrs 属性：用于 [兜住] 父组件传递给子组件的数据

如果组件没有设置 props 属性接收父组件传递的数据，则 context.attrs 会接收，此时可通过 context.attrs 获取数据
如果组件设置了 props 属性接收父组件传递的数据，则 context.attrs 不会接收，此时可通过 props 获取数据

<template>
    <p>父组件传递过来的数据：{{ msg }}</p>
</template>

<script>
export default {
    name: "Son",
    // 这里没有设置 props 属性接收父组件传递的数据
    setup(props, context) {
        // 参数 props
        console.log("props - ", props); // props -  Proxy {}
        // 参数 context
        console.log("context - ", context); // context -  {expose: ƒ}
        // context 的 attrs 属性
        console.log("context.attrs - ", context.attrs); // context.attrs -  Proxy {sonMsg: 'superman', …}
        return { msg: context.attrs.sonMsg }; // 通过 context.attrs 获取数据
    },
};
</script>
  1. emit：用于 [触发] 自定义事件，实现子组件到父组件的数据传递
<template>
    <p>父组件的数据：{{ msg }}</p>
    <hr />
    <!-- 设置自定义事件，以接收子组件的数据 -->
    <Son @showName="showFa" />
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {
    name: "App",
    components: { Son },
    setup() {
        let msg = ref("App");
        function showFa(val) {
            console.log("子组件传递过来的数据", val); // 子组件传递过来的数据 Son
            msg.value += val;
        }
        return { showFa, msg };
    },
};
</script>

<template>
    <button @click="show">点击设置自定义事件传递数据给父组件</button>
</template>

<script>
export default {
    name: "Son",
    setup(_, context) {
        function show() {
            // 触发自定义事件，以传递数据给父组件
            // 格式：context.emit("自定义事件名", 传递的数据)
            context.emit("showName", "Son");
        }
        return { show };
    },
};
</script>
  1. slots：用于获取插槽信息
<template>
    <Son>
        <!-- 设置默认插槽 -->
        <p>默认插槽内容</p>
        <!-- 设置具名插槽 -->
        <template v-slot:mySlot>
            <p>具名插槽内容</p>
        </template>
    </Son>
</template>

<script>
import Son from "./components/Son.vue";
export default {
    name: "App",
    components: { Son },
};
</script>

<template>
    <!-- 使用默认插槽 -->
    <slot>默认插槽的默认内容</slot>
    <!-- 使用具名插槽 -->
    <slot name="mySlot" />
</template>

<script>
export default {
    name: "Son",
    setup(_, context) {
        console.log("context.slots - ", context.slots); // context.slots -  Proxy {…, mySlot: ƒ, default: ƒ}
    },
};
</script>
  1. expose 方法：用于暴露子组件的数据给父组件
<template>
    <p>sonMsg：{{ sonMsg }}</p>
    <button @click="sonFun">sonFun</button> |
    <button @click="sonMsg += '(son)'">changeMsg</button>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
    name: "About",
    setup(props, context) {
        let sonMsg = ref("子组件数据");
        function sonFun() {
            console.log("子组件方法");
        }
        // 暴露子组件的数据、方法给父组件
        context.expose({
            sonMsg,
            sonFun,
        });
        return { sonMsg, sonFun };
    },
};
</script>

<template>
    <p>faMsg：{{ faMsg }}</p>
    <p>faMsg.sonMsg：{{ faMsg.sonMsg }}</p>
    <button @click="faFun">点击修改子组件数据</button>
    <hr />
    <!-- 给子组件设置 ref 属性，以接收子组件暴露的数据 -->
    <About ref="faMsg" />
</template>

<script>
import { ref } from "@vue/reactivity";
import About from "./views/About.vue";
export default {
    name: "App",
    components: { About },
    setup() {
        // 定义 ref 变量，变量名为子组件设置的 ref 属性值
        let faMsg = ref("父组件数据");
        // 通过事件异步操作子组件传递过来的数据、方法
        function faFun() {
            // 在父组件中修改子组件的数据
            faMsg.value.sonMsg += "(father)";
            // 在父组件调用子组件的方法
            faMsg.value.sonFun();
        }
        return { faMsg, faFun };
    },
};
</script>
  • 不能直接在父组件的 setup 方法中获取 faMsg.value.sonMsg，因为 setup 方法在 beforeCreate 之前执行，此时在 setup 方法内的 this 还是 undefined，元素也尚未挂载，所以尚未能获取 faMsg.value.sonMsg 的值
<template>
    <p>faMsg：{{ faMsg }}</p>
    <p>faMsg.sonMsg：{{ faMsg.sonMsg }}</p>
    <hr />
    <!-- 给子组件设置 ref 属性，以接收子组件传递过来的数据 -->
    <About ref="faMsg" />
</template>

<script>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import About from "./views/About.vue";
export default {
    name: "App",
    components: { About },
    setup() {
        // 定义 ref 变量，变量名为子组件设置的 ref 属性值
        let faMsg = ref("父组件数据");
        // 无法直接获取
        console.log("直接获取", faMsg.value.sonMsg); // undefined
        // 元素挂载完成之后，才能获取到 ref 对象的数据
        onMounted(() => {
            console.log("onMounted", faMsg.value.sonMsg);
            faMsg.value.sonFun(); // 调用子组件的方法
        });
        return { faMsg };
    },
};
</script>
JS.Huang
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue的setup函数
qq_42309685的博客
08-13 1万+
组合式API（setup） 作用：将同一逻辑关注点代码收集 setup 使用 setup 函数时，它将接受两个参数 props context Props props 是 setup 函数中的第一个参数，props 是用 Proxy 包裹的一个响应式数据，当传入新的 props时，它将被更新。 需要注意的是：因为 props 是响应式的，不能使用 ES6 结构，因为解构会消除 props 的响应性。 如果需要解构 props，可以在 setup 函数中使用 toRef 函数来完成此操作： i
vue3学习 setup，props，context
weixin_48789376的博客
07-28 8145
setup 函数 1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次 2、在setup中没有this , 打印返回undefined vue3里的生命周期： ① 可以和vue2里一样选项式写法，和setup平级， beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted ② 可以在setup里
Vue 3的组合式API中，setup()函数的两个参数：props和context。
lrbfly的博客
05-15 971
参数来获取组件的属性、非响应式属性、插槽和触发事件的方法。函数中访问组件实例、父组件属性、全局属性等。此代码有该AI 助手为您带来的，v信小程序：欢迎评论留言交流学习。对象来使用这些属性。这个参数在Vue 2中是通过。函数在组件初始化期间只会执行一次，并且在。对象提供了一些有用的属性和方法，用于在。对象包含了组件接收的属性。在上面的示例中，我们使用了。函数中通过解构或直接访问。下面是一个示例，展示了。语句返回一个响应式对象。，使其在组件中可用。
详细分析Vue3中组合式API（附Demo）
最新发布
码农研究僧的博客
05-18 1138
Vue 3 引入了组合式 API（Composition API），这是一个强大的新功能，与传统的选项式 API（Options API）相比，提供了更灵活、更易于复用的方式来组织和复用代码
vue3的setup的使用和原理解析
weixin_42974827的博客
09-24 2万+
在vue3中，新的setup函数属性给我们提供了书写的便利，其背后的工作量无疑是巨大的，有状态的组件的初始化的过程，在 setup 函数初始化部分我们讨论的源码的执行过程。
vue3 setup单文件组件中配置inheritAttrs
xuefeng11111的博客
11-27 6175
vue3使用setup单文件组件这种形式的时候，有的属性配置不能使用 这时需要进行配合普通的script进行配置 参考vue3官方文档：与普通的<script> 一起使用
vue-setup-mixins：vue-setup-mixins
02-15
Practice_s19-s20项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
基于Vite构建的Vue3 Setup语法+Element Plus的后台管理系统模版.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
Vue3 DevTools
05-18
Vue3 DevTools能很好地支持这一新特性，显示使用Composition API创建的函数和setup()中的数据。 4. **生命周期钩子**：开发者可以观察组件的生命周期事件，包括beforeCreate、created、beforeMount、mounted等，...
vue3 demo.zip
12-05
3. "vue3-basic-master"：这是一个基础的Vue3教程项目，涵盖了Vue3的核心概念，如setup函数、Composition API、生命周期钩子函数、ref和reactive等。开发者可以在此项目中逐步学习Vue3的基本用法和最佳实践。 4. ...
【vue3】组合式函数
zhaohb2016的博客
08-22 3575
vue3中提出了关于组合式函数的方法，与react中的hooks相同功能，比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
Vue3：组合式函数（引入外部ts文件，修改外部ts参数）
weixin_62364503的博客
09-19 6505
vue3中不在推荐使用mixins，在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，是现在更推荐的方式。在不使用mixins的情况下，外部js无法调用vue页面中参数，所以我们需要调用方法或者调用ts中的参数时。需要通过将参数和方法暴露出来。在外部的ts文件中我们可以使用vue的API，例如：onMounted,onUnmounted...
【Vue3】组合式函数
m0_48799309的博客
08-09 544
名字的由来：一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。组合式函数是指利用组合式API封装和复用携带状态的逻辑的函数（感觉有点像mixin，因为它会携带状态）描述：将一个图片接口封装成一个组合式函数，调用时需要提供地址和方式两种参数，获取到地址、响应状态和错误信息这三个数据。说白了：函数内部定义数据，内部处理出数据处理的逻辑，返回数据。②有状态逻辑函数：负责管理会随时间而变化的状态。
vue3 setup使用（详细）
热门推荐
冰雪为融的博客
05-10 5万+
官网vue3-setup 总结： 1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)） 2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined） 4、与模板一起使用：
React学习笔记(三)——组件
丸啊~
12-13 546
组件 组件我们可以理解为在UI界面上的你所能看到的每一块都可以看做一个组件。 定义组件 定义组件的话，现在常用的有两种方式： 1. React.Component React 的组件可以定义为 class 或函数的形式，如需定义 class 组件，需要继承 React.Component。 在 React.Component 的子类中有个必须定义的 render() 函数： class App extends React.Component { render() { return <h1&
Vue3新特性组合式API
weixin_41591628的博客
02-04 1116
什么是组合式 API？ 通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而，我们的经验已经证明，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要。 原来使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始..
Vue3 组合式函数Composables
秋秋小事
03-27 753
组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。我们可以把一些可以复用的逻辑封装成组合式函数放到js文件中，在vue文件中通过import来使用这些逻辑，使vue文件更瘦，逻辑更清晰。一个小栗子，// x、y为ref响应式的number类型return num;
Vue3 组合式 API
qq_40453972的博客
06-25 335
vue3入门
vue3 setup
11-04
Vue3中的`setup`是一个新的配置项，它是一个函数，用于配置组件中使用的数据、方法等等。在Vue3中，`setup`函数是在组件实例化之前执行的，它可以返回一个对象，这个对象中包含了组件中需要使用的数据、方法等等。与...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JS.Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值