vue 第四天计算属性和侦听器_侦听器实现异步算法计算-CSDN博客

本文链接：https://blog.csdn.net/lilianggui/article/details/103029057

1、双大括号中可以写一些简单的表达式，和语句来展示计算的结果，但是对于稍微复杂的计算，vue提供了计算属性来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        {{ reverseName }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data(){
                return {
                    name: '猪八戒'
                }
            },
            computed: {
                reverseName: function(){
                    return this.name.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>

2、好像方法也能实现以上的功能，但是相较于方法，计算属性是有缓存功能的，这对于比较的运算，计算属性具有更高的性能。

3、侦听器。侦听器可以监听某个属性的值得变化，然后计算出另外一个值，原始值每次变化都会触发侦听器，这么看来，侦听器也能实现计算属性的功能，只要侦听原始值的变化然后修改结果值即可，但如果你想企图使用侦听器代替计算属性，将会带来很多不必要的重复代码，试想如果结果值是由多个原始值经过计算得出的，这时候就需要为每个原始值定义侦听器，而且代码几乎是一致的。但是对于需要耗费很多时间来处理的事情可以交给watch去做，因为watch是基于回调机制的，属于异步操作，不影响主程序的执行。侦听器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input v-model="name">
        <p>{{upperName}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    name: '',
                    upperName: ''
                };
            },
            watch: {
                name(){
                    this.upperName = this.name.toUpperCase();
                }
            }
        })
    </script>
</body>
</html>

4、计算属性的setter

计算属性默认只提供getter方法，如果你想在该属性变化时做一些操作，即可使用setter方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input v-model="name">
        <p>{{upperName}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    name: ''
                };
            },
            computed: {
                upperName: {
                    get(){
                        this.upperName = this.name.toUpperCase();
                    },
                    set(newValue){
                        console.log('设置了新值：' + newValue);
                    }
                }
            }
        })
    </script>
</body>
</html>

当upperName的值发生变化是调用set方法