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>性别：{{sex}}</h2>
 <h2>职业：{{job}}</h2>
</template>
<script>
import { reactive, toRefs} from 'vue'
export default {
  setup(props) {
    let user  = reactive({
        userName:'星星编程',
        sex:'男',
        job:'前端开发工程师'
    });
    return {
        ...toRefs(user)
    } 
  }
}
</script>

四、computed计算属性

computed使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。
computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输出的一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像使用 ref 一样使用 .value property。

<template>
 <h2>{{tip}}</h2>
</template>
<script>
import { computed } from 'vue'
export default {
  setup(props) {
    let userName = '星星编程';
    let tip = computed(()=>{
         return '欢迎关注' + userName + '微信公众号！' ;
     })
    return {
       tip
    } 
  }
}
</script>

五、watch响应式更改

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生更改时调用。

<template>
  <h2>count:{{ count }}</h2>
  <button @click="random">随机数</button>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });
    watch(
      () => state.count,
      (count, prevCount) => {
          console.log(prevCount);
      }
    );
    function random() {
      state["count"] = Math.round(Math.random()*10000) ;
    }
    return { ...toRefs(state), random };
  },
};
</script>

六、props传值

1、父组件通过userName属性将userName传递给子组件DemoComponent。

<template>
 <DemoComponent :userName='userName'></DemoComponent>
</template>
<script>
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props) {
    let userName = '星星编程';
    return {
       userName
    } 
  }
}
</script>

2、子组件DemoComponent接收父组件传递userName参数。

<template>
 <h2>{{userName}}</h2>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props) {
    let userName = props.userName;
    return {
       userName
    } 
  }
}
</script>

七、emit回调

1、父组件实现子组件DemoComponent的callback函数，并将接收到tip参数显示到<h2>标签里。

<template>
<h2>{{userName}}</h2>
 <DemoComponent @callback='showTip'></DemoComponent>
</template>
<script>
import { ref } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props,content) {
    let userName = ref('星星编程');
    function showTip(tip){
       userName.value = tip;
    }
    return {
       userName,
       callback
    } 
  }
}
</script>

2、子组件DemoComponent通过content.emit实现callback回调。

<template>
 <button @click='done'>emit回调</button>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props,content) {
    function done() {
      content.emit('callback','欢迎关注星星编程微信公众号！')
    }
    return {
        done
    } 
  }
}
</script>

八、provide/inject

provide/inject两者都只能在当前活动实例的 setup() 期间调用。
1、在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。
provide 函数允许你通过两个参数定义 property：
property 的 name (<String> 类型)
property 的 value

<template>
<h2>provide/inject</h2>
<DemoComponent></DemoComponent>
</template>
<script>
import { ref,provide } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup() {
    let userName = ref('星星编程');
    provide('userName', userName);
  }
}
</script>

2、在 setup() 中使用 inject 时，还需要从 vue 显式导入它。一旦我们这样做了，我们就可以调用它来定义如何将它暴露给我们的组件。
inject 函数有两个参数：
要 inject 的 property 的名称
一个默认的值 (可选)

<template>
  <h2>{{ userName }}</h2>
</template>
<script>
import { inject } from "vue";
export default {
  setup() {
    const userName = inject("userName", "默认名字");
    return {
      userName,
    };
  },
};
</script>

3、provide/inject和props传值、emit回调相比传参更加方便，而且可以跨组件传参。