21.计算属性的setter和getter方法 

<style>
        .changeList {
            color: red;
        }
    </style>
<body>
    <div id="app">
        <h1> {{ fullName }} </h1>

        <h2> {{ fullNameT }} </h2>
        <h2> {{ fullNameT }} </h2>
        <h2> {{ fullNameT }} </h2>
        <h2> {{ fullNameT }} </h2>

        <h2> {{ getFullName() }} </h2>
        <h2> {{ getFullName() }} </h2>
        <h2> {{ getFullName() }} </h2>
        <h2> {{ getFullName() }} </h2>


    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: "李银河",
                lastName: "你好呀"
            },
            computed: { // 计算属性里面有 set 和get 方法的 一般不用set方法来改变属性 只用 get方法只读属性
                // get方法一般都是省略  直接像 fullName2一样写
                fullName: {
                    // set: function(newValue) {
                    //     console.log(newValue);
                    //     const names = newValue.split(' ');
                    //     this.firstName = names[0];
                    //     this.lastName = names[1]
                    // },
                    get: function() {
                        return this.firstName + ' ' + this.lastName;
                    }
                },
                fullNameT: function() { // 用计算属性写 性能更高  因为它有缓存
                    console.log("fullNameT");
                    return this.firstName + ' ' + this.lastName;

                }

            },
            methods: {
                getFullName: function() {
                    console.log("getFullName"); // 打印4次  如果页面同时打印类似 上面的内容 
                    //  在methods属性  里面写和计算属性一样的内容 性能低
                    return this.lastName + " " + this.firstName
                }
            }
        })
    </script>

</body>

 

posted @ 2020-12-29 11:50  闭上耳朵  阅读(113)  评论(0)    收藏  举报