vue知识点整理（Vue知识点总结）

时间2025-04-30 05:52:09分类IT科技浏览3490

导读：特出以下声明！！！小编只是一个喜欢系统化总结知识的人，我这里的总结，可以理解为vue的知识框架。有一些关于语法之类的，建议大家去官网看，可以直接施展CV大法，哈哈哈。同时有一些知识点的认识，跟见解，可能不是很深入。路过的大神，多多指点，温柔点喷。闲话少说，直接上干货。...

特出以下声明！！！小编只是一个喜欢系统化总结知识的人，我这里的总结，可以理解为vue的知识框架。有一些关于语法之类的，建议大家去官网看，可以直接施展CV大法，哈哈哈。同时有一些知识点的认识，跟见解，可能不是很深入。路过的大神，多多指点，温柔点喷。闲话少说，直接上干货。

一，学vue首先要明白，mvvm设计模式。要想明白mvvm，也要了解mvc模式。先浅谈下两种模式。

Mvc模式。

M是modle：模型层，存储数据的地方。

V是view：视图，用来展示数据的视图。

C是controller：控制层。是应用程序中处理用户交互的部分。

Mvvm模式。

在vue中，M就是后端的数据，V就是视图，可以说是dom节点。VM就是vue做的事情。view跟modle是不能直接交互的。这时候vue就是把他们连接起来。vue做的就是数据绑定，vm跟view是心啊双向绑定，当后端的数据发生变化，视图中的对应的也发生变化。反之亦然。

说下他们的区别。

两者最大的区别就是，mvvm实现了view跟vm的双向绑定。当数据发生改变时，我们不需要再去操作dom 。在这里，vm并不是取代了controller ，而是把controller的业务逻辑抽离出来。其他的视图业务操作还是应该放在controller里面。

Vue2主要分为

1 ，vue指令 。

2 ，vue的选项API 。

3 ，vue组件 。

4，vue路由。

5 ，vuex 。

这里把选项api专门放一块是因为，主要是理解下，各种api的作用和特点。在开发项目中，才能应用自如吧。

1.1·vue指令 。指令这块，简单说两个，其他的大家可以参考官方文档。vue的文档，相信是对新手十分友好的。

1.2·v-if跟v-show的区别 。v-if跟v-show ，都可以做到显示隐藏，那具体该怎么用呢。v-if是表达式真假值的判定。表达式为真，则显示，反之则显示v-else,vue中的v-if,也支持else-if 。实际上，是dom结构的替换。而v-show是真假值的判断，实际上是css中display:block/none 。真值则显示，假值则隐藏。

1.3·vue2中v-if与v-for不能一起使用的问题 。因为vue2中有设定两者的优先级，v-for的优先级比v-if高，所以，一起使用的话，遍历的元素每一个都会进行判断，控制台还会报错。这里给大家提供两个解决方案。①判断条件跟item项无关的时候，可以把v-if放在外层。②判断条件跟item项有关的时候，可以用计算属性，过滤出一个想要的结果。

1.4·v-for要写key值。尽量不要用index 。首先我们要知道，加入key值，目的性是为了更高效的更新虚拟DOM 。但是如果用index 、，就是数组的下标，在进行增删改查的时候，操作的是前面的数据，那么，key值就会发生变化，就会造成不必要的性能浪费。

1.5·v-model双向绑定 。不用v-model实现双向绑定。在这里可以使用v-bind绑定input的value值。用v-on:input事件实现。事件函数默认有$event参数，也就是js的事件对象，可以通过e.target.value=绑定的value值，实现。

1.6·这里提下事件修饰符，像常用的取消默认行为，或者，阻止冒泡，vue提供了事件修饰符，

.stop .prevent更多的建议去官网。

还有一些指令，推荐大家去官网看，我这里只是把使用有些指令的注意点简单总结下。

2.1·vue的选项api ，这个在我看来还是挺重要的，了解每个api的特性跟作用，才能在vue中如鱼得水吧。在这里也把vue的生命周期总结下。

2.2·vue2还没有组合api ，主要是靠选项api支撑起vue的业务逻辑。过滤器就不说了，不是很难，vue3也被丢弃掉了。

首先是data 。数据，vue强大的地方之一，data里的数据都是具有响应式的。这里要注意的是，我们在使用的时候，只有在根组件里，可以直接写data ，大括号，里面是键值对的方式。什么是根组件，就是id为app的那个组件，也就是，el或者mount绑定的元素。

methods ，这里很好理解，顾名思义，方法。放置方法的地方，比如，点击事件的函数。每次调用都会执行。

computed ，vue的计算属性，是带有缓存机制的，并且是响应式的，只有依赖的数据发生改变的时候，才会重新计算。这就是跟方法的区别。并且compued，调用就像调用属性一样。也可以定义属性为get/set可读写的属性，这是methods里做不到的。

watch ，侦听器，用来监听数据的变化，侦听器的名字与data的属性同名接受两个参数，old ，new ，就是旧值，新值的意思，一个侦听器对应一个数据，数据发生改变，就会触发侦听器。同时，侦听器支持异步操作，这是计算属性没有的。

那么问题来了，到底什么时候用计算属性，什么时候用侦听器，这里给大家总结下，

当我们计算到开销比较大的，或者数据比较多/需要进行异步的时候，建议用侦听器。其他的建议用计算属性。因为计算属性有缓存，可以节约多次计算的性能。

2.3·vue的生命周期

vue为我们提供了生命周期钩子。大家可以理解为vue从初始化到卸载各个时期的函数。

给大家准备了一张图，大家可以作为参考。我讲几点，生命周期函数的注意点。

①首先生命周期函数不能用箭头函数写，众所周知，箭头函数是没有this的。

②比较常用的就是created ，mounted 。做请求的时候可以写在这里面，当然也包括，beforeMounted 。

③如果要做dom操作，要写在mounted，之后，就是挂载以后。

④deforeUpdate ，updated，这里要注意，他们两个都是在数据改变之后的，这里的之前表示的是，页面重新渲染的前后。所以，从这里我们知道，vue的数据更新跟页面渲染不是同时进行的，那么就会出现另一个问题，异步更新队列，这里要用到this.$nexttick() 。（这里不理解的可以去找一个专门写$nexttick()的文章看下）

3.1·vue组件 ，vue的核心之一。

①组件是独立，可复用的代码块。

②组件应该是高内聚，低耦合的。(不懂高内聚，低耦合的可以去找找csdn大神的看看，要想是一个优秀的组件，肯定要符合这个条件的) 。

③组件化可以提高开发效率，测试性。

④组件祖遵循单向数据流的特点。

组件的语法，这里就不介绍了，可以参考官网。下面说说组件化需要掌握的一些知识点。

3.2·组件传值 。

组件传值分为，父子传值，兄弟传值。

父子传值父组件向子组件传值。这里要说一点，在父组件的template里面的都是属于父组件的。

①在父组件的子组件标签用属性：属性，子组件用，props接受，props可以是数组，也可以是对象，对象的话，里面可以写明接受的数据类型，在进行联合项目开发中，建议第二种写法，同事一看，就知道该用什么数据类型。

②父传子，还可以用依赖注入，父组件provide:function ，返回数据，子组件用inject接受，数组类型。这里要注意，vue2的依赖注入是没有响应式，vue3解决了这个问题，所以，vue2中不建议大家传值用依赖注入。

③父传子，还可以用this.$root/this.$parent ，在子组件里用可以获得父组件的实例。

④使用插槽。

子组件向父组件传值。

①在父组件的子组件标签上添加自定义事件，子组件用this.$emit进行提交并传值。

②使用ref属性，配合this.$refs获得子组件的实例。（这里要注意，这里获得实例要在mounted后面们就是组件挂载以后，才能获得）

③使用作用域插槽，在子组件的插槽上自定义属性：属性，在父组件用v-solt接受。

兄弟传值。

兄弟组件，主要是用事件总线解决。可以创建一个vue实例，为bus ，然后发送组件通过bus实例的$emit发送，第一个参数是触发事件的函数，第二个是要发送的数据，接受组件通过bus实例的$on接受，第一个参数是监听事件的函数，第二个是是一个回调函数，回调函数的参数data就是接受的数据。

既然创建的bus实例是作为事件总线，来用bus实例的方法，发送与接受，所以，这里我们用vue自身的实例也是可以的。方法一样的。

传值还有一个办法，可以轻松解决，就是vuex ，不过vuex不是每一个项目都要用的，如果项目比较大，或者，组件很多，传值很多的话，可以用，会方便很多，后面会讲vuex 。

3.3·插槽，自我认为，插槽是vue的神兵利器。

首先要理解什么是插槽，插槽其实就是子组件提供给父组件的一个占位符，用<solt></solt>表示。也就是子组件提供一个坑，父组件可以给放入对应的内容填坑，内容就是替换<solt></solt>，插槽里面可以写html代码，组件等。

其实这里应该放代码，便于大家理解，但是，工作量实在太大了，这里就说下插槽的注意点，跟类型。

插槽有匿名插槽，具名插槽，作用域插槽。

匿名插槽 ，简单来说就是没用名字的插槽，用<solt></solt>就可以添加匿名插槽，匿名插槽可以设置默认内容，就是<solt>默认内容</solt> ，如果没有传入内容就用默认内容。

具名插槽 ，简单来说就是有名字的插槽。<solt name=""></solt>,父组件用template v-solt名字/#名字，在这里template对应名字的内容，就放在对应的solt名字对应的插槽。

作用域插槽 。作用域插槽，可以用来传值。作用域插槽要有name属性，子组件的插槽向父组件传值，值如果是固定值就直接写，如果是变量就用v-bind绑定。父组件用v-solt:name={传递的值}

3.4·动态组件

在不同组件之间进行动态切换通过 Vue 的 <component> 元素加一个特殊的 is=""来实现

vue提供了缓存方法，避免组件切换来回渲染，浪费性能，只需要在组件上加上<keep-alive> <component :is=""></component> </keep-alive>

4.1·vue路由 。我们知道，vue是一个单页面应用，那么在进行页面改变的时候，其实就是SPA ，我们通过改变url来跳转不用的页面或者组件。

平时在工作中，我们使用脚手架，都会配置好路由，所以今天在这里就不写基本语法，还是说下注意点吧。

4.2·$router与$route的区别，

$router是一个全局router实例，通过vue根实例注入router ，在注册到每一个子组件上，让整个页面拥有路由功能。其中包括了很多路由对象根属性(包括history),任何页面都可以调用$router的push()/replace()/go() 进行页面或者组件的跳转。整个应用只有一个

$route是当前的路由信息，只是当前的，能获得当前路由的path,parmas,name,query等，每个路由都有对应的。

4.3·路由跳转，分为编程式导航，声明式导航。

编程式导航也就是用$router的push()/replace()/go()方法。

声明式导航就是用vue提供的router-link标签，to属性写路由，默认会被渲染成一个a标签，还有target属性，可以指定标签变成html官方标签，vue3被丢弃了，这个属性。只要在需要跳转的组件添加outer-view ，router-link还自带了类名，在做高亮的时候，很方便。

两种方法，其实都可以达到一样的效果，只是，在有高亮效果的情景，声明式明显更加好用。

4.4·路由重定向，vue可以设置路由重定向。当用户访问/时，url会被替换成/index ，然后匹配路由为/index ，语法可以移步到官网。

4.5·动态路由 ，有很多时候，我们需要通过url来传递id或者一些参数就需要动态路由，就是在path:路由后面加上:id/参数，参数会被设置到$route对象里，通过$route.parmas.id/参数拿到。

4.6·路由守卫。

路由守卫就是对路由进行权限管理，大家可以这样理解，有了守卫，就像有了保安，必须要放行，或者验证一些东西，才能进去路由。

路由守卫分为全局前置守卫，路由独享守卫，组件内守卫。

全局导航守卫 ，用的比较多的。全局前置守卫router.beforeEach ，接受一个回调函数，回调函数的参数接受三个参数(to,from,next) ，to代表要去的路由，from代表要离开的路由，next表示放行，里面可以写路由，这里可以进行路由鉴权，可以验证，用户是否登录，比如可以看用户是否有token ，有的话就放行，没的话，就跳转登陆页面。

路由独享守卫 ，路由独享守卫的书写跟全局前置守卫写法一样，也可以用作做路由鉴权，只不过，路由独享守卫写在单独的路由上，所以只能用在单独的路由上。

组件内守卫 ，组件内守卫，实在组件内使用，beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave 。beforeRouteEnter ，在进入路由前被调用，注意在这里不能获得this.因为此时进入的组件实例还没有创建，这里可以做请求数据，就是请求完数据以后，再进入页面。不过这样的话，点击以后，可能要等一会，当然也可以加上loading页面。

路由元信息 ，其实就是，可以自定义配置的路由对象，meta ，可以给路由加上，在里面写上，想要定义的属性，与属性值。在路由守卫中，可以使用，也可以在当前路由信息对象，$route里获得。这里就可以做很多事情了，比如，可以定义一个title属性，进入不同的路由，显示不同的title属性值，然后通过document.title等于属性值，来做到动态标题信息。还有meta的属性不是只读的，也可以写，所以我们也可以改变meta的属性值。

5.1·vuex ，vuex是vue的状态管理模式。简单来说，就是vue的集中式管理工具，当我们组件很多，做较大型项目，传值很复杂的时候，我们就该想到vuex了。

vuex有五大核心。

state是单一状态树。大家可以理解为vue的公共数据存放处。

getters就是vuex为我们提供的vuex的计算属性

mutations是vuex ，store中唯一改变状态的提交处。接受一个函数，接受state作为参数。实际上这里主要是同步操作store中的数据。这里注意，mutations一定是也必须使同步函数。

actions是类似于mutations ，只不过，actions中不是直接改变状态，而是提交到mutations中，actions主要作用是，进行异步操作，异步操作完成提交mutations ，再通过mutations来同步改变状态。actions接受context作为参数，context上下文的意思，里面有commit方法，actions就是通过commit提交到mutations 。

modules是vuex的模块化，其实就是把vuex拆分为了各个模块，而每个模块都拥有自己的state ，getters ，mutations，actions 。当开发大型应用，其实用到store ，组件，数据，就肯定不会少，就肯定要使用模块化，使store看起来不是那么臃肿。更加清晰，有利于后期的维护与优化。

5.2·再组件中使用store

在组件中获得state

state在组件中要用计算属性去获得，返回this.$store.state.属性去获得。当我们需要获得的数据较多的时候，其实这样写起来就会有点复杂，vuex为我们提供了辅助函数。要先从vuex中结构辅助函数Mapstate ，

Mapstate([])依然在计算属性中写，直接在里面写数据，其实就是把store的state的数据映射到组件中。在这里如果要与组件中本来的state的数据一起使用，可以加上展开运算符...MapState([])

getters在组件中也要用计算属性去获得，也有对应的辅助函数，MapGetters ，用法差不多的。

而mutations跟actions是在methods里使用，同样有辅助函数。MapMutations，MapActions。

如果结合modules一起使用的情况，组件中使用store有一点点不一样，当modules有了对应的名字，state要加上modules的名字，而getters ，mutations ，actions ，默认是全局的。当然，可以给模块加上namespaced:true,这样的话，在使用getters ，mutations ，actions ，就需要加上对应模块的名字。这里具体怎么用，可以去官网看下语法。这里给大家提供一张图便于大家更好的理解store 。

本来还想总结下vue3 ，以及vue2跟vue3原理上以及实际操作的区别，但是，时间有限，这是第二次发csdn ，现在已经码了七千字了，就先到这里了把，后续空闲时间，再发布vue3 ，以及对比。