Vue计算属性

前端小草籽

已于 2022-10-11 19:25:28 修改

阅读量2.1k

点赞数

分类专栏： Vue的学习文章标签： html 前端

于 2022-10-04 19:34:25 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/127146543

版权

Vue的学习专栏收录该内容

17 篇文章 3 订阅

订阅专栏

4.计算属性中的两个方法：get和set作用是什么？什么时候调用？

5.计算属性的精简写法(不要求修改计算属性的值，只是读取)

4.计算属性的总结

用一个案例的不同方式实现，来体现出Vue的计算属性的优势所在。

1.姓名案例--插值语法实现

分析：分析，上面的代码也能实现功能，但是这样违背了Vue的一个原则：模板中的简单表达式。所以上面的代码不推荐这样写

2.姓名案例 --methods实现

    <div id="app">
        姓:<input type="text" v-model="firstName">
        <br><br> 
        名:<input type="text" v-model="lastName">
        <br><br> 
        <!-- 这里写 fullName 表示把这个函数插入到这里 -->
        <!-- fullName()表示把fullname这个函数的返回值插入到这里 -->
        全名: <span>{{fullName()}}</span>
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data:{
                firstName: '张',
                lastName: '三'
            },
            methods:{
                fullName(){
                    console.log('@-@fullName');
                    // this指向的是 Vue实例对象
                    console.log(this);//Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
                    return this.firstName + '-'+ this.lastName
                }
            }
        })
    </script>

上图代码解析过程分析：(重点)

1.data中的数据，任何一个数据发生改变，Vue的模板都会重新解析一遍，就是Vue拿过来的模板整体要重新阅读解析

2.如果解析到插值语句里面在调方法，那么这个方法一定会帮你重新调用一遍。

3.解析到fullName(),发现它是来自于一个函数(方法)的调用，也不知道这个函数的返回值跟之前是不是一样，所以就重新调一遍，重新调用就拿到了最新的 firstName和最新的lastName 然后返回。

分析：虽然用methods方法也能实现功能，但是这样做的话，会让该方法多次调用。

原因是：methods方法没有缓存，不能像计算属性一样从缓存中直接获取数据，需要重新调用一次方法获取数据。这就是计算属性相对于methods方法的优势所在。

3.姓名案例--计算属性实现

1.计算属性的定义

Vue认为data里面的都是属性

计算属性：用已有的属性去加工去计算去生成一个全新的属性

2.计算属性所写的位置和写法形式

属性是写在data里面。且vm._data中只有属性，不会有计算属性

计算属性是写在 配置项computed 里面的

因为计算过程比较复杂，包括读和修改，有点像Object.defineProperty ,所以要写成一个对象的形式

注意点：计算属性是一个对象，那么在 vm上面的就是一个对象？不不不，它是往vm上面放的时候，自动去调用get，把get的返回值拿到后，放到vm上面，然后那个返回值的名字叫 fullName(计算属性名)

3.计算属性通过什么来调用(读取）

注意点：计算属性中得 get 和 set 中得 this 都是指向 Vue实例化对象 vm

通过Vue实例化对象vm来读取

借助Vue开发者工具：

4.计算属性中的两个方法：get和set作用是什么？什么时候调用？

get作用和get调用时机：

1.浅层次：get:当有人读取fullName(计算属性)时，get就会被调用，且返回值就作为fullName(计算属性)的值
2.深层次: get:1.计算属性fullName初次调用时 2.计算属性fullName所依赖的属性(firstName和lastName)发生变化时,就会再次调用。
分析：计算属性初次调用时，get会执行，会将数据存储在缓存里面，再次去调用直接从缓存里面取，就不会再执行get。如果计算属性所依赖的属性改变，就会重新调用get,然后更新缓存。

解析模板时：

会有4处地方用到fullName,但是当计算属性fullName所依赖的的属性没有改时，get只调用一次：

当计算属性fullName所依赖的的属性firstName和lastName改变时，get就会调用：

set 的设置就是为了当 计算属性 fullName 改变时起作用。set 不是必须写，如果计算属性会被改(不是计算属性所依赖的属性改，而是计算属性被改)，就设置set。不修改就不写set

set 什么时候被调用？当计算属性 fullName被修改时才调用。

当计算属性fullName的值改成什么，set收到的的值就是什么，然后去把计算属性所依赖的属性改掉。

    <div id="app">
        姓:<input type="text" v-model="firstName">
        <br><br> 
        名:<input type="text" v-model="lastName">
        <br><br> 
        全名: <input type="text" v-model="fullName">
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data:{
                firstName: '张',
                lastName: '三'
            },
            computed:{
                fullName:{
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    get(){
                        //console.log(this);   //此处得 this 是 指向 vm
                        console.log('fullName有人读取,get就被调用了');
                        return this.firstName + "-"+ this.lastName;
                    },
                    //set当计算属性 fullName被修改时才调用,当计算属性fullName的值改成什么，set收到的的值就是什么
                    set(value){
                        console.log('set被调用了');
                        //获取到修改的值后，去把对应的计算属性所依赖的属性值改了
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>

分析：计算属性改变，通过set方法，计算属性所依赖的属性的值就会改，对应页面上用到计算属性所依赖的属性的值也会改。

其实：计算属性的值可以说是没有，因为计算属性在用的时候才从已有的属性中去算出计算属性的值。所以改掉计算属性的值，实际上是改计算属性所依赖的属性的值。

注意点：计算属性中的set和get方法，不能写成箭头函数的形式，不然其中的 this 指向就不是 Vue实例化对象vm了。

5.计算属性的精简写法(不要求修改计算属性的值，只是读取)

注意点：这里计算属性简写后，表面上看着是一个函数的形式。但是使用的时候不能加()

eg: {{fullName()}} <==这种是错的 ；{{fullName}} <==这样才是对的

4.计算属性的总结

计算属性：

1.定义：要用的属性不存在，要通过已有的属性(Vue管理的)计算得来。

2.原理：底层借助了Object.defineProperty方法提供的getter和setter

3.get函数什么时候调用？

（1）初次读取时会执行一次

（2）当依赖的数据发生改变时会再次调用

4.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便

5.备注：

01.计算属性最终会出现在vm上，直接读取使用即可。{{fullName}}

02.如果计算属性要修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。