关于vue3中setup函数的使用

概述

一、 初识setup函数

组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使用。

这样的配置让对象式编程趋近于了函数式编程。

<script>export default {  name: 'App',  // 最为原始的对象写法是这样，但是通过es6我们可以简写  // setup: function(){}  setup () {    // 数据    let name = '黑猫几绛'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }  }}</script>

了解过Vue2响应式原理的话你可能会有疑问说，在这个地方name和age并不是响应式的。

的确如此，在这里我们仅仅是测试一下setup中是否可以放入数据与方法，响应式在后面的专栏文章中介绍。

如果此时未了解响应原理，可以看看我以前的一篇文章，这篇文章里有详细介绍

二、 关于setup的返回值

仅仅存放数据与方法还不够，我们需要将他们作为返回值返回出去，在模板中便可以直接使用。

<template>  <h1>我叫{{name}}，我今年{{age}}了</h1></template> <script>export default {  name: 'App',  // 最为原始的对象写法是这样，但是通过es6我们可以简写  // setup: function(){}  setup () {    // 数据    let name = '黑猫几绛'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }    return{      name,      age,      sayHello    }  }}</script>

在概述里面还介绍了setup的另外一种返回值，即返回一个渲染函数，这个函数的方法有一点像React.creatElement，可以自定义渲染的内容。

<script>import {h} from 'vue'export default {  name: 'App',  setup () {    // 在页面上渲染出一个h1标签    return ()=> h('h1', '黑猫几绛')  }}</script>

三、 关于setup的参数

# App.vue<template>  <Demo msg="hello" name="world" @hello="changeId">    <template v-slot:test>      摸鱼    </template>  </Demo></template>
# Demo.vue<script>export default {    name:'Demo',    props:['msg'],    setup(props,context){        console.log(props);        console.log(context.attrs);        console.log(context.slots);        console.log(context.emit);    }}</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • Vue3 - setup script的使用体验分享

    Vue3 - setup script的使用体验分享

    目录 前言 使用 导出变量&方法 使用组件 使用props - defineProps 使用emits - defineEmit 使用context - useContext 指令 总结 前言 Vue3已经发布很长一段时间了,相信大多数前端人都已经上手把玩过了,其中比较大的一个特性就是setup方法,可以让我们非常直观和方便的组合我们的业务逻辑和hooks.在setup里面返回的变量可以直接在template里面使用.大多数情况下,我们的大部分逻辑都集中在setup方法里面,所以官方提供了一个实

  • 强烈推荐!Vue3.2中的setup语法糖

    强烈推荐!Vue3.2中的setup语法糖

    目录 前文 1.什么是setup语法糖 2.使用setup组件自动注册 3.使用setup后新增API 3.1 defineProps 3.2 defineEmits 3.3 defineExpose vue3项目如何开启setup语法糖 总结: 前文 作为一个前端程序员,说起 Vue 3肯定不会陌生,作为时下最火的前端框架之一,很多人将它作为入门框架. 但是尽管 Vue 3很久之前就已经开始投入使用,也不免会有人抱怨 Vue 3的知识点太多太杂,更新太快.这不,最近 Vue 3又定稿了一项新技

  • vue3中setup-script的应用实例

    目录 新特性的产生背景 内部变量 子父级传值 总结 新特性的产生背景 在了解它怎么用之前,可以先了解一下它被推出的一些背景,可以帮助你对比开发体验上的异同点,以及了解为什么会有这一章节里面的新东西. 在 Vue 3.0 的 .vue 组件里,遵循 SFC 规范要求(注:SFC,即 Single-File Component,.vue 单组件),标准的 setup 用法是,在 setup 里面定义的数据如果需要在 template 使用,都需要 return 出来. 如果你使用的是 TypeScr

  • vue3更新的setup语法糖实例详解

    目录 前言 语法糖用法: 语法糖带来的体验 一.组件自动注册 二.属性及方法无需return 三.自动将文件名定义为组件的name属性 1.defineProps 2.defineEmits 3.defineExpose 总结 前言 vue3最近更新了一个setup语法糖,这两天才看到,使用起来雀食很甜,特发个帖子记录下 语法糖用法: // 将 `setup` attribute 添加到 `<script>` 代码块上 // 里面的代码会被编译成组件 `setup()` 函数的内容 // 就是

  • 前端vue3 setup使用教程

    前端vue3 setup使用教程

    目录 1.简单使用 2.修改setup中的变量值 3.setup形式下的父子组件通信 3.1.父传子 3.2.子传父 3.2.1.子组件调用父组件方法 3.2.2.子组件向父组件传递数据 4.setup中使用生命周期函数 vue3 中新增了 setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题.即 vue 中 data.computed.methods.watch 等内容非常多以后,同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”

  • vue3 setup() 高级用法示例详解

    vue3 setup() 高级用法示例详解

    目录 一.选项式API 和 组合式API 区别 二.setup 具体怎么用? 2.1.setup 什么时候执行? 2.2.setup 数据和方法如何使用? 2.3.setup 内部有 this 吗? 2.5.setup与钩子函数关系 三.setup 参数 3.1.props 3.2.context 四.setup 特性总结 本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量

  • vue3基于script setup语法$refs的使用

    vue3基于script setup语法$refs的使用

    目录 一.vue2语法 二.vue3使用 1. 组件设置ref值 2. 组件实例获取 3. 子组件内设置对外公开的变量 一.vue2语法 vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件. 一个设置ref值的组件: <base-input ref="usernameInput"></base-input> 在js代码中可以通过如下代码访问到这个组件: this.$refs.usernameInput 可以

  • Vue3中SetUp函数的参数props、context详解

    Vue3中SetUp函数的参数props、context详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&

  • 详解Vue3中setup函数的使用教程

    目录 vue2 和 vue3 开发的区别 使用 setup 原因 setup 用法 setup 可以接受哪些参数 setup 详解 setup 函数自动执行 setup 函数定义变量 setup 创建方法 动态更新数据 vue2 和 vue3 开发的区别 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由于还处于优化完善阶段,对于 vue3 开发项目的需求不是很高,主要还是以 vue2 开发为主,但是相信,vue3 进行项目开发是大势所趋. vue2 开发项目过程中,会存在代码冗余和结构

  • 关于vue3中setup函数的使用

    关于vue3中setup函数的使用

    概述 一. 初识setup函数 组件中所用到的:数据.方法等等均要配置在setup中,这也就意味着在Vue2中写的data.methods在这里都不再推荐使用. 这样的配置让对象式编程趋近于了函数式编程. <script>export default { name: 'App', // 最为原始的对象写法是这样,但是通过es6我们可以简写 // setup: function(){} setup () { // 数据 let name = '黑猫几绛' let age = 20 // 方法 f

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • VUE3中h()函数和createVNode()函数的使用解读

    VUE3中h()函数和createVNode()函数的使用解读

    目录 h()函数和createVNode()函数的使用 使用方法 VUE3中h方法和createVnode的实现 在公共包shared里写上ShapeFlags 在runtime-core模块里创建vnode.ts文件专门处理虚拟节点 为了后续的diff算法,我们要给这个虚拟节点上加一些属性和标识 h的用法 创建h.ts文件来写h方法 h()函数和createVNode()函数的使用 使用方法 h(标签, {属性},内容) h(标签, {属性},[可以继续嵌套h()]) createVNode(

  • vue3中setup语法糖下通用的分页插件实例详解

    vue3中setup语法糖下通用的分页插件实例详解

    目录 vue3中setup语法糖下父子组件之间的通信 准备工作 父传子: 子传父: 先给大家介绍下vue3中setup语法糖下通用的分页插件,内容如下所示: 效果 自定义分页插件:PagePlugin.vue <script setup lang="ts"> // total :用来传递数据总条数 // pageSize :每页展示几条数据 // currentPage :当前默认页码 // change-page :页码改变时触发的事件,参数为当前页码 const pro

  • vue3中h函数的常用使用方式汇总

    目录 前言 render VNode h 渲染组件 h函数中使用"v-model" 使用场景 总结 前言 一般情况下每个vue组件都用"<template>"写html, 但实际还可以在js代码中通过render函数生成dom. 最主要常见组件库也需要配合"h"使用. render render是组件的一个选项, 他的返回值会被作为组件的DOM结构. <script> import { defineComponent} f

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

随机推荐