首页 > 资讯 > 前端开发 > JavaScript >前端vue3 setup使用教程

629

分享到

前端vue3 setup使用教程

2024-04-02 19:04:59 629人浏览泡泡鱼

摘要

目录1、简单使用2、修改 setup 中的变量值3、setup 形式下的父子组件通信3.1、父传子3.2、子传父3.2.1、子组件调用父组件方法3.2.2、子组件向父组件传递数据&n

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

1、简单使用

先简单写一下看看效果

笔者这里使用新建的 vue3 项目，直接在 App.vue 上进行修改

<template>
  <div>{{name}}</div>
</template>
 
<script>
export default {
  setup() {
    return {
      name: "泪眼问花花不语，乱红飞过秋千去"
    }
  }
}
</script>

原来写在 data 中的 name，在 setup 中需要 return 返回

运行效果

2、修改 setup 中的变量值

先看下面代码，再说在 setup 中如何修改

<template>
  <div>
    {{name}}
    <button @click="change">修改</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    let name = "泪眼问花花不语，乱红飞过秋千去"
    function change() {
      name = "人生自是有情痴，此恨不关风与月"
    }
    return {
      name,
      change
    }
  }
}
</script>

按照常规逻辑，修改 setup 中的 name，会自然地写出上面的代码

但是这段代码是不能完成 name 值的修改的，看运行效果

为什么 name 值没有改变呢？因为上面代码中 name 是非响应式的

如果想要修改 name 值，就需要把它改成响应式的，代码如下

<template>
  <div>
    {{name}}
    <button @click="change">修改</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    let name = ref("泪眼问花花不语，乱红飞过秋千去")
    function change() {
      name.value = "人生自是有情痴，此恨不关风与月"
    }
    return {
      name,
      change
    }
  }
}
</script>

使用 ref 对 name 进行包装

修改时使用 变量名.value 的语法

运行效果

除了使用 ref 外还可以使用 Reactive ，二者都可以将原始数据类型转换成一个带有响应式特性的数据类型

ref 和 reactive 有什么区别，ref 一般处理基本类型；reactive 处理复杂的数据类型

reactive 使用代码

<template>
  <div>
    {{nameObj.name}}
    <button @click="change">修改</button>
  </div>
</template>
 
<script>
import {reactive} from 'vue'
export default {
  setup() {
    let nameObj = reactive({name: '今年花胜去年红。可惜明年花更好，知与谁同'})
    function change() {
      nameObj.name = "离愁渐远渐无穷，迢迢不断如春水"
    }
    return {
      nameObj,
      change
    }
  }
}
</script>

运行效果

3、setup 形式下的父子组件通信

代码写成 setup 形式，如何实现父子组件通信，下面介绍

3.1、父传子

在 components 目录下新建 Article.vue 作为子组件

Article.vue 内容

<template>
  <div>
    {{msg}}
    {{info}}
  </div>
</template>
 
<script>
export default {
  props:['msg'],
  setup(props) {
    console.log(props.msg)
 
    return {
      info:props.msg
    }
  }
}
</script>

在 setup 方法内使用 props 来接收父组件传过来的数据

App.vue 为父组件

在 App.vue 中引入 Article.vue

<template>
  <div>
    <Article :msg="name"></Article>
  </div>
</template>
 
<script>
import Article from '@/components/Article.vue' 
export default {
  components: {
    Article
  },
  setup() {
    return {
      name: '渐行渐远渐无书，水阔鱼沉何处问'
    }
  }
}
</script>

运行效果

3.2、子传父

3.2.1、子组件调用父组件方法

Article.vue 内容

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子组件向父组件传递数据</button>
  </div>
</template>
 
<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    function sendToParent() {
      content.emit('change')
    }
    return {
      sendToParent
    }
  }
}
</script>

使用 setup 方法中 content 参数中的 emit

App.vue 内容

<template>
  <div>
    <Article :msg="name" @change="changeName"></Article>
  </div>
</template>
<script>
import Article from '@/components/Article.vue' 
export default {
  components: {
    Article
  },
  setup() {
    function changeName() {
      alert('父组件事件被调用')
    }
    return {
      name: '渐行渐远渐无书，水阔鱼沉何处问',
      changeName
    }
  }
}
</script>

运行效果

3.2.2、子组件向父组件传递数据

子组件向父组件传递数据，父组件修改数据

Article.vue 内容

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子组件向父组件传递数据</button>
  </div>
</template>
<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    let newName = '群芳过后西湖好，狼籍残红。飞絮濛濛。垂柳阑干尽日风'
    function sendToParent() {
      content.emit('change', newName)
    }
    return {
      sendToParent
    }
  }
}
</script>

App.vue 内容

<template>
  <div>
    <Article :msg="name" @change="changeName"></Article>
  </div>
</template>
<script>
import Article from '@/components/Article.vue' 
import {ref} from 'vue'
export default {
  components: {
    Article
  },
  setup() {
    let name = ref('渐行渐远渐无书，水阔鱼沉何处问')
    function changeName(msg) {
      name.value = msg
    }
    return {
      name,
      changeName
    }
  }
}
</script>

App.vue 中的 name 要修改，所以使用 ref 包装

运行效果

4、setup 中使用生命周期函数

在 setup 里，生命周期钩子前面加上 “on” 来访问组件的生命周期钩子

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们

setup 内部调用生命周期钩子

代码示例

<template>
  <div></div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue"
export default {
  setup() {
    onBeforeMount(()=>{
      console.log('onBeforeMount')
    })
    onMounted(()=>{
      console.log('mouted')
    })
    return {}
  }
}
</script>

运行效果

以上就是前端vue3架构setup使用教程的详细内容，更多关于vue3 setup教程的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 前端vue3 setup使用教程

本文链接: https://www.lsjlt.com/news/139775.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

前端vue3 setup使用教程

目录1、简单使用2、修改 setup 中的变量值3、setup 形式下的父子组件通信3.1、父传子3.2、子传父3.2.1、子组件调用父组件方法3.2.2、子组件向父组件传递数据&n...

99+

2022-11-13
前端vue3的setup如何使用

本文小编为大家详细介绍“前端vue3的setup如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端vue3的setup如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。vue3 中新增了 setup...

99+

2023-06-29
vue3:setup语法糖使用教程

目录1.setup语法糖简介2.setup语法糖中新增的api2.1defineProps2.2defineEmits2.3defineExpose补充：与普通的script一起使用...

99+

2022-11-13
详解Vue3中setup函数的使用教程

目录vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量setup 创...

99+

2022-11-13
怎么使用vue3的setup()

本篇内容主要讲解“怎么使用vue3的setup()”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用vue3的setup()”吧!从 vue2 升级到 vue3，vue3 是可以兼容 vue...

99+

2023-06-25
vue3使用vuex实现页面实时更新数据实例教程(setup)

目录前言1.项目引入vue2.main.js引入vuex3.新建store文件夹3.在传输数据的页面引入vuex (api.js)4.渲染页面总结前言我项目中使用ws获取数据，因为...

99+

2022-11-13
vue3在setup中使用mapState解读

目录vue3 setup使用mapState创建一个hookvue3 setup语法糖中使用mapState在setup函数中使用在setup语法糖中使用总结vue3 setup使用...

99+

2023-05-16

vue3 setup setup使用mapState 使用mapState
怎么在vue3中使用setup、 ref、reactive

本篇文章为大家展示了怎么在vue3中使用setup、 ref、reactive，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1.初识setUp的使用简单介绍下面的代码功能：使用ref函数，去使用监听...

99+

2023-06-15
vue3中的setup函数如何使用

这篇文章主要讲解了“vue3中的setup函数如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3中的setup函数如何使用”吧！概述一、初识setup函数 ...

99+

2023-06-30
Vue3 - setup script的使用体验分享

目录前言使用导出变量&方法使用组件使用props - defineProps使用emits - defineEmit使用context - useContext指令总结前言 ...

99+

2022-11-13
关于vue3中setup函数的使用

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

99+

2022-11-13
vue3中如何使用setup、 ref和reactive

1.初识setUp的使用简单介绍下面的代码功能：使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。setUp函数是组合API的入口函数。这个是非常重要的。setUp可以去监听变量的变化哈！我们将会利用它ref 在vue中内置...

99+

2023-05-16

Vue3 reactive setup
如何在vue3中使用setup、 ref、reactive

1.初识setUp的使用简单介绍下面的代码功能：使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。setUp函数是组合API的入口函数。这个是非常重要的。setUp可以去监听变量的变化哈！我们将会利用它ref 在vue中内置...

99+

2023-05-14

Vue3 reactive setup
vue3中的setup使用和原理解析

目录1.前言2.setup3.源码分析setupStatefulComponent执行setup函数 finishComponentSetup4.总结1.前言最近在做vu...

99+

2022-11-13
vue3基于script setup语法$refs的使用

目录一、vue2语法二、vue3使用1. 组件设置ref值2. 组件实例获取3. 子组件内设置对外公开的变量一、vue2语法 vue2语法在组件上设置ref属性后，在代码里可以通过 ...

99+

2022-11-12
怎么在vue3中使用setup、 ref和reactive

本文小编为大家详细介绍“怎么在vue3中使用setup、 ref和reactive”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么在vue3中使用setup、 ref和reactive”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入...

99+

2023-07-06
vue3中setup()和reactive()函数怎么使用

<template> <ul> <li v-for="(item, index) in arr" :key="item" @click="...

99+

2023-05-19

Vue3 setup() reactive()
使用Vue3+ElementPlus前端实现分片上传的全过程

目录1. 什么是分片上传2. 上传组件模板3. 上传组件逻辑3.1 基本思路3.2 选择上传文件3.3 校验文件是否合法3.4 文件加密3.5 合并文件3.6 文件切片上传...

99+

2022-11-13

vue3 elementplus分片上传前端文件上传 vue3 elementplus上传
Vue3中的script setup语法糖怎么使用

这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获，下面我们一起来看看吧。scr...

99+

2023-07-04
Vue3 使用axios拦截器打印前端日志

目录一、前言二、使用axios拦截器打印前端日志一、前言很多时候我们需要对前端进行调试，也就是前后端接口之间交互的调试，常用的方式肯定是打日志了，如console.log ('日志...

99+

2022-11-12