1.2 vue2(组合式API)的语法结构以及外部暴露

vue2

vue3中可以写vue2的语法，vue2的结构像一个花盆里的根（根组件App.vue），根上可以插上不同的枝杈和花朵（组件）。

组件的结构：

// 这里写逻辑行为
<script lang="ts">
export default{name: 'App'
}
</script>
// 这里写页面结构（相当于html）
<template></template>
// 这里写页面装饰（相当于css）
<style></style>

html和css的基础打好，关于template和style标签的书写就很简单，这里需要着重讲解一下script标签的外部暴露（vue2特有的）

script

vue2 采用组件式API，name,data,methods,…都写在固定的key的内部里面，最后暴露出来。

外部暴露

组件只有导出（暴露），才能被其他组件引用，并且都用键值对写。

export default{name:'组件的名字'data(){return {// 数据// 这里注意，数据只能函数形式写，因为同组件多的话，避免数据污染，每个组件都有自己单独的数据。	}}methods:{// 这里写函数...},compute(){},setup(){// vue3的组合式API// 数据let a = 10;// 方法function 方法名(){...}...return{将数据，方法交出去，模板中才能使用}}
}

vue3 setup

setup与data或者methods等同级别，在setup中定义的数据，data或者methods等可以通过this.访问到，反之则不能。

但是在export default{}中写setup还需要交出去数据和方法，有更优雅的语法糖写法：

<script lang="ts" setup>
let a = 123;
...
</script>