vue3.2 setup 语法糖常用简介

vue3.2setup语法糖常用简介Vue3.2是Vue框架的最新版本，带来了许多令人兴奋的功能和改进。其中一个重要的更新是引入了一些新的语法糖，以便更简洁地使用Vue。本文将简要介绍Vue3.2中一些常用的语法糖，并提供相关参考内容。

1.setup函数：

在Vue3.0中，我们使用的是setup方法来替代之前的组件选项（如data、props、methods等）。setup函数具有两个参数，第一个参数是props，第二个参数是一个上下文对象，我们可以通过该对象获取到Vue实例的属性和方法。

示例代码如下：

```javascript

setup(props,context){

//使用props

console.log(props)

//获取Vue实例的属性和方法

console.log(context.attrs)

console.log(context.slots)

console.log(context.emit)

//返回模板中需要使用的数据和方法

return{

data:props.data,

method:()=>{

console.log('method')

}

}

}

```

参考文档：

-CompositionAPI：/docs/zh/guide/composition-api-introduction.html

2.reactive/ref:

Vue3.2引入了响应式系统的两个新函数：reactive和ref。通过reactive，我们可以将一个对象转换成响应式的对象，而通过ref，我们可以将一个基础类型的值转换成一个响应式对象。

示例代码如下：

```javascript

import{reactive,ref}from'vue'

setup(){

constuser=reactive({

name:'John',

age:20

})

constcount=ref(0)

return{

user,

count

}

}

```

参考文档：

-CompositionAPI：/docs/zh/guide/composition-api-introduction.html#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F%E4%BB%8B%E7%BB%8D

3.toRefs:

Vue3.2中还提供了一个toRefs函数，用于将响应式对象的属性转换成响应式的引用。这在将响应式对象传递给子组件时非常实用，可以确保子组件能正确地获取到父组件的属性。

示例代码如下：

```javascript

import{reactive,toRefs}from'vue'

setup(){

constuser=reactive({

name:'John',

age:20

})

//将响应式对象的属性转换成响应式的引用

constuserRefs=toRefs(user)

return{

...userRefs

}

}

```

参考文档：

-CompositionAPI：/docs/zh/guide/composition-api-introduction.html#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F%E4%BB%8B%E7%BB%8D

4.watchEffect:

在Vue3.2中，我们可以使用watchEffect来监听响应式对象的变化，并在变化发生时执行相应的操作。watchEffect会自动追踪响应式对象的依赖，并在变化时重新运行。

示例代码如下：

```javascript

import{reactive,watchEffect}from'vue'

setup(){

constuser=reactive({

name:'John',

age:20

})

//监听user对象的变化

watchEffect(()=>{

console.log()

console.log(user.age)

})

}

```

参考文档：

-CompositionAPI：/docs/zh/guide/composition-api-introduction.html#%E7%9B%91%E5%90%AC%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AF%B9%E8%B1%A1%E5%8