本文主要是介绍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>
二.
这篇关于day47（（VueJS）组合式API 响应式数据的定义 定义的方法 计算属性的定义 监听watch ref的相关方法）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
