一.计算属性
computed
当模板中的表达式或者逻辑过长时,项目就会难以维护,比如

<div>
	{{text.split(','}.reverse().join(,)}}			//split()截取	reverse()取反	join()将数组转换成字符串
<div>

计算属性:

<div id="app">
	{{reversetext}}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            text:'cheng,cong,ming'
        },
        computed:{
            reversetext(){
                return this.text.split(',').reverse().join(',')
            }
        }
    })
</script>

用法:计算属性可以完成各种复杂的逻辑,报扩运算,函数调用,只要最终返回一个结果

每个计算属性中都包含一个getter和一个setter函数,getter用来读取,setter用来修改,绝大多数只用默认的getter很少用setter

计算属性小技巧:1计算属性可以依赖其他计算属性2计算属性不仅可以依赖当前的Vue实例的数据,还可以依赖其他实例的数据
计算属性缓存(与methods区别):你可能发现,调用methods里的方法也可以实现计算属性的逻辑,甚至methods还可以传值,使用起来更灵活,为什么还要使用计算属性呢,原因就是计算属性是基于他的依赖缓存的,一个计算属性所依赖的数据发生变化时,他才会重新获取值,而methods只要重新渲染,他就会被调用,因此函数也会被执行

持续更新…