学习 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中不常用的内容放到下篇文章了