特出以下声明!!!小编只是一个喜欢系统化总结知识的人,我这里的总结,可以理解为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的神兵利器。

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

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

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

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

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

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

3.4·动态组件

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

vue提供了缓存方法,避免组件切换来回渲染,浪费性能,只需要在组件上加上

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。

a85025a2b6d94566acfee840a5f1158c.png

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