Vue3.0入门教程！！

目录

一、 组合API

二、 带ref响应式变量

三、带reactive响应式变量

四、computed计算属性

五、watch响应式更改

六、props传值

七、emit回调

八、provide/inject

---

一、 组合API

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。
用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。

<template>
 <h2>{
  {userName}}</h2>
</template>
<script>
export default {
  components: {},
  props: {
  },
  setup(props) {
    let userName = '星星编程';
    return {userName} 
  }
}
</script>

二、 带ref响应式变量

ref 接受参数并返回它包装在具有 value property 的对象中，然后可以使用该 property 访问或更改响应式变量的值。

<template>
 <h2>{
  {userName}}</h2>
 <input type="text" v-model="userName" />
</template>
<script>
import { ref } from 'vue'
export default {
  setup(props) {
    let userName = ref('星星编程');
    return {userName} 
  }
}
</script>

三、带reactive响应式变量

reactive 返回对象的响应式副本。响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。

<template>
 <h2>姓名：{
  {userName}}</h2>
 <h2>性别：{