day47（（VueJS）组合式API 响应式数据的定义 定义的方法 计算属性的定义 监听watch ref的相关方法）

一.组合式API两种形式写新语法

要点总结

有两种形式可以供我们应用Vue3的新语法：(两种语法除了return之外区别不大，后面主要用第二种来展示其他案例)
  1. setup(){此处书写新语法}
  2. <script setup>此处书写新语法</script>
 注意
  1. 这两种形式的主要区别是：setup()作为函数形式，需要将设置在其中的所有数据和方法使用return返回才能够在页面渲染或调用，script标签+setup属性则不需要。
  2. setup属于语法糖的写法
  3. 在setup()函数体内和添加了setup属性的script标签内，this都是没有指向的，打印结果也是undefined，而不再是指向当前组件实例，即使是写在这两种区域内的事件体也不能用this。但是，就算使用了这两种形式的写法，组件模板template中的this还是能够正常使用的。

setup（）函数体中

<script>
export default {----------这里需要注意，setup函数需要放在空对象内，使用默认导出以对象形式导出
    setup(){------------在setup函数中 写vue3的新语法( 组合式api，composition api( 组合式api ) )
        return {----------因为setup是一个函数形式，所以需要将定义在其中的方法，数据，属性等通过return返回才能在页面调用或渲染
            arr,
            obj,
            handleClick
        }
    }
}
</script>

标签中< script setup>

	<script  setup>------script标签上添加setup，标签里面就可以用vue3的组合式API来书写了，并且导入的组件也不需要注册就可以在页面渲染
	  import coma from './components/ComA.vue' 
	  import comb from './components/ComB.vue'  
	< /script>

二.