先说说vue2的选项式api，请看代码
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
//code
};
},
computed: {
//code
},
watch: {
//code
},
created() {
//code
},
methods: {
//code
}
};
</script>
这是一个常见的vue2文件，其中data,computed,watch,created,methods等就是选择式api
再看看vue3
<template>
<div id="app">
{{foo}}
</div>
</template>
<script>
import { onMounted, ref } from "vue";
const foo = ref(null)
setup(){
onMounted(() => {
//code
});
return{ foo }
},
</script>
setup和ref等就是新的组合式api
网友评论