【Vue3教程】创建你的第一个Vue 3项目，前端架构组件Room功能详解

/>

{{ query }}

我们使用ref创建响应式query变量，然后从setup方法返回它。

setup () {

const query = ref(‘’)

return {

query

}

}

然后，如返回到应用程序，会看到我们使用Composition API获得了响应式数据。

很好！接下来，我们在input中添加一个clear按钮，看看如何在Composition API中创建一个方法。

组合API中的方法

在选项 API中，Vue对象中有一个完整的属性专门用于方法。对于较大的文件，这意味着数据可能在数百行之外的方法中声明，这使得组件更难读取和维护。

在组合API中，一切都在 setup 方法中，这意味着我们可以根据特性组织代码，甚至将通用特性提取到它们自己的代码模块中。

我们创建一个reset方法，它获取我们的ref并将其设置为一个空字符串。

setup () {

const query = ref(‘’)

const reset = (evt) => {

query.value = ‘’ // clears the query

}

return {

reset,

query

}

}

需要注意的一件事是，我们需要调用query.value才能访问数据的值。

为什么？

如果我们使用console.log(query)，我们看到它不仅仅是一个字符串值，而是一个 Proxy。使用 Proxy 允许我们轻松地获取数据变化，这也是为什么我们需要在引用上调用.value的原因。

然后，就像在选项API使用的一样，我们可以在模板中添加一个按钮，在单击时调用这个reset方法。

<button @click=‘reset’> Reset

向 Vue3 项目添加第二个组件

现在我们已经有了输入和查询数据，接着，创建一个组件显示结果。

这个组件取名为SearchResults.vue

要将其添加到我们的HelloWorld.vue组件中，首先必须将其导入并在我们的导出默认值中声明它。

然后，我们可以像这样将它添加到模板中:

// HelloWorld.vue

Filter LearnVue Articles

<input

type=‘text’

placeholder=‘Filter Search’

v-model=‘query’

/>

<button @click=‘reset’> Reset

传递参数

Vue props 允许父组件将数据传递给其子组件。对于我们的例子，我们希望从HelloWorld.vue传递query字符串给SearchResults.vue。

// HelloWorld.vue

访问参数

在SearchResults.vue内部，从 JSON 文件导入所有的文章信息。

import titles from ‘…/post-data.json’

export default {

setup (props, context) {

}

}

然后，我们需要几个步骤来访问 props。

首先，我们必须在 props 选项中声明它们。这告诉我们的组件需要什么数据。

// SearchResults.vue

export default {

props: {

query: String

},

setup (props, context) {

// …

如果我们仔细观察setup方法，就会发现它接受两个参数。

1. props – 包含传递给组件的所有 props

2. context– 包含 attrs，slot和emit

我们将使用 props 在 setup 方法中访问我们的 props 的值。

我们所需要做的就是使用计算属性来过滤使文章列表。

计算属性

// SearchResults.vue

import { computed } from ‘vue’

然后，我们这样设置它，其中我们的computed属性接受一个getter方法。每当其中一个依赖项发生更改时，此方法将更新我们的computed属性。

// SearchResults.vue

import { computed } from ‘vue’

import titles from ‘…/post-data.json’

export default {

props: {

query: String

},

setup (props, context) {

const filteredTitles = computed(() => {

})

return {

filteredTitles

}

}

}

对于这个方法，我们希望使用query过滤所有的标题。所有内容都转换为小写，所以我们不必担心大小写。

// SearchResults.vue

const filteredTitles = computed(() => {

return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))

})

很好~

剩下要做的就是实际使用我们的模板来显示数据!这是使用v-for循环完成的。

// SearchResults.vue

Showing {{ filteredTitles.length }} results for "{{ query }}"

• {{ title.Name }}

  就这~

  

  Vue3 生命周期钩子

  在开始使用 Vue3 之前，还需要知道的另一件事是如何使用Vue生命周期钩子。

  

  像Composition API的其他部分一样，我们必须导入我们想要使用的生命周期钩子，并在setup方法中声明它们。

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

  [外链图片转存中…(img-BV85u1Do-1711017182173)]
  [外链图片转存中…(img-qn5UXZZV-1711017182174)]
  [外链图片转存中…(img-4sWAGaOR-1711017182175)]
  [外链图片转存中…(img-oocI611w-1711017182175)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  [外链图片转存中…(img-KCVDYh3F-1711017182175)]

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】