vue3 快速上手（中

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

vue3 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨Vue3的组件和props使用，包括全局与局部组件的创建，利用v-bind传递数据。同时讲解了Vue3的生命周期函数，如beforeCreate、mounted等，并给出在实际应用中的示例，如在生命周期中处理数据请求和存储。

vue3 快速上手（中

简介：本文记录一些Vue 3的知识点和一些简单的应用demo,记录学习过程，提升一下记忆与梳理知识点的能力,上我已经安装了less，直接安装即可使用

三、组件与props

组件，组件就是将页面可以反复使用的模块拆解出来，可以反复调用，或者页面太大拆分开来便于维护和管理.
全局组件创建

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

局部组件：创建Example.vue

<template>
	<div>
		<h1>A Vue example</h1>
	</div>
</template>
<style></style>
<script></script>

局部注册注意大小写
App.vue: script

import HelloWorld from './components/HelloWorld.vue'

export default{
	components: {
		HelloWorld
	}
}

使用

<template>
	<!--旧-->
	<hello-world></hello-world>
	<!--新-->
	<HelloWorld />
</template>

不得不说的是 volar 用起来很顺手你可以直接写组件不用手动引入了，components 也是自动注册了

练习：假设我们在开发一个商城网站，我们有很多个页面都要使用到商品列表product-list 于是我们可以把列表提炼成一个组件ProductList.vue
componensts 下创建一个ProductList.vue

<template>
  <div class="product-list-container">
    <h1>平价水果市场</h1>
    <ul class="product-list flex-between">
      <li class="product-list-item flex-center" v-for="product in fruits">
        <a href="javascript:">
          <img :src="product.imgUrl" :alt="product.name" />
          <div class="product-info">
            {{product.name}}-{{product.price}}元/斤
          </div>
        </a>
      </li>
    </ul>
  </div>

</template>


<style lang="less" scoped>
*{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none;

}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-list{
  
  .product-list-item{
    width: 20%;
    height: 120px;
    background-color: #ccc;

    img{
      display: block;
      height: 80px;
      width: auto;
      background-color: #fff;;
    }
  }
}

</style>

<script setup>
  const fruits = [
    {
      name: '苹果',
      price: 20,
      imgUrl: ''
    },
    {
      name: '香蕉',
      price: 25,
      imgUrl: ''
    },
    {
      name: '葡萄',
      price: 38,
      imgUrl: ''
    },
    {
      name: '鸭梨',
      price: 32,
      imgUrl: ''
    }
  ]

</script>

App.vue 引入

import ProductList from '/components/ProductList'

<template>
  <div class="app-container">
    <HelloWorld/>
    <ProductList/>
  </div>
</template>

我们把这个App 打造成一个简易的商城app
现在我们要在首页App.vue渲染多个商品列表,可以直接复制一个列表，修改一下数据，显然这样做非常麻烦，于是我们用props 进行数据传递

把 fruits 提取到 App.vue里面

<script setup>
//import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import ProductList from './components/ProductList.vue';
const fruits = [
    {
      name: '苹果',
      price: 20,
      imgUrl: ''
    },
    {
      name: '香蕉',
      price: 25,
      imgUrl: ''
    },
    {
      name: '葡萄',
      price: 38,
      imgUrl: ''
    },
    {
      name: '鸭梨',
      price: 32,
      imgUrl: ''
    }
  ]
</script>

通过 v-bind:fruits= “fruits” 传入数据

<ProductList :fruits="fruits"/>

子组件通过 props 接收

//新版 setup 
<script setup>
 //宏方法
  defineProps(
    {
      fruits: {
      type: Array,  //检测数据类型
      required: true //是否必须
      }
    }
  )
//旧版 后面不会用这种形式
export default{
	props: {
		fruits: ｛
			type: Array,
			required: true
		｝
	}
}
</script>

新建一个蔬菜列表对代码进行修改子组件 fruits 改为 products ，传入一个 lisTitile

<template>
  <div class="product-list-container">
    <h1>{{listTitle}}</h1>
    <ul class="product-list flex-between">
      <li class="product-list-item flex-center" v-for="product in products">
        <a href="javascript:">
          <img :src="product.imgUrl" :alt="product.name" />
          <div class="product-info">
            {{product.name}}-{{product.price}}元/斤
          </div>
        </a>
      </li>
    </ul>
  </div>

</template>

<script setup> 
 defineProps({
  products: {
    type: Array,
    required: true
  },
  listTitle: {
    type: String,
    required: true
  }

 })

</script>

App.vue 注册

 <ProductList :products="fruits" listTitle="超值水果"/>
    <ProductList :products="vegetables" listTitle="实惠蔬菜"/>

四、生命周期函数

取自官网
在这里插入图片描述
非常清晰：
beforeCreate,created //创建实例前后
beforeMount mounted //挂载Dom 前后
befroreUnmount //卸载组件前后
unmounted //更新组件前后
update updated

ts: 一般在mounted 阶段进行 ajax 数据请求

实践：在todo 应用中我们的todo 数据是没有办法保存的，于是我么可以用 localStroage 来进行保存数据

在mounted 的时候就读取一下数据
beforeUnmount 进行数据销毁若不销毁则localStore 会一直保存数据到浏览其中

import { reactive,toRefs } from 'vue';
import { onMounted,onBeforeUnmount } from 'vue'
const addTodoItem = () => {
    
    if (state.todoItem) {
      state.todos.push(state.todoItem)
      localStorage.setItem('_todos',JSON.stringify(state.todos))  //保存数据
      state.todoItem = ""
    }
  }

onMounted(()=>{  //注意是直接调用，传入了一个回调函数
    state.todos = JSON.parse(localStorage.getItem('_todos')) || ['learn vue']
  })
  onBeforeUnmount(()=>{  //这里可以注销 
    {
    localStorage.removeItem('_todos')
    }
  })

本文完 --因为我不喜欢把文章写的太长所以会把文章拆开如有不便敬请谅解
ps: 错误在所难免，请多多体谅,我是边学边写的，本人很菜，请以官方文档为主要学习参考