2.5.1、插值语法实现反转字符串
<body><!-- 需求：用户输入字符串，然后反转展示在页面中 --><div id="app"><h1>{{msg}}</h1>输入的信息：<input type="text" v-model="info" /> <hr /><!--直接写在插值语法中，有以下三个问题：1. 可读性差。2. 代码没有得到复用。3. 难以维护。-->反转的信息：{{info.split('').reverse().join('')}} <hr />反转的信息：{{info.split('').reverse().join('')}} <hr />反转的信息：{{info.split('').reverse().join('')}} <hr /></div><script>const vm = new Vue({el: "#app",data: {msg: "插值语法-反转字符串案例",info: "",},});</script></body>vue官网中说：
模版内的表达式以及指令语法非常便利，但设计他们的初衷是用于简单运算，在模版中放入太多的逻辑会让模版过重且难以维护
2.5.2、方法实现反转字符串
<body><div id="app"><h1>{{msg}}</h1>输入的信息：<input type="text" v-model="info" /> <br /><!-- 在插值语法中可以调用方法，小括号不能省略。这个方法需要是Vue实例所管理的。 -->反转的信息：{{reverseInfo()}} <br /><!-- 缺点：效率有问题 会重复调用 -->反转的信息：{{reverseInfo()}} <br />反转的信息：{{reverseInfo()}} <br />反转的信息：{{reverseInfo()}} <br /></div><script>const vm = new Vue({el: "#app",data: {msg: "计算属性-反转字符串案例",info: "",},methods: {// 反转信息的方法reverseInfo() {return this.info.split("").reverse().join("");},},});</script></body>2.5.3、计算属性实现反转字符串
1. 什么是计算属性？
使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。
Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。
全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。
2. 计算属性的作用？
代码得到了复用。
代码更加便于维护了。
代码的执行效率高了。
3. 计算属性怎么用？
语法格式：
computed : {// 这是一个计算属性，可以有多个计算属性
计算属性1 : {
// 当读取计算属性1的值的时候或该计算属性所关联的Vue原有属性的值发生变化时，getter方法被自动调用。
get(){},
// 当修改计算属性1的值的时候，setter方法被自动调用。
set(val){}
},
计算属性2 : {},
}
(1)计算属性需要使用新的配置项：computed
(2)计算属性通过vm.$data ，vm._data 是无法访问的。
(3)计算属性的getter/setter方法中的this是vm。
(4)计算属性的getter方法的调用时机：
①第一个时机：初次访问该属性。
②第二个时机：计算属性所依赖的数据发生变化时。
(5)计算属性的setter方法的调用时机：
①当计算属性被修改时。（在setter方法中通常是修改属性，因为只有当属性值变化时，计算属性的值就会联动更新。注意：计算属性的值被修改并不会联动更新属性的值。）
(6)计算属性没有真正的值，每一次都是依赖data属性计算出来的。
(7)计算属性的getter和setter方法不能使用箭头函数，因为箭头函数的this不是vm。而是window。
<body><div id="app"><h1>{{msg}}</h1>输入的信息：<input type="text" v-model="info" /> <br />反转的信息：{{reversedInfo}}<br />反转的信息: <input type="text" v-model="reversedInfo" /><!-- 多次调用计算属性，只会执行一次，效率高 -->{{fun}} <br /><!-- {{fun}} <br />{{fun}} <br />{{fun}} <br />{{fun}} <br /> --><!-- 多次调用方法，每次都是执行，效率低 --><!-- {{hello()}} <br />{{hello()}} <br />{{hello()}} <br />{{hello()}} <br />{{hello()}} <br /> --></div><script>const vm = new Vue({el: "#app",data: {msg: "计算属性-反转字符串案例",info: "",},methods: {hello() {console.log("hello方法执行了");return "hello";},},computed: {// 可以定义多个计算属性fun: {// get方法的调用时机get() {console.log("getter方法调用了");//console.log(this === vm)return "haha" + this.info;},// 不能使用箭头函数，使用箭头函数会导致this的指向是：window// get:()=>{// console.log('getter方法调用了')// console.log(this === vm)// return 'haha'// },set(val) {console.log("setter方法调用了");//console.log(this === vm)},},// 完整写法/* reversedInfo : { get(){return this.info.split('').reverse().join('')},// 当修改计算属性的时候，set方法被自动调用。set(val){//console.log('setter方法被调用了。')// 不能这么更改计算属性的值，这样做就递归了。//this.reversedInfo = val// 怎么修改计算属性呢？原理：计算属性的值变还是不变，取决于计算属性关联的Vue原始属性的值。// 也就是说：reversedInfo变还是不变，取决于info属性的值变不变。// 将值赋给info，通过info来实现反推修改，//例如，需要将翻转值修改为hello，则需要反转给info，通过info再反转回来// 本质上：修改计算属性，实际上就是通过修改Vue的原始属性来实现的。this.info = val.split('').reverse().join('')}} */// 简写形式：set不需要的时候。reversedInfo() {return this.info.split("").reverse().join("");},},});</script></body>4、计算属性的简写形式
只考虑读取，不考虑修改时，可以启用计算属性的简写形式。
1. computed : {
2. reversedInfo(){
3. console.log('getter被调用了');
4. return this.info.split('').reverse().join('')
5. }
6. }