00:00
大家好,我是学习园地的特约讲师高若峰,前面呢,咱们学完了v exx,主要是对状态进行管理的,如果我们需要在多个组件用到相同的状态,那么我们就把这些状态放到VX,用VX进行去管理。那如果有一些咱们VS没讲到的语法,在后边咱们项目遇到的时候,咱们才会继续向大家讲解,那这节课呢,咱们来学习新的知识点,在V3里边给我们新加的一个组合API,也就是comption API,那什么是组合API呢?那这是它的那概念,那一会咱们再用一个例子对比一下你就明白了。那现在咱简单了解一下概念,也就传统的使用option配置,也就是在每个组件里边,那么我们创建未有实例的时候,我们都有一个option option里边我们生命为生命date对吧,计算属性方法。呃等等这样的都是按照固定的will的语法格式给我们声明的这样的一个选项,比如说我们写事件方法必须声明在met OS那个里面,那么机械属性呢,我们必须写在copy的里面,对吧?那随着业务复杂度越来越高,代码量会不断的加大,对吧?由于业务的代码需要遵循,因为我们写will就得遵循把数据放在data里边,方法放在呃,Met sod里面,对不对,那都要遵循。
01:22
Options配置写到特定区域,那就导致了我们的维护是非常复杂的,同时呢,代码的可复用性都不高,而组合式API那就是为了解决这个问题而生的。当然,如果你写小项目,你不需要用到组合API,如果你的项目比较大的话,那建议大家使用组合式API。那有可能说这个说的还不太明白,那我们做一个例子就明白了,因为comp API字面意思是组合API,就是为了实现基于函数的逻辑复用机制而产生的,那主要思想就是我们将它定义为所有的东西都定义在stop setup setup是一个入口方法函数里边,然后在这方法里边返回变量,变量呢在组件里面去使用。
02:05
而不是说我们在组件的里边,比如说定义属性啊,定义方法呀,对吧,定义这方法我们怎么能写S了对吧,在这里边写啊,或者是计算属性在这里边写,那我们直接在塞塔的方法里边,你可以随意的生级变量,随意的生级方法,所以呢,可扩展性和可唯护性都比较强,那我们先体验一下这样的基本案例,你们先用一下,那同样我们新学一个知识点,我们就先创建一个项目,这是DEMO,我们回到上一层目录,VE创建一个c ret创建一个项目,叫做DEMO6项目。哎,我们创建一下。这个时候让我们选择,因为我们现在也不需要选择新的功能,那我们就选择最后的DEMO5,用这个模板来创建,你看里边包含SARS的功能,嗯,颁布的功能,入路由的功能,我用ES功能,那我们就用这个模板直接创建了。然后等待一下。
03:05
好,我们用模板创建,就不用我们选择的配置直接创建完了,当然我快进了一下啊,那在这里面我们看一下,我们就生成了一个M6的一个文件夹,在这里边我们去写,其他我们都不变,我们只是改变一下这里边了,比如说我们把后改成我们叫做呃,原生的。就是呃,以前的就是VUE的代码应该也全是叫VE代码,我叫做呃原生的,诶请况一下说法啊。原生什么VE对吧,然后把关于这块,关于那个菜单我们改成是嗯,组合式API组合是API。变成这两个,那后边呢,我们在写哪一个例子的时候,我们就新建一个页面去写就行了,其他的这里边东西,然后呢,我们在组合的这里边,我们这个,嗯,把它去掉不需要不需要呢?那我们找到这个,呃,视图里边找到后面页面,我们先把这个原生的这里边都不需要了。
04:04
都不需要,这个呢,我们也不需要,然后这个我们也不需要加动词,我们可以留着对吧,所有的其他的东西我们全部需要写在这里边,然后我们看一下把页面呃,放在这local host。八零。诶,我们服务器啊,我们没有运行这个服务器,只是创建完项目了,那我们进入这个DEMO6里边,DEMO6里边,呃,NP serve。运行一下。把服务器启动起来。看启动起来了,那我们这块原生的现在是没有主播是API,我写这两个例子主要是给大家进行对比一下。这个怎么去掉方换了吧,然后你看我们现在写几个,如果我们想在页面里边想显示一些数据的话,我们使用以前的我们的方法,但是小项目只用以前的方法,所有都放在date里边,Date里边返回一个对象,这个对象里边声明的数据就是显示的数据是什么都可以,对不对?那比如说我们有个呃,可以是这里边con做一个数,比如说我们是零,对吧,其他我们也不去写,就写简单的,然后呢,我们想这个数据在页面上显示对吧,我们Co这块定一个H3吧,这样C和T这个数,那我们这里边直接用差值的方式cut显示,这是呃。
05:32
最普通的方式,你看这个数是零,那我们现在假如说我想让它有计算属性,是它的一个,呃,这个数的平方或者是二倍,对吧,那我们computer,对吧,计算属性,计算属性如果里边就是一个get的方法,比如do double。这长啊啊double,那我们直接写个方法就可以了,对不对,Double,然后下边这块标方加上逗号,然后我们返回,你看这次里边的谁啊,Z里边的cont乘以Z里边的cont,这就是这个平方,然后呢,我们页面上想显示double这个数。
06:08
这块CTRLD复制一下,然后啊,Dou b平方啊,Double乘二,那我们二就行,因为咱们是double嘛,乘二,然后我这块直接do,你看零,当然这个是没有变化了,对不对,然后呢,我们现在想需要一个按钮,对吧,我们再来一个H3,这里边dut to,你看我们做一个事件这里边。啊,增加对吧,增加或者是自加这样的一个功能,然后呢,我们在这里边加一个实件c c lick等于ADD的这样的一个方法调用,那我们ADD这样的一个方法必须得声明在我们这里边的什么met met hods这个里边有多少个方法,事件处理的时候都是在这里边去声明添加,我们要z.cont加加。
07:01
这样的一个功能就可以了,然后我们增加点击。你看所有的下边都是二倍计算属性,这是我们这就是我们说的这里面描述原生的一个,呃,不好地方,所有都在option配置的方法里边,你看我们现在写的是不是所有都在这里边。因为我们在这里边导出的所有的这些选项,这些选项呢,就是在哪呢,就是在我们的,嗯,我把这些所有的方法全关掉一下,因为有上一节课的那个方法,你看在我们的主方法里面。是不是把我们的APP在这块挂载这个这个APP看到了吗?挂载APP,然后呢,我们在路由这里边,因为这块用到了这个路由,用到了这个路由option这块,对吧?所以呢,就相当于我们把我们的然后呢,这个里边,这个里边的所有的导出的部分加载呢,都相当于在上一级组件的什么option里边,所以呢,你声明每一个组件,你这个相当于就是配置项,就是option。
08:00
OPT iOS options配置项对吧?那这里边名字啊,格式啊,你看都是固定的,你其他的叫别的名字是不行的,包括这里边的什么生命周期啊,对不对?有这里边加起来好几十个方法都得叫固定的名字,那这种随着业务复杂度越来越高,代码不断增加,对吧?遵循它的配置写到特定的区域,会导致后期维护会非常的复杂,复用性不高,因为必须写在固定的位置,那解决这种不容易维护和可复用不高的问题,我们就用option API,也就是组合式API帮我们解决,那组合式API怎么能很好的解决呢?多API你看一下,那我们一样,现在我把组合式API我们放到这个里面,那放到这个组合式API放到这里边,当然这里边我们现在嗯还没写,咱们说写在这里边对不对,里边的所有的东西我们也不要了,所有东西不要了,然后这里边我们SC加一个script,然后这里边EPT导出D,缺什么也导出一个option,但是呢,我们其他的里边其他的可以写date的那些东西啊,原生的写都没问题,对吧?那如果我们是用组合式API,相当于原生的那个升级,那么尽量不要用原生的那种方式,那我们所有的这里边就放一个方法,当然可以放别的了,那我们就set up方法。
09:15
这个从这个方法里边返回的对象,我们才可以去使用。那这里边可以写什么,可以在这里边随意的写变量和方法,不用遵循我们前边的这些条条框框的格式,不用遵循这些格式,比如说。但是写起来其实也挺复杂的啊,你比如说这里边我想声明一个,呃,变量可以声明变量,也可以声明对象啊,我先用声明对象的方式,比如说把数据放在const,我们写个date这个数据,把数据放在这个对象里边,那你直接这么写对象不行,直接这么写对象我们一是找不到,另外呢,它也不是显应式的,所以呢,我们详细详式,对象呢,我们放用什么呢?用一个方法啊,Re,写到这个方法里边,在这个方法里边,我们声明的一个对象就可以了,你看date在这个方法,但是这个方法在哪呢?它是在vuee里边,我们直接在这块用不了,所以我们必须得怎么样用iport引入这个方法,就是re累计,然后它从哪引入呢?从我们的vuee里边,因为我们装了vuee对不对,那就从vuee里边帮我们引入这个方法。
10:21
但这个错误咱先不管它。这个错误,是这个方法写错了port。这样。我们先从这个voe里边把这个方法写出来,那在这里边呢,就定义的是对象,定义的对象,那不管定义什么对象,如果我页面想用的话,那我必须在这里边返回去,把这个对象返回去,也就相当于类似于我们导出,那我把date导出就可以了,导出的数据也就date的数据,也就是这里边声明的这个对象,那我们就可以在页面里使用了,比如说这里边我证明一个cot,因为这里边你看传的也是一个阶层格式嘛,这阶层格就是这样,只不过用这个方法相当渲染一下对不对。
11:01
这个方法在哪哪呢?是vuee里边的,所以呢,第一步一定把VE导出来,比如说零,我跟刚才那例子写的是一样的,然后又把这date导出了,那date导出了,在这里边我们想使用,我们也使用H3一下,在这里边con。使用这个数,那我们用差值的方式,那因为它是放在这个对象里边的,我们将这对象导出了对不对,所以呢,并不是直接使用西欧用计单独声明的,咱们得用另外一个if来来声明啊,那这里边呢,咱们就用这个先就按这个例子先去写。咱们先看一下能不能实现刚才的那个跟原生里一样的效果,那我们这块只有date里边,因为导出的是这个对象嘛,这个对象里边有个con。你看啊,这会儿。你看七分剂是零对吧,就可以了,那如果我想用到计算属性,想用到计算属性,比如说在这里边我们再生明一个值,你看我就没有用到条条框框,这就是随便写的一个变量对不对?你叫什么变量名什么都行,对吧,只导出就行了,那你可以创建很多个变量,然后都导出,不用说像我们这个里面写在date里边,必须写在。
12:05
这个里边,那比如说我再写个计算属性,计算属性呢,我们也不用说非得在写在一个固定的格式里边,那我们比如说直接在这里边do double这个数,你看相当于在这里面声明,那我将这个数的二倍,这个数的二倍,那我们怎么办呢。你看一下直接在这里边Co,嗯,Computer med computer,这里边需要传一个回调方法,回调方法,在回调方法里边,直接我们让这个数乘以二就可以了。因为我们在这里边使用不了Z次,所以呢,你看我们既然想访问数据里边的什么这个数,那我们直接用什么让BATa.cont帮它理,让它乘以二,是不是也是大的,让这个数乘以二,然后呢,直接这个里边计算属性,我们计算完了之后,对吧,相当于在这里边的一个对象里边一个新的成员,所以date我们也返回了,所以在这块我们就可以使用。
13:01
你比如说do,呃,Double,那我们这块直接do保存一下。诶,这怎么没有显示。我看一下为啥没有显示刷新一下。然后看有写错,有错误的地方看错了。我去掉,我再重新刷新一下。嗯。错误,Computer没有定义这个词写错了吗?啊,不是写错了,因为你看他说告诉我这也没有定义,因为这个是哪来的,我们写过这个方法吗?因为在塞大里边所有的都是自己定义,要么定义要么引入,对不对,没有写,所以呢,我们得在这里边引入一下Co pod,你看它也是在VE里边的,对吧,引入一下,这样的话才可以保存一下,然后我们再加新一下。你看就可以了,当然这个数你看啊,没有给我们乘二对吧,我这块你比如说改成一。
14:01
试一下这块改一这块也是变的对不对,但double这块没有do。It里边的返回,哎,这没有问题啊。啊,我们这块得注意一下什么呢?因为我们在使用的时候,如果加这个箭头函数,如果加上大括号,大括号了对不对,你这里面就得写return那一条代码,你可以省略大括号或省略就可以了啊,你保存一下,你看二二就可以了啊,这号改成零。记住这个如果是有一条语句的话,直接它就了这积累属性,当然你可以在里边传一个普通的一个方法都是可以的,那我们下边再加一个按钮,加一个按钮,你看我们再呃处理一下,增加这样的一个方式,那我们这块还是也是同样来一个H3。Bo to,然后正好我们加上一个,嗯。增加,然后我们这块加上一个click点击事cik点击事件,如果在我们原生的里边,对吧,用options那种方法的话,不用这种组合式API的话,我们需要定义一个呃,Match,然后呢,在里边对吧?Ma里边我们在定义方法,这里边呢,我们直接在这定义方法就行,比如说这里边AED我们定义一个方法,定义个方法啊,这个里边本身就是一个方法,不是接入对象,所以里边你不用逗号那个方法去使用,对吧,直接定义方法,那在定义这个方法的时候,我们直接让这里边让ETA里边的cont怎么着加加就可以了。
15:30
那这个方法。这个方法我们可以假如说像外边用,因为所有都在setup里边,Setup里边的入口里边要想用的话,都得返回这个变量在模板里用,我们得返回,那这个方法在模板里用,我们也得返回ad。滴滴,这有错误。你看一下啊,因为我们现在是在大的方法里边,不是说像我们像这个直接在对象里边,我们可以用增强的写法,因为在ES63里边有增强写法吗?这里边我们前面得加个什么function对吧?来这样就没有错了,你看我们这块也多了一个什么增加按钮,我们现在点击。
16:09
点击abd。A,我们看下边啊,这块没写什么,没写调用的方法,如果我想调用里边,这里边用到的不管是变量还是方法一定要什么,一定要在这里边给我们导出去,也就是返回出去才可以啊,那我们用到这个变量和这个变量导入这里边儿在用到的像这个方法和这个方法,那我们也一定要通过什么这个导入的方法导进来才可以来,最后我们看一下增加。二倍计算属性都可以了,看看原生的。这是原生的。你看也是一样的组合式的,写了一样的功能,但是呢,用了两种格式,一种呢是使用组合式API,所有的变量和方法你随便升去写,不用受options那个呃,参数格式的限制,而我们这样的话,可维护和扩展以前写的那种原生的,倒写的那种原生程序也很容易移植过来,所以很容易扩展。而我们传统的这种方式呢,必须按照条条框框对吧,数据状态你就得在data里边,然后呢,计算属性就得在这里边,处理的方法就得在这里边,对吧。
17:12
是这样的。这就是我们,嗯,先体验一下左这PI啊,为了实现基于函数逻辑复用器,这产生的主要思想就是将啊什么定义从这里边函数返回的变量对吧,而不是在组件里边,这里边去使用的,所有的都得定义在setup里面,这是我们体验的例子,好,谢谢大家,这节课我们就讲这。
我来说两句