开始

当一个东西看不懂的时候 说明还没到用的时候 -9

vue3 改变了平时写代码的习惯

在vue2中采用的是 Options API 简单来说 每个区域的代码作用已经明确了
在vue3中采用的是 Composition API 相反 每个区域并没有固定代码作用 全凭自己发挥

基本语法

既然已经来到了 vue3 也遇见了 vite 还了解到了 TypeScript 又有了 setup提案 那不如 直接用最新的技术栈开始

文件结构

1
2
3
src/study
├─ parent.vue
└─ child.vue

那就先用 parent.vue 开始

vue2 js

js

1
2
3
4
5
6
<template>
    <div class="parent">
        <button @click="changeNumber(1)">更改数字</button>
        <button @click="toChild">去child页面</button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
    data() {
        return {
            child_string: '在'
        }
    },
    mounted() {
        this.getStatistics()
        // this.$store.commit('title', '这个是主页')
    },
    methods: {
        getStatistics() {
            this.loading = true
            flyio.get('/statistics').then(res => {
                this.statistics = res
                this.loading = false
            })
        },
    },
}