vue-计算属性

1.插值语法特点

可以在{{}}中编写合法的JavaScript表达式

2.在插值语法中编写JavaScript表达式缺点

2.1没有代码提示

2.2语句过于复杂不利于我们维护

3.如何解决?

对于任何复杂逻辑，你都应当使用计算属性

 

<div>
<p>{{msg2}}</p>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {},
        // 专门用于定义计算属性的
        computed: {
            msg2: function () {
                let res = "abcdef".split("").reverse().join("");
                return res;
            }
        }
    });
</script>

计算属性和函数的区别

1.计算属性和函数

通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据

那么计算属性和函数有什么区别呢?

2.1函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值

2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值

2.计算属性应用场景

计算属性:比较适合用于计算不会频繁发生变化的的数据,那么使用计算属性的性能会比使用函数的性能高