vue3 快速上手（中

vue3 快速上手（中

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

三、组件与props

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

import { createApp } from 'vue'

const app = createApp({})

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

局部组件：创建Example.vue

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

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

export default{
	components: {
		HelloWorld
	}
}

使用

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

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

App.vue 引入

import ProductList from '/components/ProductList'

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

把 fruits 提取到 App.vue里面

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

子组件通过 props 接收

//新版 setup 

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

App.vue 注册

四、生命周期函数

取自官网

非常清晰：
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: 错误在所难免，请多多体谅,我是边学边写的，本人很菜，请以官方文档为主要学习参考