Vue3基础

Vue

官网

https://cn.vuejs.org/

https://v3.cn.vuejs.org/

https://staging-cn.vuejs.org/api/

1、环境

1.1、nodejs

node

node -v

npm

#当前版本
npm -v
#升级npm版本
npm install -g npm

1.2、vue

#安装vue
npm install -g vue-cli
#安装最新版本
npm install -g @vue/cli
#更新至最新版本
npm update -g @vue/cli
#vue版本
vue -V

1.3、vite

#创建项目
npm init vite@latest

yarn create @vitejs/app <project-name>
cd <project-name>
yarn
yarn dev

1.3.1、HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <p>123456</p>
  ......
</template>

访问：http://localhost:3000/；查看实时效果

1.4、router

npm install vue-router@4
npm i vue-router@4.0.13 -D
yarn add vue-router@4.0.13

执行结束可以去package.json里检查下是否完成安装。

1.5、vuex

npm install vuex@next
npm install vuex@4
npm i vuex -D
yarn add vuex

1.6、naive-ui(组件库)

npm i -D naive-ui
或
yarn add naive-ui

1.7、css预处理器

由vite搭建的vue项目默认只支持css，想使用less或者sass的话，安装less或sass的依赖就好。

1.7.1、sass

yarn add sass sass-loader
或
npm i sass sass-loader -D

1.7.2、less

yarn add less less-loader
或
npm i less less-loader -D

1.8、element-plus

npm install element-plus
#安装babel的插件
npm install babel-plugin-import -D

1.9、axios

npm install axios

1.10、Vue i18n(国际化)

npm install vue-i18n@next

2、创建项目对比

2.1、基于webpack

创建vue3项目，基于构建工具webpack

vue create vue-demo

问题：基于webpack的项目有一个问题，就是编译慢
解决：使用vite
vite优势：在开发过程中大大提升效率

2.2、基于vite

# 安装vite
npm install vite -g
# 初始化vite项目
npm init @vitejs/app vite-demo
-> vue
-> vue
或
npm init vite-app vite-demo
或(推荐)
npm init vite@latest
# 进入项目文件夹
cd vite-demo
# 安装项目所需的依赖
npm install
# 运行项目
npm run dev
# 生成dist目录
npm build
# 预览
npm serve

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <p>1234567</p>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

访问：http://localhost:3000/可实时查看效果。

3、vue3

3.1、区别

3.1.1、v-if与v-for

https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html

v-if与v-for的优先级对比
2.x版本中，v-for高于v-if
3.x版本中，v-if高于v-for

3.1.2、v-for中的Ref数组

https://v3.cn.vuejs.org/guide/migration/array-refs.html
Vue 2 中，在 v-for 中使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。
Vue 3 中，此类用法将不再自动创建 $ref 数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：

<div v-for="item in list" :ref="setItemRef"></div>

3.1.3、$children

https://v3.cn.vuejs.org/guide/migration/children.html
children 实例 property 已从 Vue 3.0 中移除，不再支持。建议使用 $refs。2.x中，开发者可以使用this.$children 访问当前实例的直接子组件。

3.2、setup

https://v3.cn.vuejs.org/guide/composition-api-setup.html
什么是：组合式API

3.2.1、解决的问题

使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

3.2.2、响应区别

vue2.x：ObjectdefineProperty()；存在的问题：不能监听数组的变化；必须遍历对象的每一个属性
vue3.x：Proxy；不需要遍历

3.2.3、使用渲染函数

ref：定义数据的，简单类型
reactive：定义数据的，复杂类型

3.2.4、unplugin-auto-import

解决场景：在组件中开发无需每次引入import { ref }…

安装插件

npm i -D unplugin-auto-import

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    autoImport({
      //自动导入vue和vue-router相关函数
      imports:['vue','vue-router']
    })
  ]
})

3.2.5、toRefs

https://v3.cn.vuejs.org/guide/composition-api-setup.html#props
需要解构prop，可以在setup函数中使用toRefs函数来完成此操作

3.2.6、computed

3.3、生命周期

https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html
选项式API
setup组合式API
注意：没有beforeCreate、created，其它生命周期要使用前加"on"

3.4、watch

https://v3.cn.vuejs.org/api/computed-watch-api.html#watch
watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

监听数据[初始化监听]

watch( msg,(new_val,old_val)=>{
	console.log(new_val,old_val)
},{
	immediate:true
})

监听多个数据[一起监听]

watch([msg,str],(new_val,old_val)=>{
	console.log(new_val,old_val)
},{
	immediate:true
})

监听"对象"中某个对象

watch(()=>obj.arr,(new_val,old_val)=>{
	console.log(new_val,old_val)
})

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect(()=>{
	console.log(msg.value)
})

3.5、路由

https://v3.cn.vuejs.org/guide/routing.html#官方-router
https://router.vuejs.org/zh/api/
跳转
传值
导航守卫

3.6、组件-父传子

https://v3.cn.vuejs.org/guide/composition-api-setup.html#props

3.7、组件-子传父

https://v3.cn.vuejs.org/guide/composition-api-setup.html#context

3.8、组件-兄弟组件

安装

npm install mitt -S

3.9、v-model传值

https://v3.cn.vuejs.org/api/directives.html#v-model

3.10、插槽

https://v3.cn.vuejs.org/guide/component-slots.html
匿名插槽
具名插槽
作用域插槽
动态插槽

3.11、Teleport(传送)

https://v3.cn.vuejs.org/guide/teleport.html

3.12、动态组件

https://v3.cn.vuejs.org/guide/component-dynamic-async.html

<component :is="currentTabComponent"></component>

3.13、异步组件

https://v3.cn.vuejs.org/guide/component-dynamic-async.html#异步组件
https://vueuse.org/core/useIntersectionObserver/#usage

使用场景

组件按需引入：当用户访问到了组件再去加载该组件
打包分包处理：需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

3.14、Mixin(混入)

https://v3.cn.vuejs.org/guide/mixins.html
Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

3.15、Provide/Inject(依赖注入)

https://v3.cn.vuejs.org/guide/component-provide-inject.html
需要从父组件向子组件传递数据时，可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

3.16、Vuex

state

let num = computed( ()=>store.state.num );

getters

let total = computed( ()=>store.getters.total )

mutations

store.commit( 'xxx' )

actions

store.dispatch( 'xxx' )

modules

和之前版本一样

持久化存储(插件)

npm i vuex-persistedstate -S

3.17、Pinia

https://pinia.vuejs.org/introduction.html

vuex与pinia区别

• 支持选项式API和组合式API写法
• pinia没有mutations，只有state、getters、actions
• pinia分模块不需要modules（之前vuex分模块需要modules）
• TypeScript支持很好
• 自动化代码拆分
• pinia体积更小（性能更好）
• pinia可以直接修改state数据

使用

https://pinia.vuejs.org/getting-started.html

npm install pinia

pinia分模块

pinia持久化存储

安装插件

npm i pinia-plugin-persist --save

3.18、设置代理

设置代理解决跨域问题

4、项目

saas

vue-router

npm install vue-router@4 -S

reset.css

https://meyerweb.com/eric/tools/css/reset/

element-plus

https://element-plus.org/zh-CN/guide/design.html

安装

npm install element-plus --save

NavSwiper

5、组件

组件：https://www.jspang.com/article/69

npm install element-plus --save

### NavSwiper

## 5、组件