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.0基于Proxy 实现的数据更变检测 支持Composition API和Options API,以及typings