1. 计算属性作用

计算属性是基于它们的响应式依赖进行缓存的computed

比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说 多个变量中的某一个值 发生了变化 则 我们监控的这个值也就会发生变化。

vue中computed的作用：从"已经有的数据"计算 出新的数据 (渲染到 视图层去使用！)。

  计算属性在conputed中进行书写

    computed:{
        //自定义 若干个属性
    }

   自定义一个计算属性,把计算属性的具体作用，写在function函数中,function中处理的数据，一定是data数据中心中已经有的数据 对已有的数据，进行处理，处理得到的新值，然后渲染显示到视图层中。

 computed:{
       //自定义 若干个属性
       属性名1:function(){}

}

2. 基本用法

   监控(监听) 数据中心一个或多个值的变化，当这个值变了，我们的这个计算属性 返出的 结果值也就会发生变化。

使用计算属性，实现字符串的翻转

<div id="app">
        <div>
           <p>
            字符串：{{msg}}
           </p>
           <p>
               <!-- 计算属性 在视图层中 去使用，相对于 我们在数据中心data中拿变量 去用是一样。 -->
            翻转后的字符串是：{{reverseMsg}}
           </p>
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello vuejs'
            },
            // 计算属性
          computed:{
                // 自定义一个 计算属性名
                // 监控(监听) 数据中心msg这个值的变化，当这个msg值变了，我们的这个计算属性 返出的 结果值也就会发生变化。
                reverseMsg(){
                    // 1.字符串转数组
                    // 2.数组翻转
                    // 3.数组转字符串
                    console.log(this.msg.split('').reverse().join(''));
                    
                    return this.msg.split('').reverse().join('');
                }
            },
            methods:{
                
            }
        })

预览：

   监控(监听) 数据中心一个或多个值的变化

 <div id="app">
        <h1>监控(监听) 数据中心一个或多个值的变化，当这个值变了，我们的这个计算属性 返出的 结果值也就会发生变化。</h1>
        <hr>
        <div>
            数字1：<input type="text" v-model.number="num1">
            +
            数字2：<input type="text" v-model.number="num2">
            =
            <span>{{sum}}</span>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    num1:'',
                    num2:''
                }
            },
            // 计算属性
            computed:{
                // 自定义计算属性
                sum:function(){
                    return this.num1 + this.num2
                }
            },
            methods:{

            }
        })
    </script>

预览：

3.  计算属性和方法有什么区别

模板中放入太多的逻辑会让模板过重且难以维护  使用计算属性可以让模板更加的简洁

两者的执行结果是完全相同的

计算属性 是 基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数

方法中心的方法 是 每次触发重新渲染时，调用方法 将总会 再次执行函数

  <div id="app">
        <h1>计算机属性computed和方法中心methods的区别是什么？</h1>
        <hr>
        <h2>求1--{{num}} 之间数的和:{{numTotal}}</h2>
        <hr>
        <h2>原字符串：{{msg}}</h2>
        <button @click="reverse">点击，反转字符串</button>
        <h2>反转之后的字符串{{message}}</h2>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    msg:'hello',
                    num:100,
                    message:''
                }
            },
            // 计算属性：监听数据中心中数据的变化。
            // 如果 依赖的相关数据，发生改变了，那么计算属性 会 重新求值。
            computed:{
                // 自定义计算属性
                // 求1--num 之间数的和。
                numTotal(){
                    let total = null;
                    for(let i=1; i<=this.num; i++){
                        total += i;
                    }
                    return total;
                }
            },
            // 方法中心的方法： 只有被调用，才会被执行
            // 方法中心的方法， 它 是监听不到 数据中心中数据的变化的。
            methods:{
                reverse(){
                    this.message = this.msg.split('').reverse().join('');
                }
            }
        })
    </script>

预览：