初学vue3, 全是黑盒子,vue3知识点汇总

2024-07-03 18:33 由小程xy 发表于 #前端开发

学习 Vue.js 应该像学习一门编程语言一样，首先要熟练掌握常用的知识，而对于不常用的内容可以简单了解一下。先对整个框架和语言有一个大致的轮廓，然后再逐步补充细节。千万不要像学习算法那样，一开始就钻牛角尖。

前序:

vueAPI的风格分为: 选项式和组合式，vue2中一般用选项式, 所以文章中讲到的api一般都是组合式

vue3官方推荐用基于 Vite 的构建项目，首先安装 node.js, 然后在终端输入
npm create vue@latest，根据提示构建项目。npm install 和 npm run dev 分别是下载依赖和运行项目

当然你也可以通过vue ui来构建项目

1、初识vue：

1.1、项目结构:

当我们新建一个vue项目时, 整个项目刚开始会有很多.vue, .js, .html .css文件，但真正有用的只有index.html, App.vue和一些配置文件

vue组件包含三个区域, 分别用来写html,js(ts),css 其中style的scoped可以让css样式的作用域限定到当前组件

<template>
</template>


<script>
</script>


<style scoped>
</style>

1.2、vue常用函数

createApp():是Vue 3中用来创建一个新的Vue应用实例的方法。它接受一个根组件作为参数，并返回一个应用实例。根组件就是export出去的name字符串

mount(): 是把createApp创建的应用实例挂载到一个容器上。接受的参数容器可以是一个css的选择器

createApp(App).mount('#app') // App.vue文件中
<div id="app"></div>	//index.html中
我们刚创建的项目中会有上面的两个文件, 实际上就是创建了一个App实列, 通过id选择器把它挂载到一个div上

setup(): 是一个函数, 函数里面可以定义响应式变量、计算属性、方法, 然后把变量, 方法 return 出去, 就可以在该组件的template中使用。（我们一个组件所用到的函数、变量都写在这里面）

我们每个组件的name、setup、components...都需要export出去。其中name是这个组件的名字, 当其他组件要用到当前组件的时候就是要<name/>,

如下: 在setup函数中定义了name和click方法给当前组件的html使用。代码中的(@用来绑定事件, 包括html所有事件和自定义事件)

<template>
  <h1>{{ age }}</h1> 		<!-- {{ }} 双大括号将 Vue 实例中的数据绑定到 HTML 元素中 -->
  <button @click="handleClick">click</button>
</template>

<script lang="ts">
export default {
  name : "App",
  setup : () => {
	    let age= 10;
	    const handleClick = () => {
	    age = 18;
    }
    return {name, handleClick}
  }
}
</script>

前面讲到setup里面定义的方法，变量等都需要return出去之后 html 中才能使用，下面这个语法糖可以让我们不用一个个写return

setup语法糖: 在<script setup> </script>中写方法、状态的话，不需要把方法或状态return回去, vue会自动帮我们return, 而且也不需要用components注册用到的组件。

ref(): 是一个函数，使用 ref 函数可以创建一个包装过的响应式对象，使其能够在 Vue 组件中进行响应式数据绑定。ref接受的参数是基本类型、数组、对象类型的。(当参数是对象时, ref内部其实是调用的reactive)

reactive(): 使用 reactive函数可以创建一个包装过的响应式对象，reactive接受的参数是对象类型的

响应式数据指的是当我们的变量发生变化的时候, 跟这个变量相关的元素就会自动刷新。
上面的代码中我们点击button的时候会把age = 18, 但实际上我们页面显示的时候age还是等于10, 因为age不是响应式的变量
所以我们需要用ref创建age变量, let age = ref(10), 这样age发生变化时, 跟age相关的元素也会自动刷新。(需要注意: 在js中使用由ref创建的响应式对象是要加上".value", 比如 age.value；在html中则不需要, 可直接写成age)

toRefs和toRef:当我们把一个对象或者变量解构的时候。假设person对象中有name, age const {name, age} = person，那么此时解构出来的的name和age不再具有响应式。为了使解构出来的仍然具有响应式,那么应该用toRefs或toRef包括起来。 const {name, age} = toRefs(person).

computed():是基于其他数据的值计算出来属性，并且当这些数据变化时，计算属性的值会自动更新

计算属性是基于它们的依赖进行缓存的，只在其依赖发生变化时才会重新计算，而方法每次调用时都会重新执行。

如下, 如果是基于函数getFullName()计算全名的话当name发生变化是控制台会输出3次1, 如果是用FullNameByComputed的话, 控制台只会输出一个1

<span>{{ getFullName() }}</span><br>
<span>{{ getFullName() }}</span><br>
<span>{{ getFullName() }}</span><br>

setup : () => {
    let firstname = ref('');
    let lastname = ref('');

    const getFullName = () => {
      return firstname.value + lastname.value;
    }
	const FullNameByComputed= computed(() => {
      console.log(1); 
      return firstname.value + lastname.value;
    });
    
	return {firstname, lastname, getFullName, FullNameByComputed}
}

通过上面的computed创建的FullNameByComputed是一个类似ref创建的对象, 在js(script标签)中要访问FullNameByComputed的话需要FullNameByComputed.value。
如果需要直接修改value的话需要在创建对象的时候传递get和set方法，如下

const getFullNameComputed = computed({
      get: ()=> {
        return firstname.value + "-" + lastname.value;
      },
      set: (newName)=> {
        let name = newName.split('-');
        firstname.value = name[0];
        lastname.value = name[1];
      }
    });

上面代码中，当我们FullNameByComputed.value的话, vue会自动调用get方法, 当我们FullNameByComputed.value=newName的时候，会自动调用set方法, 并把等号右边的值传递到set参数中

1.3、常用语法糖

v-model: 是 Vue.js 中用于在表单控件（如输入框、复选框、单选按钮等）和组件之间创建双向数据绑定
如下: 我们让username和输入框双向绑定, 当用户在输入框中输入字符时, username 就会变成用户输入的值。其中username需要是响应式的变量

<input v-model="username" type="text">
<p>{{ username }}</p>
let username = ref('');

v-for: 通过 ... in ... 用来遍历数组
如下: 假设我们有一个persons数组, 数组长度是3，那么我们可以通过v-for来生成3个li标签。其中对于遍历生成的标签我们需要通过:key="“给他绑定一个唯一的key, 一般用id。(注意key前面的:, 不写:的话，vue会把person.id当成字符串解析)

<li v-for="person in persons" :key="person.id">{{ person.name }}</li>

v-if和v-else就如他们的字面意思, 判断用的

注意: 上面文章和下面文章中用到的函数需要自己引入，如computed、ref等等，文章中就不再过多赘述了。

2、路由器router：

2.1、路由的定义与使用:

通过 Vue Router，我们可以轻松地定义路由规则，将不同的 URL 映射到不同的组件，并在这些组件之间切换，通俗的讲就是我们可以让页面在不同的url上显示我们想要显示的组件。

router是路由器的意思, route是路由的意思，我们需要给vue的实例创建一个router, 通过createRouter()函数.

const router = createRouter({
    history: createWebHistory(),    // 路由器的工作模式, 下面会讲到
    routes : [
        {
            path : "/home",	// url匹配path的时候路由器会渲染这个路由的组件
            name : "HomeView",	// 当前的路由route的名字
            component : Person,	// 路由的组件
        },	// 后面可以继续写多个route, router匹配时会从前往后匹配
        {},...
    ]
})

使用router:

引入:
我们通过createApp()可以创建一个vue实例, const app = createApp(App), 通过app.use(router)使实例使用router。use(router)的参数是我们上面代码用createRouter()创建的

上面我们创建并在实例中使用了router, 但是我们并没有给router说，我们要在页面的哪个部分渲染组件, 所以我们要在我们想要渲染的位置写上<RouterView/>(一般是在App.vue的template的某个地方)。

最后实现的效果就是, 当url跟我们的某个route匹配时，vue的router就会自动的在我们指定的渲染位置上渲染url对应的组件

渲染模式

渲染模式分为前端渲染和后端渲染, html中可以通过a href标签实现点击跳转url，这是后端渲染。(点击a标签的时候页面会重新加载一下, 感觉不出来的话可以点击F12 选中network, 每次点击时network中会重新加载文件，)

vue中我们可以通过<router-link to="">点击跳转</router-link>,来代替a标签，to相当于href,这就是实现了前端渲染。(当我们点击的时候会发现浏览器并没有重新加载。)(这里不详细讲前后端渲染了)

to的三种写法
<router-link to="">点击跳转</router-link>中的to有三种写法.(to前面加上:, 才能让vue不把后面的内容解析成字符串)

to="/home"
:to="{path : "/home"}"
:to="{name: "HomeView"}"

路由模式

Hash 模式路由使用 URL 的 hash（#）部分来模拟一个完整的 URL，实际 URL 的路径部分始终是 # 符号之前的内容
History 模式利用 HTML5 History API 来管理路由，这使得 URL 看起来像普通的 URL，没有 # 符号。

2.2、路由的传参:

一般用第二种。(useRoute()创建的对象中包含query和params)

通过props.query + path
传递:
上面我们通过to的第一种写法后面加上?加上我们要传的参数即可(通过&分隔要传不同的参数)。<router-link :to="`/home?name=${name}`">router link</router-link>或 <router-link :to="{ path : '/home', query: { name, } }" > router link </router-link>, 通过这种方式即可把当前组件中的name传递到要路由到的组件中
接收:
路由组件通过useRoute()创建对象, 对象的query对象中就存着我们传递的数据const route = useRoute(); console.log(route.query.name)
通过props.params + name
前提我们需要修改router的routes的path路径, 通过用:占位。path : "/home/:name"。
然后可以通过<router-link :to="{ name: 'HomeView', params: { name : '1', } }" > router link </router-link>,或 <router-link :to="`/home/${name}`">router link</router-link> 进行传递
需要渲染的路由组件中通过route.params.name访问

2.3、路由的props配置:

一般传参用上面2.2的第二种写法就行, 下面这个也是一种传参的写法, 只不过不需要用useRoute。

{
            path : "/home/:name",
            name : "HomeView",
            component : Person,
            props(route) {	// props接收的是当前的路由信息, 里面有path,params,query等等, 你可以输出查看下
                return route.params;
            },
          //  props:true,	// 等价于 return route.params
          // props(route) {return route.query}
        },

如上在路由中添加代码中的三种props代码的话，就相当于是在<Person :name="name"/>, 那么我们就可以通过defineProps来解析出路由中要传的name了。(defineProps3.1中会讲, 注意:每种props写法要对应上面路由的传参对应的传递写法)

2.4、编程式路由:

上面我们都是通过router-link标签的to属性实现跳转, router-link标签相当于html的a标签，那么我们只能实现通过点击链接的形式实现跳转, 如果要实现点击button实现跳转，那就可以通过管理路由器实现。(通过路由器就可以实现多种形式的跳转)

通过useRouter()创建一个router路由器,router.push()就可以实现跳转，push中可传递的参数和2.1中 "to的三种写法" 的参数一样

2.4、路由重定向:

通过在route配置中添加下面代码("/"重定向到"/home")

{
      path : "/",
      redirect : "/home",
},
{
      path: '/:pathMatch(.*)',	// 匹配所有路径
      redirect: '/404',	//重定向到/404
    },

3、组件传递数据

我们在项目中分别创建Person.vue 和 App.vue, 其中App.vue中使用<Person/>创建Person组件实例, 即App是Person的父组件

在一般情况下我们父传子的时候用的是下面讲的第一种1. 通过defineProps、子传父的时候用的第二种2. 通过自定义事件

3.1、父组件向子组件传递数据

通过defineProps

父组件中<Person :person="person" :str="str" />，前面我们向子组件中传递了person和str变量, 其中=右边的"person"和"str" 是我们在父组件<script>的setup中定义的两个变量, =左边的是子组件接受时用到的name, 一般命名和父组件中定义时的变量名相同。(个人习惯)

子组件中const AppProps = defineProps(["person", "str"]), 其中[]中的两个字符串对应父组件中的name, AppProps 是包含person和str的对象，这样子组件中就可以通过AppProps.person访问

3.2、子组件向父组件传递数据

通过defineProps
在上面父向子传的时候，可以让父组件给子组件传递一个get方法, 然后让子组件中用defineProps接收一下这个方法，在合适的时候调用, 把要传的数据放到get方法的参数列表
通过自定义事件defineEmits(不只局限于子组件向父组件, 任意两个组件之间都可以)
父组件中定义了get-child-name自定义事件, 给事件绑定了一个函数, 子组件在合适的时机触发get-child-name事件即可

//父组件中
<Person @get-child-name="getChildName" />
const getChildName = (ChildName) => {
  console.log(ChildName.value)
}

//子组件中
const name = ref('child')
const emit = defineEmits()
const sendName = () => {
  emit('get-child-name', name)
}

通过defineExpose（可跳过，不常用3！）
父组件中<Person ref="child_Person" />在子组件的实例上添加上ref属性, 然后在setup中定义const child_Person = ref();，child_Person就是包含子组件暴漏出来的数据的对象(记得ref响应式对象要.value取值)。
(注意: 用child_Person访问子组件的数据时要写在onMounted函数中, onMounted函数可以确保子组件已经被挂载, 不然可能访问不到)
子组件中通过let name = 'hh'; let age = 18; defineExpose({name, age});, 将自己要暴漏出去的写在defineExpose中

3.3、子组件修改父组件的数据

<script setup></script>如果是在这个中通过defineProps中过去的父组件数据的话, 可以直接修改父组件的数据

3.4 mitt自定义事件管理库

上面讲到的3.2的第二种自定义事件一般用于子组件和父组件, 但对于层级较深的就需要一层一层传递，很麻烦， mitt就可以很好帮我们解决问题

mitt一个js的事件管理库, 一般用于管理自定义事件。(安装指令npm install mitt)

一般在一个js文件中创建一个mitt实例, 在其他要用到自定义事件管理的文件中引入mitter

创建一个新的事件总线实例，返回一个包含 on, off, emit, all 等方法的对象，用于管理事件的订阅和发布。
const mitter = mitt();

订阅指定类型的事件，当该类型的事件被触发时，执行指定的处理函数。
mitter.on('eventName', (data) => {
  console.log('Event received with data:', data);
});

取消订阅指定类型的事件，停止执行特定的处理函数。
mitter.off('eventName', handlerFunction);

触发指定类型的事件，并传递可选的事件数据给订阅该事件的处理函数。
mitter.emit('eventName', { message: 'Hello, mitt!' });

订阅所有类型的事件，当任何类型的事件被触发时执行指定的处理函数。
mitter.all((type, data) => {
  console.log(`Event ${type} received with data:`, data);
});

// 清除所有事件监听器
mitter.all.clear();

4、组件之间共享数据Pinia

对于子组件和父组件之间，我们可以通过上面讲到的方法实现数据共享，但是对于有更深层级的组件，我们就需要集中管理状态的方法。Pinia就可以解决这个问题, 安装命令npm install pinia

4.1、数据的定义

在实例中引入pinia, 跟引入router一样

import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia();
app.use(pinia)

一般来说我们会把要共享的组件的数据的pinia放到一个src文件夹下的store中的js文件中。然后在需要使用的文件中引入js，生成store

import { defineStore } from 'pinia'
// defineStore接收的第一个参数是这个store的id(自己定义)
export const usePersonStore = defineStore('Person', {
  state() {
    return {
      name: 'hello',	//return 的就是要共享的数据
    }
  }
})

如果要使用Person的数据的话就:

import { usePersonStore } from '@/store/Person'
const PersonStore = usePersonStore()	//PersonStore 是一个对象
//PersonStore 中包含的就有name, PersonStore.name或PersonStore.$state.name

4.2、数据的修改

直接修改

PersonStore.name = 'ld'

通过$patch修改

PersonStore.$patch({
    name: 'ld'
  })

通过action修改

export const usePersonStore = defineStore('Person', {
// 在action中可以写方法, vue会自动维护一个this, 用来访问当前store中的数据
  actions: {
    changeName() {
      this.name = 'ld'
    }
  },
  state() {
    return {
      name: 'yxc'
    }
  }
})

PersonStore.changeName()	//

对于PersonStore解构出来的数据跟1.2中讲的一样也是不再具有响应式，我们可以用storeToRefs来解构。(虽然也可以用toRefs，但非常不建议)

4.3、getters

如果我们需要计算和返回基于已有状态（state）的新数据，那么可以在getters中写方法

state() {
    return {
      name: 'yxc',
      age: 18
    }
  },
  getters: {	// vue也会自动维护一个this
    doubleName() {
      return this.name + this.name
    }
  }

4.4、subscribe

subscribe 是用于监听 store 的状态变化的方法。Pinia 提供了一种简单而直观的方式来订阅状态变化

订阅方法：通过 store.$subscribe(callback) 方法来订阅状态变化，callback 接受一个参数 mutation，可以是状态的变化信息或其他相关内容。

取消订阅：订阅方法返回一个取消订阅的函数 unsubscribe()，你可以在不需要继续监听状态变化时调用它来取消订阅。

响应式更新：Pinia 使用 Vue.js 的响应式系统来管理状态，因此任何影响状态的变化都会触发订阅者的回调函数。

PersonStore.$subscribe((mutation, state) => {})

mutation: 一个对象，描述了引起状态变化的 mutation。它包含以下属性：

storeId: 发生变化的 store 的 ID。
type: 变化的类型，通常是 direct（直接变化）或 patch（通过 patch 变化）。
events: 包含变化详情的数组。

state: 变化后的 store 状态。

学到这里, 你就可以用vue写项目了。
~~犹豫篇幅太长，其他vue中不常用的内容放到下篇文章了~~

下篇文章地址，待更

热门相关：首辅娇娘重生不嫁豪门惊悚乐园新：九州狂龙九星毒奶