首页 > 其他分享> > Vue学习之计算属性

Vue学习之计算属性

2022-01-28 21:05:20 作者：互联网

简介定义

要用的属性不存在，要通过已有属性计算出来时，可以使用计算属性。
原理也是使用Object.defineProperty函数来进行set和get方法的定义。

get方法被更新，也就是计算属性被获取的场景有两个，第一个是属性初次使用时，第二个是计算属性依赖的熟悉发生变化时。

使用，计算属性在vue的配置对象中，使用computed属性进行定义。

与methods相比，计算属性内部有缓存机制，效率更高。

计算属性最终会出现在vm中，直接读取即可。
如果计算属性要被修改，那么必须在配置该计算属性时使用完整写法，被配置set方法进行响应，否则会报错。

下面是完整写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
    <div id="root">
        <div>通过方法获取的全名{{getFullName()}}</div>
        <div>通过方法获取的全名{{getFullName()}}</div>
        <div>通过计算属性获取的全名{{fullName}}</div>
        <div>通过计算属性获取的全名{{fullName}}</div>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:"#root",
            data:{
                firstName:"Ye",
                lastName:"Haocong"
            },
            methods: {
                getFullName(){
                    console.log("调用了getFullName获取全名");
                    return this.firstName + "-" +  this.lastName;
                }
            },
            computed:{
                
                //完整写法会被定义为一个对象
                fullName:{
                    get(){
                        console.log("获取计算属性fullName");
                        return this.firstName + "-" +this.lastName;
                    },

                    //参数是新值，这个是set方法，当计算属性fullName被修改时，会被调用。
                    set(newValue){
                        console.log("计算属性的set方法被调用",newValue);
                        //将全名拆开分别设置到firstName和lastName中
                        let value = newValue.split("-");
                        this.firstName = value[0];
                        this.lastName = value[1];
                    
                    }
                }
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

下面是简便写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
    <div id="root">
        <div>通过方法获取的全名{{getFullName()}}</div>
        <div>通过方法获取的全名{{getFullName()}}</div>
        <div>通过计算属性获取的全名{{fullName}}</div>
        <div>通过计算属性获取的全名{{fullName}}</div>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:"#root",
            data:{
                firstName:"Ye",
                lastName:"Haocong"
            },
            methods: {
                getFullName(){
                    console.log("调用了getFullName获取全名");
                    return this.firstName + "-" +  this.lastName;
                }
            },
            computed:{
                //这个是简便写法，当计算属性只涉及获取，不涉及设置时，可以使用该种模式，实际上就是忽略set，只要get
                //实际开发中这种模式也是用的比较多。
                fullName(){
                    console.log("获取计算属性fullName");
                    return this.firstName + "-" +this.lastName;
                }
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述
控制台：

说明，代码中通过方法获取了两次全名和通过计算属性获取了两次全名，但是控制台中只打印了一次“获取计算属性fullname”，说明计算属性只被调用了一次，使用了缓存，而方法被调用了两次。

上面是计算属性第一次调用的时机，第一次初始化时会被调用，而第二个时机是依赖的属性被改变，比如firstName或者lastName属性被改变，都会重新触发计算属性的获取重新渲染页面。
在这里插入图片描述

标签：Vue,firstName,lastName,学习,获取,计算,全名,属性
来源： https://blog.csdn.net/qq_40837310/article/details/122736113