提示

Vue3.2 版本开始才能使用语法糖！

(相关资料图)

vue3的全新API中，有部分在vue2的基础上沿用了

setup 的简单介绍

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；

这样会导致在页面上变量会出现很多次，很不友好。

vue3.2只需在script标签中添加setup。

可以帮助我们解决这个问题。

组件只需引入不用注册，属性和方法也不用返回，

也不用写setup函数，也不用写export default ，

甚至是自定义指令也可以在我们的template中自动获得。

响应式：核心

响应式：工具函数

生命周期钩子

如何使用setup语法糖

<template></template><script setup></script><style scoped lang="scss"></style>

data数据的使用

<script setup>    import {      ref,      reactive,      toRefs,    } from "vue"        const data = reactive({      isShow: false,      testContent: false,      dataList: [],    })        const content = ref("content")    //使用toRefs解构    const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)</script>

method方法的使用

代码如下（示例）：

<template >    <button @click="handleDelete">删除</button></template><script setup>import {reactive} from "vue"const data = reactive({      isShow: false,})// 点击帮助const handleDelete = () => {    console.log(`确定要删除吗`)    data.isShow = true}</script>

watchEffect的用法

代码如下（示例）：

<script setup>import {  ref,  watchEffect,} from "vue"let sum = ref(0)watchEffect(()=>{  const x1 = sum.value  console.log("watchEffect所指定的回调执行了")})</script>

watch的用法

代码如下（示例）：

<script setup>    import { reactive, watch } from "vue"     //数据     let sum = ref(0)     let msg = ref("你好啊")     let person = reactive({        name:"张三",        age:18,        job:{          j1:{            salary:20          }        }      })    // 两种监听格式    watch([sum,msg],(newValue,oldValue)=>{        console.log("sum或msg变了",newValue,oldValue)    },{immediate:true})    // immediate:true 是否立即执行     watch(()=>person.job,(newValue,oldValue)=>{        console.log("person的job变化了",newValue,oldValue)     },{deep:true})      // deep:true 深度监听</script>

computed计算属性的使用

<script setup>    import { reactive, computed } from "vue"    //数据    let person = reactive({       firstName:"小",       lastName:"叮当"     })    // 计算属性简写    person.fullName = computed(()=>{        return person.firstName + "-" + person.lastName      })     // 完整写法    person.fullName = computed({      get(){        return person.firstName + "-" + person.lastName      },      set(value){        const nameArr = value.split("-")        person.firstName = nameArr[0]        person.lastName = nameArr[1]      }    })</script>

props父子传值的使用

不需要使用setup函数，机智的小伙伴会说:那么子组件怎么接受父组件传递过来的值呢?props，emit怎么获取呢?别担心,新的api出现了,我们的主角 defineProps

<template>  <span>{{props.name}}</span></template><script setup>  import { defineProps } from "vue"  // 声明props  const props = defineProps({    name: {      type: String,      default: "我是默认"    }  })    // 或者  //const props = defineProps(["name"])</script>父组件代码如下（示例）：<template>  <child :name="name"/>  </template><script setup>    import {ref} from "vue"    // 引入子组件    import child from "./child.vue"    let name= ref("测试名称")</script>

emit子父传值的使用

<template>   <a-button @click="isOk">     确定   </a-button></template><script setup>import { defineEmits } from "vue";// emitconst emit = defineEmits(["aboutExeVisible"])/** * 方法 */// 点击确定按钮const isOk = () => {  // 子组件抛出的方法  emit("aboutExeVisible");}</script>父组件代码如下（示例）：<template>  <AdoutExe @aboutExeVisible="aboutExeHandleCancel" /></template><script setup>import {reactive} from "vue"// 导入子组件import AdoutExe from "../components/AdoutExeCom"// 关于系统隐藏const aboutExeHandleCancel = () => {    console.log("子组件触发的方法执行了~")}</script>

获取子组件ref变量和defineExpose暴露

<template>    <p>{{data }}</p></template><script setup>import { reactive, toRefs } from "vue"/** * 数据部分 * */const data = reactive({  showDialog: false,})defineExpose({  ...toRefs(data),})</script>父组件代码如下（示例）：<template>    <button @click="onClickSetUp">点击</button>    <Content ref="content" /></template><script setup>import {ref} from "vue"// content组件refconst content = ref("content")// 点击设置const onClickSetUp = ({ key }) => {   content.value.showDialog = true}</script><style scoped lang="less"></style>

路由useRoute和useRouter的使用

代码如下（示例）：

<script setup>  import { useRoute, useRouter } from "vue-router"      // 声明  const route = useRoute()  const router = useRouter()      // 获取query  console.log(route.query)  // 获取params  console.log(route.params)  // 路由跳转  router.push({      path: `/index`  })</script>

store仓库的使用

代码如下（示例）：

<script setup>  import { useStore } from "vuex"  import { num } from "../store/index"  const store = useStore(num)      // 获取Vuex的state  console.log(store.state.number)  // 获取Vuex的getters  console.log(store.state.getNumber)    // 提交mutations  store.commit("fnName")    // 分发actions的方法  store.dispatch("fnName")</script>

await的支持

<script setup>  import Api from "../api/Api"  const data = await Api.getData()  console.log(data)</script>

provide 和 inject 祖孙传值

<template>  <AdoutExe /></template><script setup>  import { ref,provide } from "vue"  import AdoutExe from "@/components/AdoutExeCom"  let name = ref("Jerry")  // 使用provide  provide("provideState", {    name,    changeName: () => {      name.value = "小叮当"    }  })</script>子组件代码如下（示例）：<script setup>  import { inject } from "vue"  const provideState = inject("provideState")  provideState.changeName()</script>

新增指令 v-memo

v-memod会记住一个模板的子树,元素和组件上都可以使用。该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。因此渲染的速度会非常的快。需要注意得是:正确地声明记忆数组是很重要。开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。<li v-for="item in listArr"  :key="item.id"  v-memo="["valueA"，"valueB"]">    {{ item.name   }}</li>v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。只创建一次，以后就不会再更新了。也就是说用内存换取时间。

style v-bind

经过尤大大和团队的努力，<style> v-bind 已经从实验室毕业了。我们可以使用这个属性了。爽歪歪！我们可以在style中去使用变量。是不是感觉很牛逼呀！现在我们用起来，第一次使用<style> v-bind

<template>  <span> 我是一只小小鸟 </span>  </template><script setup>  import { reactive } from "vue"  const state = reactive({    color: "red"  })</script><style scoped>  span {    /* 使用v-bind绑定state中的变量 */    color: v-bind("state.color");  }  </style>

关键词：