文章目录

  • 🌟前言
  • 🌟组合式API：setup()
  • 🌟生命周期
  • 🌟ref
  • 🌟reactive
  • 🌟组件自动注册
  • 🌟defineProps
  • 🌟defineEmit
  • 🌟defineExpose
  • 🌟watch 和 watchEffect
  • 🌟useSlots() 和 useAttrs()
  • 🌟VueUse
  • 🌟写在最后
  • 🌟JSON包里写函数，关注博主不迷路


🌟前言

随着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【二】Vue3语法糖_响应式


可以看到 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官网

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！