vue3使用setup代替created

这篇具有很好参考价值的文章主要介绍了vue3使用setup代替created。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue2中的created可使用vue3中的setup()来代替。
setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method。
如果想要在页面创建时就执行方法,
vue2:

<script>
export default {
  components: {
  },
  data(){
    return{};
  },
  methods: {
    func1() {
        console.log("func1");
    },
  },
  created:{
    this.func1()  //注意vue3中已经不支持使用this.
  }
}
</script>

vue3:

<script>
  export default {
    setup() {
      const func1= () => {
        console.log("func1");
      }
      func1();  //因为setup()即相当于created:  所以直接调用就行了
      return {
      };
    },
  }
</script>
  

vue3使用setup语法糖:文章来源地址https://www.toymoban.com/news/detail-512174.html

<script lang="ts" setup>
  const func1= () => {
    console.log("func1");
  }
  func1();  //因为setup即相当于created:   
</script>

到了这里,关于vue3使用setup代替created的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 setup中使用$refs

    在 Vue 3 中的 Composition API 中, $refs 并不直接可用于 setup 函数。这是因为 $refs 是 Vue 2 的实例属性,而在 Vue 3 中, setup 函数是与模板实例分离的,不再使用实例属性。 实际工作中确实有需求,在 setup 函数使用$refs,下面有两种方法。 方案一:getCurrentInstance 方案二: ref 在这

    2024年02月12日
    浏览(23)
  • vue3之setup的基本使用

    setup是一个全新的配置项,值是一个函数,既然是配置项,是否与data、methods是兄弟? 没错,确实是兄弟关系,只不过到了vue3,就不怎么使用data这些配置项,会使用setup,让我为大家简单的介绍一下setup吧! setup是 Composition API ,组件中所用到的数据方法等等均配置在 setup 中

    2024年02月22日
    浏览(32)
  • vue3的setup的使用和原理解析

    最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用的阶段,但是setup带来哪些改变,以及ref,reactive这两api内部实现原理到底是什么,

    2024年02月02日
    浏览(28)
  • 在Vue3的setup中如何使用this

    在Vue2中,可以通过this来获取当前组件实例; 但是Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。 所以想要在Vue3中使用this, Vue为我们提供了getCurrentInstance()方法,这个方法返回了ctx和proxy。  1、概述:一个很重要的方法,获取当前组件的

    2024年02月12日
    浏览(42)
  • vue2对应的element ui使用的>>> 和 /deep/ 在vue3中被 :deep() 代替

    背景: 与同事合作开发过程中发现同事又学了新技能对组件样式进行强制修改,但是他用的时候控制台报错了,原因就是将vue2上兼容的使用方式用在了vue3中。下面我们一起来看看吧 一、系统控制台警告信息: 二、vue2和vue3中的使用情况概述: 在 Vue2 中 经常使用 或 /deep/ 样

    2023年04月25日
    浏览(23)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(32)
  • vue3自定义dialog createApp setup语法组件使用element

    目录  index.vue mapDialog.js

    2024年02月14日
    浏览(34)
  • vue3的setup函数中定义data数据,使用data数据

    vue3保留了vue2的语法,但是不能混着用,setup中定义原有vue2中data数据的方法有所改变 直接上代码 对比原有vue2代码 data() {             return {                 name: \\\"张三\\\",                 age:18             }     } 在setup函数中使用数据也无需 this.xxx, 而是用你定义的名字

    2024年02月12日
    浏览(29)
  • Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports

    当使用vue3+vite使用语法糖setup时,要注意写法. 第一种写法就是 script 标签里面配置 setup,另一种是:export default 类里配置 setup() 方法, 我们只需要使用一种方法即可,混用了就会报错了。 解决: 第一种 script setup import {ref} from \\\'vue\\\' import { Toast } from \\\'vant\\\'; import Index from \\\'../pag

    2023年04月08日
    浏览(39)
  • vue3 setup语法糖 使用组件内的路由守卫beforeRouteEnter使用方法

    由于beforeRouteEnter在setup语法糖中是无法使用的,所以需要再起一个script标签 使用defineComponent方式来使用就可以了

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包