day05/上午/092-尚硅谷-尚融宝-使用计算属性和方法显示反转字符串

那么无论是用计算属性还是用方法，我们都需要写一系列的其他的代码，并且呢，我们需要把代码呢，就是从我们的视图当中移植到我们的脚本的这个部分啊，那我们先用这个方法来做一下，那方法的话呢，就跟刚才我们写今天一样，在这地方呢，我们先定一个methods methods里面呢，我们自己起一个方法名，比如说就叫re wordss的啊，这方法名是我们自己起的啊，然后大家在写这个方法呃的时候呢，需要注意就呃也是尽量避免使用一些关键字什么的，跟Java当中的啊，这个这个规范都是一样的啊，然后接下来呢，在reversed里面，我们直接就把这个。有的拿到。直接叫称它就可以了啊，然后在这块呢，我们可以写一个日志啊，叫方法对调用行吧，嗯，就证明我们我们曾经来到过这，好，然后接下来呢，怎么去调用这个方法呢？在我们的页面当中，我们呢，直接可以调用方法用用这种形式来调用，明白吧，啊好，然后接下来呢，我们来看一下右键运行，好大家看这个，呃，等一下我看一下啊叫reverse啊，我写没写错。

MY。Data methods reversed return split，然后呢，嗯。反转消息看看啊。我先写一个，少写一个括号是吧，这个再写一个括号就对了啊。好了。然后我来看一下F12。它叫message is not DeFined message是哪来的？Message是我直接拿过来的，那么message为什么not DeFined呢？因为这种message的使用呢，你你只能在页面当中直接调，你如果在方法当中去调的话呢，前面跟Java一样加个this，明白哈，然后我们呢，再给它保存一下，保存一下之后呢，再看这样的话，它是不是就反转过来了啊，所以这个过程大家要学会看前端的报错啊，我再把刚才这个给大家展示一下，就是比如说刚才我忘了写this了，然后看看它主要的错误，你看他在这个地方非常明确的告诉我们了，说message is not DeFined对吧，然后这块也写message is not DeFined，然后这块是计算属性三十五行，然后我们可以点进去，点进去之后就这块，那明确的告诉我们就是这个地方的message没定义，为什么没定义一小二原来忘记写，累死了啊，所以借助于前端的这个控制台。

啊，大家一定要学会看这个错误提示，这样的话呢，咱们可以迅速的定位到问题在哪，所以这块呢，我们加上this啊，然后这块呢，我就写我再写一个吧。

然后写方法。好，然后接下来呢，我们来看一下方法，确实是很方便，但是方法呢有一个问题，什么问题呢，大家看，当我在页面当中啊，想展示一次这个啊反转消息的时候呢，我就调用了一次方法，那么接下来呢，我想在这个页面当中呢，我再展示一次反转消息。啊，我展示了若干次反转消息，然后呢，我们来看一下啊，确实呢，这个若干次的反转消息呢，都被展示出来了，但是呢，下面的方法呢，被反反复复调用了多次，这样的话呢，就不利于我们啊前端页面展示的一个性能的优化，因为实际上大家都知道这个左算右算，它都是一个结果，所以呢，其实算一次就行了，我们能不能有一个呃，就缓存是不是就像我们在后端学习的RA似的，呃，第一次取出来的时候，把它放在缓存里，然后每以后每一次取的时候呢，都从缓存里取就行了，不用反反复复的去重复的计算了啊所以呢，这样呢就要依赖于我们的计算属性，所以接下来呢，我们来看一下计算属性，那计算属性呢，它有一个关键字叫做坑。

Cut啊，后面这个，然后呢，它也是一个冒号，冒号后面呢，是一个大括号的一个形式，注意它就这一种写法啊，它和前面data不一样，Data你看有有这个写法，还有直接写大括号冒号的写法，这computer method写啊，不一样了，他们就这一种写法啊，好，然后接下来呢，在computer里面呢，我们写一个计算属性，计算属性呢，我们比如说写一个MESSAGE2啊，首先随便写点内容啊，这样行不行呢？不行，因为计算里面属性里面的内容呢，必须是经过计算出来的，所以计算属性里面呢，要能够写逻辑，那怎么才能能够写逻辑呢，必须定义成方法的形式，所以这个就是计算属性，比如说return，好，我们先来看一下这个计算属性当中的message。

既然它叫属性，所以呢，在view当中，实际上呢，我们是可以看到它也是一个，呃，就是当前我们页面当中的一个数据模型啊，那如果我将这个计算属性的名字定义为message。那么大家看这面呢，就有HELLO2个hello，你看诶它也是很，它也是很。然后这面。这面明明是R2啊，说明什么？说明计算属性是不是和data塔里面的这个数据模型不能够一致呀，必须要把它们名字区分开来，他们的名字不能一致，一致了的话就会产生冲突，明白吧？啊，所以说呢，这边我们message和计算属性当中的message就都变成了hello了，这样的话是不可以的，那所以呢，这个地方呢，我们就起一个别别的名字啊，比如说我们叫RA ver的message，好，总之你和前面不一样就可以了，然后接下来呢，Reversed message我们怎么得到呢？我们还是用这种方式得到。

同样这个地方也要加this啊好，然后接下来呢，我们在我们的页面当中如何去调用呢？注意它是一个属性啊，啊虽然在这个地方我们是以方法的形式定义的，但是它最终展现在我们页面当中，它是一个属性的形式存在的，那所以我们就必须得像属性一样调用它，就这样调用就不能写原括号啊，不能写原括号，那方法这块是需要写原括号的，而属性这块是没有原括号的，好那这块呢是计算属性好，然后接下来呢，我们来看一下。那你会发现呢，计算属性这面呢，也展示了一个相同的结果，那么同样我们可以在计算属性所在的这个方法当中呢，我们也can一下计算属性被计算哈，被计算好，接下来呢，我们在我们的页面当中去啊，弄多个这个计算属性给它展示出来，然后接下来呢，我们再来看我们的。

这面的这个控制台。啊，页面当中确实都展示出来了，然后看控制台。大家看计算属性这一块是不是只执行了一次呀，那么它比方法这面的执行效率是不是相对来说要高一些呀？那么它的原理是什么呢？它原理就是第一次被计算的时候，嗯，这个值呢，就会被存在缓存当中，如果你本身的这个所依赖的计算的数据没有发生变化。啊，比如说我们所说的计算的数据呢，就是这个message啊，因为你看我这个计算属性，它要计算出来是不是依赖于这个message啊，只要这个message没有发生变化，这个计算属性就只执行一次，以后每一次的展示呢，它都会从我们的浏览器的缓存当中去获取，当然了是javascript的这个引擎当中开辟的一块内存空间啊，啊会从这个缓存当中去获取这个计算属性所计算出来的值，一旦你这个message发生了变化了，那么计算属性呢，就会重新计算，所以它是非常灵活的，那么我们怎么样去检测这样的一个功能呢？比如说在这个地方呢，我写一个input，然后呢，我们把它绑定到v model啊。

Re model，然后接下来呢，我就把message呢放到这个位置，好，接下来呢，我们来看一下，那现在呢，我这个地方呢是hello是吧？啊，那计算属性的值能没有发生变化，所以呢，这个地方呢，四次这个展示只计算了一次，但是一旦我这个hello发生变化了，大家可以发现这个计算属性就又重新计算了一次，那么缓存当中呢，就又有了一个新的值被放在计算属性当中，然后后面三次的这个展示呢，都又会从新的缓存当中去获取，那同样你这面发生变化了之后，那个方法因为它要在页面当中重新渲染，每一次渲染呢，它都要调用一次方法，所以方法呢又被调用了四次，而计算属性呢就重新计算了一次，所以这样的话呢，相对于来说啊，这种功能建议大家用计算属性来实现，因为它的效率比较高啊。