Vue中的选项式API(Options API)与函数式编程(Composition API)方式

Posted 曾胖神父

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的选项式API(Options API)与函数式编程(Composition API)方式相关的知识,希望对你有一定的参考价值。

Vue中的选项式API(Options API)

介绍

Vue2(虽然Vue3也支持)采用选项式API(Options API)格式,该格式会导致对相同数据进行操作使用的代码被分割到不同属性内,很不利于代码的阅读。

Demo
<template>
    <h1>helloText</h1>
</template>
<script>
     export default
        props:['msg'],
        data()
            return 
                count:0, //逻辑1的数据
                name:'HelloWorld' //逻辑2的数据
            
        ,
        methods:
            onAdd()  //逻辑1的方法
                this.count++;
            ,
            getCount() //逻辑2的方法
                this.count=Math.floor(Math.random()*100);
            
        ,
        computed:
            helloText()  //逻辑2的计算属性
               return this.msg+' '+this.name;
            
        ,
        watch:     
            count()  //逻辑1的watch
                console.log('count 变了');
            
        ,
        mounted()
            this.getCount() //逻辑1的初始化操作
        
     
</script>
<style scoped>
  a
    color:#42b983
  
</style>

Vue中的函数式编程(Composition API)

介绍

Vue3采用函数式编程(Composition API)格式,该格式打破了this的限制,能够更好的复用代码,真正实现了功能的高内聚低耦合,并且更利于代码的可维护性和扩展性。

Demo
<template>
    <h1>helloText</h1>
    <button @click="count++">count is:count </button>
</template>
<script>
  import ref,watch,computed,onMountedfrom 'vue'
  export default
    props:['msg'],
    setup(props)
        let count=ref(0);
     
        const getCount=()=>count.value=Math.floor(Math.random()*100)
        watch(count,(val,oldVal)=>
            console.log(`count从$oldVal变成了$val`)
        )
        onMounted(getCount);
        let name=ref('HelloWorld');
        let helloText=computed(()=>props.msg+' '+name.value);
        return 
            count,
            name,
            helloText
        
    
  
</script>
<style scoped>
a
    color: #42b983;

</style>

以上是关于Vue中的选项式API(Options API)与函数式编程(Composition API)方式的主要内容,如果未能解决你的问题,请参考以下文章

vue3的生命周期

选项式 API 和组合式 API的区别

Vue3.0基于Proxy 实现的数据更变检测 支持Composition API和Options API,以及typings

vue3中的setup

Vue2和Vue3的区别&&Vue3的组合式API

Vue 全局API 详细介绍(nextTicksetdelete......)