vue3如何使用setup代替created

 更新时间:2023年09月13日 09:35:20   作者:CA-L  
Vue3中的setup是一个新的生命周期函数,它可以用来代替组件中的 data和一些生命周期函数(如created和beforeMount),这篇文章主要介绍了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语法糖:

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

总结 

到此这篇关于vue3如何使用setup代替created的文章就介绍到这了,更多相关vue3 setup代替created内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    这篇文章主要介绍了vue项目中导入swiper插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue项目请求超时处理方式

    Vue项目请求超时处理方式

    这篇文章主要介绍了Vue项目请求超时处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue中的总线机制(EventBus)解析

    vue中的总线机制(EventBus)解析

    这篇文章主要介绍了vue中的总线机制(EventBus),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 详解vue-cli开发环境跨域问题解决方案

    详解vue-cli开发环境跨域问题解决方案

    本篇文章主要介绍了vue-cli开发环境跨域问题解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • 详解Vue 普通对象数据更新与 file 对象数据更新

    详解Vue 普通对象数据更新与 file 对象数据更新

    本篇文章主要介绍了详解Vue 普通对象数据更新与 file 对象数据更新 ,具有一定的参考价值,有兴趣的可以了解一下。
    2017-04-04
  • vue watch报错:Error in callback for watcher "xxx":"TypeError的解决方法

    vue watch报错:Error in callback for watcher "xxx&qu

    这篇文章主要给大家介绍了关于vue watch报错:Error in callback for watcher “xxx“:“TypeError:Cannot read properties of undefined的解决方法,需要的朋友可以参考下
    2023-03-03
  • 详解vue + vuex + directives实现权限按钮的思路

    详解vue + vuex + directives实现权限按钮的思路

    这篇文章主要介绍了详解vue + vuex + directives实现权限按钮的思路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue3中使用pinia的示例代码

    Vue3中使用pinia的示例代码

    这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue实际运用之vuex持久化详解

    vue实际运用之vuex持久化详解

    这篇文章主要为大家介绍了vue运用之vuex持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue.js中数组变动的检测详解

    Vue.js中数组变动的检测详解

    这篇文章给大家主要介绍了Vue.js中数组变动的检测,文中给出了详细的示例代码和过程介绍,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10

最新评论