vue3组合式api太强了,vue3.0 composition api,vue3 composition api文档,vue-composition-api,vue api.js,vue3 composition api
Vue 3.0 组合式API模板引用是一种在Vue.js中使用组合式API编写模板的方法。 它允许您将模板逻辑与其他组件代码分离，并以更具可读性和可维护性的方式组织代码。

假设你有一个组件，它渲染一个列表，并且该列表可以根据用户输入过滤。 在Vue 2.x中，可能会像这样实现：

html
<template>
<div>
<input v-model="filterText">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange'],
filterText: ''
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.includes(this.filterText))
}
}
}
</script>


在Vue 3.0中，您可以使用组合式API来重构此组件如下所示：

html
<template>
<div>
<input v-model="filterText">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
setup() {
const items = ref(['apple', 'banana', 'orange'])
const filterText = ref('')

const filteredItems = computed(() => {
return items.value.filter(item => item.includes(filterText.value))
})

return {
items,
filterText,
filteredItems
}
}
}
</script>


在这个例子中，我们使用了Vue 3.0的组合式API来定义一个setup()函数。 它返回一个包含组件数据和计算属性的对象，这与Vue 2.x中的data和computed选项相同。 但是，在这种情况下，我们使用了Vue 3.0提供的一些新功能：

- ref()用于创建响应式数据。
- computed()用于创建计算属性。
- 我们没有像Vue 2.x那样定义data和computed选项。

总的来说，Vue 3.0的组合式API模板引用使代码更加清晰明了，并带来了更好的可维护性和可重用性。