<template>
    <h1>{{ data.a.b.c.counter }}</h1>
    <br>
    <h1>{{ data.counter2 }}</h1>
    <button @click="data.a.b.c.counter++">1加一</button>
    <br>
    <button @click="data.counter2++">2加一</button>
</template>
 
<script>
import hook1 from "./hooks/hook1.js";
import { reactive,shallowReactive } from 'vue'
export default {
    // 组合式和选项式的区别
    // 组合式Compostion API
    // 选项式Options ApI
    // 关注点在一个个选项上(配置项上)
    // data,methods,computed,watch
    // 关注点没有落在功能上
    // 没有落在具体的功能上面
    // 选项式的的特点是分散
    data(){
        return {
            // 功能1的data
            // 功能2的data
            // 功能3的data
            // 所有的data都在这里
        }
    },
    // 一旦涉及到功能的修改,就要在不同的data,method,watch和computed中
    // 去找对应方法的属性watch,数据计算属性,监视属性等
    // 维护起来麻烦,维护成本高
    methods : {
        // 所有的方法也都放在这里
    },
    watch : {
        // 所有的监视属性也都放在这里
    },
    computed : {
        // 所有的计算属性也都放在这里
    },
    name : "App",
    setup(){
        // 这是方法函数,要加()
        // 加了括号的会立刻执行这个函数的内容
        // 不加括号是指针指向这个函数,而不是调用函数
        hook1();
        // 这个只能对一层级的属性做响应式,同样也是浅层的响应式
        let data = shallowReactive({
            counter2 : 100,
            a : {
                b : {
                    c : {
                        counter : 1
                    }
                }
            }
        });
        // 到了VUE3中,随着组合式API的引入和hook的使用
        // 使我们可以把关注点聚焦到一个个功能上
        // 组合式API关注的就是功能了
        return {data};
    }
}
</script>
 
<style>
 
</style>
// 一个钩子就是一个独立的功能
export default function(){
    // 功能1的data
    // 功能1的methods
    // 功能1的watch
    // 功能1的computed
    // 需要修改功能就在这里修改就可以了
}
import {reactive} from "vue";
export default function(){
    let data = reactive({
        num1 : 0,
        num2 : 0,
        result : 0
    });
    function sum(){
        // num3.value = num1.value + num2.value;
        data.result = data.num1 + data.num2;
    }
    // return {num1,num2,result,submit}
    return {data,sum}
} 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- 和webpack创建的工程区别,index.html放在了pubic的外面 -->
    <!-- Vite以index.html作为入口,不再使用main.js作为入口了 -->
    <!-- 对于vite构建工具来说,配置文件时vite.config.js -->
    <!-- 这个vite.config.js类似于webpack打包的vue.config.js -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>