Vue3 学习笔记 —— setup

最新推荐文章于 2024-08-13 16:04:45 发布

tanleiDD

最新推荐文章于 2024-08-13 16:04:45 发布

阅读量578

点赞数

分类专栏： Vue3 文章标签： vue

本文链接：https://blog.csdn.net/TL18382950497/article/details/116275626

版权

Vue3的setup函数是新引入的特性，它在组件创建时仅执行一次，返回的对象可以无缝融合到组件实例中。setup函数接收两个参数，'props'用于获取父组件传入的已声明属性，'context'包含未声明属性、emit（触发事件）和slots（插槽）等信息。

摘要由CSDN通过智能技术生成

setup

新的 option，仅在beforeCreate之前执行一次

  // setup 执行时，组件还没有开始创建，因此 this 为 undefined
  setup () {
   
    console.log('this in setup:', this)
  }

在这里插入图片描述

如果该函数返回对象，对象中的属性或方法，在模板中可以直接使用

<template>
  {
   {
   msg}}	// 此处使用
</template>

<script lang="ts">
import {
    defineComponent } from 'vue';

export default defineComponent({
   
  name:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tanleiDD

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3 setup 使用教程

m0_67393686的博客

03-06

1093

vue3 中新增了 setup，它的出现是为了解决组件内容庞大后，理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后，同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”，看代码时，经常需要根据 data 中的数据去搜索找到对应的 methods 方法，上下跳跃查看代码，非常不方便。而在 setup 中，则可以把 data 中的数据和 methods 方法写在相临的位置，方便查看和维护。本文详细介绍

Vue3.0学习笔记（一）

lijieling123的博客

05-28

108

学习视频中文文档仓库中文文档 P1 Vue 3性能比Vue 2快的原因：P2和P3节讲的 P2 diff算法 Vue2.0采用的全量比较，这样有一些不会改变的节点（如不绑定数据的）也会跟着去比较，这样效率就不高。Vue3.0将会改动的节点添加标记，这样就只比较有标记的，效率就高了静态标记的附录： P3 静态提升和监听缓存静态提升注：把不需要参与更新的元素放到外面静态提升之前：静态提升之后：监听缓存注：开启事件监听之后可以发现那个静态标记没有了，说明不会进行比较开启事件监听之前

2 条评论您还未登录，请先登录后发表或查看评论

Vue3中的Setup函数

最新发布

m0_51323460的博客

08-13

835

Setup是Vue3 的Composition API中的一个函数，它作为组件的入口点，提供了一种新的方式来组织组件的逻辑。setup函数在Vue 3的单文件组件（SFG）中使用，它允许开发者以更加灵活和声明性的方式编写软件。对于复杂的逻辑，可以创建自定义的组合函数，并将它们导入到中使用。// 在 <script setup> 中使用。

vue3.0 学习笔记

weixin_43452622的博客

02-27

371

vue3学习笔记vue3.0六大亮点vue3.0 如何变快的？ vue3.0六大亮点 performance：性能比vue2.0快1.2-2倍 tree shaking support：按需编译，体积比2.0更小 composition API：组合API（类似React Hokks） better typescript support：更好的ts支持 custom renderer API：暴露了自定义渲染API fragment，teleport（protal）suspense：更先进的组建 vue

vue3.0学习笔记

果冻

02-15

1178

完善中，后面会不间断更新。一、Vue 3.0六大亮点 1、performance：性能比vue2.x快1.2-2倍。 2、Treeshaking support：按需编译，体积比vue2.x更小。 3、Composition API（类似react Hooks）。 4.Better TypeScript support：更好的TS支持。 5、Custom Renderer API：暴露了自定义API。 6、Fragment，Teleport（Protal）,Supense：更先进的组件。二、Vue3.

Vue3.0学习笔记

fmk1023的博客

02-14

885

Vue3.0学习笔记

Vue3 学习笔记 —— 生命周期

叹之

05-02

703

目录结构如下： App.vue <template> <Child :count="count" v-if="isShow" @addCount="addCount"/> <button @click="isShow=!isShow">切换显示</button> </template> <script lang="ts"> import { defineComponent, ref} from 'vue'; impor.

Vue3 学习笔记 ——

m0_69940800的博客

05-04

229

*/ export default { name: ‘App’, setup() { const counter = ref(1000) // console.log(counter.value) const increment = () => { counter.value += 1; } const decrement = () => { counter.value -= 1; } // 必须 return，外部才能拿到值 return { counter, increment,decrem

Vue3 学习笔记 —— 自定义 hook

叹之

05-02

508

目录结构 Child.vue <template> x: {{x}} y: {{y}} </template> <script lang="ts"> import { defineComponent} from 'vue'; import useMousePosition from '../hooks/useMousePosition' export default defineComponent({ name: 'Child', setup() {.

Vue3 学习笔记 —— ref 和 reactive

叹之

05-02

476

ref 一般用来定义基础类型的响应式数据返回一个对象，通过.value访问定义的基础类型值在template中，不需要使用 .value <template> {{count}} // 在template中使用时，不需要 .value <button @click="addCount">加1</button> </template> <script lang="ts"> import { defineComponent, ref

VUE3.0学习实战笔记.rar

06-28

VUE3.0学习实战笔记

学习Vue3.0笔记

niepan990810的博客

03-28

2322

Vue3快速上手Vue3简介Vue3相对于Vue2多了些什么？1.性能的提升2.源码改变3.拥抱TS4.新特性（重点）快速上手Vue3工程创建标题 Vue3简介代号：One Piece(海贼王) Vue3相对于Vue2多了些什么？ 1.性能的提升根据官方文档描述，Vue3性能的提升提升主要包括以下几个方面：打包大小减少了41%。初次渲染55%，更新渲染快了133%。内存减少54%。 2.源码改变响应式的实现。之前我们知道Vue2的响应式是通过Object.definePropetry()

vue3.0学习笔记（一）

weixin_30612769的博客

05-21

145

一、搭建工作环境环境　　1、从node.js官网下载相应版本进行安装即可 https://nodejs.org/zh-cn/download/，安装完成后在命令行输入 node -v 如果可以查询到版本号，说明安装成功。　　2、node自带npm包管理工具，在命令行输入 npm -v 如果查询到版本号，说明正常　　3、npm下载太慢，需要下载国内淘宝镜像： npm install ...

Vue3.0学习笔记一

qq_39715380的博客

04-25

112

Vue3.0 学习和使用

Vue3 setup

且听风吟的博客

04-15

6145

setup Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。

vue3.0 学习笔记（三）

qq_45939795的博客

02-26

143

setup()和ref() 使用setup()和ref（）制作简单的tab切换首先定义好模板一个简单的tab切换完成了总结 setup 函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑卸载 setup 里就可以 ref 函数的使用，它是一个神奇的函数，我们这节只是初次相遇，要在template中使用的变量，必须用ref包装一下。 return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法。 reactive() 使用react

vue3 - setup

weixin_42910765的博客

07-13

494

1、vue3中的setup有什么用? setup的设计是为了使用组合式api 2、为什么不用之前的组件的选项 data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部...

vue3学习笔记尚硅谷

08-12

在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...