vue3 setup语法糖 对js暴露数据
时间: 2023-08-11 21:32:28 浏览: 59
在 Vue 3 中,除了可以使用 `ref` 和 `reactive` 创建响应式数据并将其暴露给外部,还可以使用一些 setup 语法糖来简化代码。以下是一些常用的 setup 语法糖:
1. `ref`:可以直接在 `setup` 函数中使用 `ref` 语法糖创建响应式数据,例如:
```javascript
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
return {
count
};
}
});
```
2. `reactive`:可以直接在 `setup` 函数中使用 `reactive` 语法糖创建响应式对象,例如:
```javascript
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
count: 0,
message: 'Hello'
});
return {
state
};
}
});
```
3. `computed`:可以直接在 `setup` 函数中使用 `computed` 语法糖创建计算属性,例如:
```javascript
import { defineComponent, computed } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
const doubleCount = computed(() => {
return count.value * 2;
});
return {
count,
doubleCount
};
}
});
```
4. `watch`:可以直接在 `setup` 函数中使用 `watch` 语法糖监听响应式数据的变化,例如:
```javascript
import { defineComponent, watch } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
return {
count
};
}
});
```
通过使用这些 setup 语法糖,可以更加简化代码,并且提高代码的可读性和可维护性。