vue-计算属性

• -计算属性是基于它们的依赖进行缓存的。
• -计算属性只有在它的相关依赖发生改变时才会重新求值

• 语法：substring(start,end)
  语法解析：start开始和end结束的位置，从零开始的索引，包头不包尾
  定义：提取指定字符串中介于两个指定参数下标之间的字符
• 验证
  1、只有一个参数（自动输出后面所有字符）
  2、start > end
  当读取位置大于结束位置的时候，substring会自动调整位置
  3、start = end
  4、start<0 或者 end<0
  5、正常取值start<end（包头不包尾）

    <div id="box">
        {{myname.substring(0,1).toUpperCase() + myname.substring(1)}}
        <!--
          substring截取0到第一个加上第一个直到后面
          可读性和维护性较差
       -->
        <p>计算属性:{{getMyName}}</p>
        <p>普通方法:{{getMyNameMethod()}}</p>

        <div>
            也需要计算结果
            <p>计算属性:{{getMyName}}</p>
            <p>普通方法:{{getMyNameMethod()}}</p>
        </div>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                myname: "xiaoming"
            },
            //定义方法，需要加上小括号
            methods: {
                getMyNameMethod() {
                    console.log("getMyNameMethod-方法调用")
                    return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
                }
            },
            //计算属性，定义像函数，但是使用时像属性不加（），要有返回值
            computed: {
                getMyName() {
                    console.log("getMyName-计算属性调用")
                    return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
                }
                /*
                    1. 依赖的状态(即myname)改变了 ，计算属性 会重新计算一遍 
                    2. 计算属性会缓存
                    3. 计算属性性能较高，方法会多次调用
                */
            }
        })
    </script>

• 这里注意：计算属性相关代码需要写到computed选项中。

vm.myname
"xiaoming"
vm.myname="tiramisu"
计算属性.html:42 getMyName-计算属性调用
计算属性.html:35 getMyNameMethod-方法调用
计算属性.html:35 getMyNameMethod-方法调用
"tiramisu"