Vue3的语法糖

scorpion_V

已于 2023-04-04 15:11:01 修改

阅读量296

点赞数

分类专栏：前端 vue JavaScript 文章标签： vue.js 前端前端框架

于 2023-04-04 14:53:33 首次发布

本文链接：https://blog.csdn.net/scorpion_V/article/details/129948782

版权

vue 同时被 3 个专栏收录

20 篇文章 2 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

最近的项目都是用Vue3来开发的，项目也告一段落，今天抽空写写关于Vue3的语法糖，互相学习学习~

组合式API：setup()

Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。

setup 是一个接收 props和 context的函数，最后 setup 需要 return所有内容暴露给模板。

<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, context) {
    // 在这里声明数据，或者编写函数并在这里执行它
    console.log(context)
    return {
      // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
    }
  },
})
</script>

新的 setup 选项是在组件创建之前，props 被解析之后执行，是组合式 API 的入口。

*注意：在 setup 中不能使用 this，因为它找不到实例。但是在 Vue2 语法和 Vue3 语法混用的时候，Vue2 语法中可以使用 this 访问到 setup里暴露出的变量。

组件的生命周期

生命周期

可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。

setup语法糖

<script setup>

</script>

1.它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。

2.在setup函数中所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。

ref

ref是最常用的一个响应式 API，它可以用来定义所有类型的数据，包括 Node 节点和组件。返回一个响应式对象，所有的值都通过.value属性获取。

<template>
  <div>{{num}}</div>
</template>
<script setup >
import { ref } from 'vue'

const num = ref(0)

</script>

reactive

返回一个对象的响应式代理。

<template>
  <div>{{state.form.userName}}</div>
</template>
<script setup >
import { reactive } from 'vue'

const state = reactive({
  form: {
    userName: 'youfei',
  },
})
</script>

组件自动注册

在setup中不再需要用过components进行注册，直接引入即可食用。

<template>
 <Child />
</template>

<script setup>
import Child from '@/components/Child.vue'
</script>

defineProps

接收父组件传过来的内容,可以定义类型和默认值

const props = defineProps({
  modelValue: {
    type: Array,
    default: (() => {[]}),
  },
})

defineEmit

子组件向父组件传递内容事件

const text = ref(1)
const emit = defineEmits(['update:modelValue'])
emit('update:modelValue', text.value)

defineExpose

向外暴露组件内方法和属性

传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template 模板，谁都不能访问内部的数据和方法。

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpos

// 子组件
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 Compontents
})
</script>

watch

watch(
 source, //必传，要侦听的数据源
 callback //必传，侦听到变化后要执行的回调函数
//options //可选，一些侦听选项
)

watchEffect

<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>