vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 setup代替created

vue3如何使用setup代替created

作者: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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文