🌟前言
随着2020年9月18号Vue3.0的发布，到现在已经有两年半的时间了，再到尤大大官宣从去年的2月7号开始，Vue3.0将成为Vue.js的默认版本。相信很多小伙伴也已经感受到了Vue3的变化和其独特魅力，虽然技术更迭不停，但我们也不能停下脚步。今天给小伙伴们整理了一些Vue3里的语法糖，大家可以结合Vue2去仔细感受一下，话不多说，咱直接开整。
🌟组合式API：setup()
组合式API是vue3里边变化比较大的一个点，习惯了Vue2写法，当时突然学习的时候还真得有点不适应
Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的。
2、setup函数是 Composition API（组合API）的入口。
3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用。
// setup()写法一： <template> <div id="app"> {{name}} <p>{{age}}</p> <button @click="plusOne()">+</button> </div> </template> <script> import {ref} from 'vue' export default { name:'app', data(){ return { name:'xiaosan' } }, setup(){ const name =ref('满山雾') const age=ref(18) // 永远18 function plusOne(){ age.value++ //想改变值或获取值 必须.value } return { //必须返回 模板中才能使用 name,age,plusOne } } } </script>
大家可以看到，通过这种setup写法我们还需要把变量return 出去才能在页面中使用，是不是有点…
别着急，给大家上点小魔法（setup语法糖）
// setup()写法二： <template> <div id="app"> {{name}} <p>{{age}}</p> <button @click="plusOne()">+</button> </div> </template> <script setup> import {ref} from 'vue' export default { name:'app', data(){ return { name:'xiaosan' } }, const name =ref('满山雾') const age=ref(18) // 永远18 function plusOne(){ age.value++ //想改变值或获取值 必须.value } } </script>
当我们再script标签上写了setup以后，就直接可以写我们的代码了，老板再也不用担心我们的变量或者function 忘记 return 了。
*注意：在setup中不能使用this，因为他找不到实例。但是在vue2语法和vue3语法混用的时候，vue2语法中可以使用this访问到setup里暴露出的变量。
1.它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。
2.在setup函数中所有ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
🌟生命周期
可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。
在Vue3中如果要用到生命周期钩子函数，需要这样：
<script setup> import { onMounted } from 'vue' onMounted(() => { console.log('mounted in the composition api!') }) </script>
🌟ref
ref是最常用的一个响应式 API，它可以用来定义所有类型的数据，包括 Node 节点和组件。返回一个响应式对象，所有的值都通过.value属性获取。
<template> <div>{{num}}</div> </template> <script setup > import { ref } from 'vue' const num = ref(0) // number const message= ref('大家好') // string </script>
🌟reactive
返回一个对象的响应式代理。
1.reactive接受一个对象作为参数
2.其返回值是经reactive函数包装过后的数据对象，这个对象具有响应式
<template> <div>{{state.searchInfo.name}}</div> </template> <script setup > import { reactive } from 'vue' const state = reactive({ searchInfo: { name: 'Jack', }, }) </script>
🌟组件自动注册
在setup中不再需要用过components进行注册，直接引入即可使用。
<template> <Son/> </template> <script setup> import Son from '@/components/Son.vue' </script>
🌟defineProps
接收父组件传过来的内容,可以定义类型和默认值
<template> <div class="hello"> 我是父组件 <!-- 父组件通过:变量(这里是info)绑定值 --> <Child :info="parentMsg"></Child> </div> </template> <script setup> import Child from './Child' import {ref} from 'vue' const parentMsg=ref('父组件传递值是a') </script> <style scoped> </style>
<template> <!-- info是父组件传递过了的值 --> <div>我是子组件拿到了父组件的值是{{info}}</div> </template> <script setup> import { toRefs, defineProps } from 'vue' const props = defineProps({ //子组件接收父组件传递过来的值 info: String, }) //使用父组件传递过来的值 const {info} =toRefs(props) </script> <style> </style>
🌟defineEmit
Vue2 中子组件数据传递到父组件，通常是使用 $emit 触发一个自定义事件来进行传递。但在Vue3中 $emit 无法在 < script setup > 中使用，这时候我们需要使用 defineEmits()：
<!-- 子组件 --> <script setup> const emit = defineEmits(['someEvent']) function onClick() { emit('someEvent', 'child message') } </script> <template> <button @click="onClick">点击</button> </template>
<!-- 父组件 --> <script setup> import ChildView from './ChildView.vue' function someEvent(value) { console.log(value) // child message } </script> <template> <ChildView @some-event="someEvent" /> </template>
🌟defineExpose
向外暴露组件内方法和属性。
传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template 模板，谁都不能访问内部的数据和方法。
// 子组件 const table = ref(null) defineExpose({ table, })
// 父组件 <template> <Child ref="child" /> </template> <script setup> import { ref, onMounted } from 'vue' import Child from './Child.vue' let child = ref(null); onMounted(() => { console.log(child.value.table); // Child Components }) </script>
🌟watch 和 watchEffect
watch( source, // 必传，要侦听的数据源 callback // 必传，侦听到变化后要执行的回调函数 // options // 可选，一些侦听选项 )
<template> <div>{{num}}</div> </template> <script setup > import { watchEffect, watch, ref } from 'vue' const num = ref(1) var id = setInterval(() => { num.value = num.value + 1 if (num.value === 20) { clearInterval(id) id = null } }, 1000) watchEffect(() => { console.log(1111) }) watch(() => num.value, () => { console.log(222, num.value) }) </script>
watch和watchEffect区别：
1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）
2、watch需要传递监听的对象，watchEffect不需要
3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下
4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。
🌟useSlots() 和 useAttrs()
获取插槽数据和获取attrs数据，里面包含了 class、属性、方法。
// 旧 <script setup> import { useContext } from 'vue' const { slots, attrs } = useContext() </script> // 新 <script setup> import { useAttrs, useSlots } from 'vue' const attrs = useAttrs() const slots = useSlots() </script>
🌟VueUse
在给大家推介一个非常好用的vue3工具–VueUse
什么是 VueUse VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS
API变得支持响应式，省去程序员自己写相关代码。
VueUse 是一个基于 Composition API
的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇
Composition API 的封装。
VueUse安装
npm i @vueuse/core
VueUse使用
// 导入 import { useMouse, usePreferredDark, useLocalStorage } from "@vueuse/core" export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorage( "my-storage", { name: "Apple", color: "red", }, ) return { x, y, isDark, store } } }
上面从 VueUse 当中导入了三个函数， useMouse， usePreferredDark， useLocalStorage。useMouse 是一个监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置。usePreferredDark 是一个判断用户是否喜欢深色的方法，他会实时的判断用户是否喜欢深色的主题。useLocalStorage 是一个用来持久化数据的方法，他会把数据持久化到本地存储中。
还有我们熟悉的 防抖 和 节流
import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from "@vueuse/core" // 以节流的方式去改变 localStorage 的值 const storage = useLocalStorage("my-key", { foo: "bar" }, { eventFilter: throttleFilter(1000) }) // 100ms后更新鼠标的位置 const { x, y } = useMouse({ eventFilter: debounceFilter(100) })
更多玩法大家可以去VueUse官方网站去进行摸索哦
🌟写在最后
这篇文章为大家介绍了Vue3当中的一些语法糖还有一个200+功能的Vue3工具，你是否学会了呢，小伙伴一定记的尝试哦，后续会为小伙伴们持续更新Vue的一些实战小魔法！各位小伙伴让我们 let’s be prepared at all times！
