初学Vue计算属性

计算属性

1、计算属性（computed）

a、基础例子

【案例】

<div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基础例子和计算setter"
        },
        computed: {
            jisuan:function(){
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>
打印结果:rettes算计和子例础基

b、计算属性的缓存 vs method 方法

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性缓存依赖于数据模型中的属性，如果模型中的属性不改变它的缓存就不改变，如果数据模型中的属性发生改变则在计算一遍

method不管你数据模型中的属性是否改变都有执行

【案例】

<div id="app">
    {{jisuan}}</br>
    {{jisuan}}</br>
    {{jisuan}}</br>
    ***************************</br>
    {{bujisuan()}}</br>
    {{bujisuan()}}</br>
    {{bujisuan()}}</br>
</div>
<script>
    var a=100;
    var b=100;
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基础例子和计算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    a++;
                    return a;
                },
                set:function(newValue){
                    this.msg=newValue.split('').reverse().join('');
                }
            }
        },
        methods: {
            bujisuan:function(){
                b++;
                return b;
            }
        }
    });
</script>
打印结果如下图

相比之下每当触发重新渲染时，method 调用方式将总是再次执行函数而计算属性不需要，每次调用缓存里面就行

c、计算属性 vs Watched 属性

watch 属性当你有一些数据需要随着其它数据变动而变动时

【watch案例】

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ fullName }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吴',
            fullName: '吴健'
        },
        watch: {
            firstName: function (val) {
                this.fullName = this.lastName + val
            },
            lastName: function (val) {
                this.fullName = val + this.firstName
            }
        }
    });
</script>
结果如下图

【计算属性案例】

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ quanming }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吴'
        },
        computed: {
            quanming:{
                get:function(){
                    return this.lastName + this.firstName
                }
            }
        }
    });
</script>
结果如下图

d、计算 setter

计算 setter有2个函数，默认getter

getter函数 [get] 和 setter函数 [set]

get()方法为获取

【案例】

<div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基础例子和计算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    });
</script>
打印结果为：rettes算计和子例础基

set()方法为设置

【案例】

 <div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基础例子和计算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    return this.msg.split('').reverse().join('');
                },
                set:function(newValue){
                    this.msg=newValue.split('').reverse().join('');
                }
            }
        }
    });
    app.jisuan = "我在设置值"
</script>
打印结果为：我在设置值

2、观察watchers

在什么时候用

当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的

【案例】

<div id="app">
    {{msg}}
    <input v-model="msg"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        watch:{
            msg:function(newValue){
                localStorage.getItem("msg",newValue);
            }
        },
        mounted:function(){
            this.msg = localStorage.getItem("msg");
        }
    });
</script>

喜欢的朋友别忘了点赞加收藏