Vue2.0 Vue计算属性

最新推荐文章于 2024-05-20 23:22:02 发布

结城明日奈是我老婆

最新推荐文章于 2024-05-20 23:22:02 发布

阅读量322

点赞数 1

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121872254

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

先不通过计算属性去写姓名案例

用插值语法({{}})和methods写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算属性与监听</title>
    </head>
    <body>
        <div id="root">
            <div>
                <h2>用插值语法写</h2>
                姓<input type="text" v-model="fristName"><br /><br />
                名<input type="text" v-model="lastName"><br /><br />
                全名<span>{{fristName}}-{{lastName}}</span>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

new Vue({
    el: '#root',
    data(){
        return{
            fristName: '张',
            lastName: '三'
        }
    }
})

缺点是，之后越来越多的东西在{{}}里违背了Vue的风格

用methods去写

<div>
    <h2>用methods去写</h2>
    姓<input type="text" v-model="fristName"><br /><br />
    名<input type="text" v-model="lastName"><br /><br />
    全名<span>{{fullName()}}</span>
</div>

methods: {
    fullName(){
        return this.fristName + '-' + this.lastName;
    }
},

这里的this就是vm实例

把data里的fristName改了就会导致对模板的重新解析，不知道你插值语法中的fullName()函数一不一样，所以又去调了一遍。

只要data中数据一变vue会直接重新执行模板的，重新解析模板的时候，只要遇到了插值语法写方法，这方法绝对给你重新调

计算属性实现

到底什么是计算属性?
对于Vue来说data里面写的配置项就是属性;fristName叫属性名,'张'叫属性值

所谓的计算属性就是拿着你写完的属性去加工计算，并且生成一个全新的属性;就是计算属性;所以需要一个全新的配置项computed配置方法和data类似，但不能

computed: {
    fullName: '张-三'
},

计算的过程比较复杂，所以要求你是一个对象

computed: {
        fullName: {
            //当有人读取fullName的时候，get就会被调用，且返回值就作为fullName的值
        get(){
              return fristName + '-' + lastName  
        }
    }
},

尴尬的是你不会读这个fullName。
其实fullName也跟data一样在vm身上。vm._data是把data属性读到了但是没有计算属性里的全名因为这是以后计算出来的，计算完直接丢在vm身上

其实当你去读取fullName的时候vue就帮你把fullName的this维护好了,当你去读取fullName的时候vue帮你去读取这个get()并且vue帮你把get中的this指向给你调成了vm

vue在计算属性里面做了缓存
在读取到全名<span>{{fullName}}</span>fullName被调用了

全名<span>{{fullName}}</span>  -->  调用get()  --> 拿到返回值  --> {{fullName}}去使用  -->(随后)做了一个缓存

有缓存说明，你修改了fullName值也是都缓存中的，所以 get()的调用有俩个时机的

/*
get什么时候被调用
    1.初次读取fullName的时
    2.所依赖的数据发生变化时
*/

data和methods你写啥出现在vm上的就是啥,computed里面的是个对象，那vm身上的就是vm.get不能这么理解;computed往vm身上放的时候，就自动调用get()方法拿到get的返回值，然后放在了vm身上了,然后放的名字是fullName

既然能有get()也就会有set()
那set()有什么作用?fullName终归是计算出来的新属性,只有get()说明fullName只有读取，但没有修改

computed: {
        fullName: {
            //当有人读取fullName的时候，get就会被调用，且返回值就作为fullName的值
            get(){
                return this.fristName + '-' + this.lastName
            },
            set(value){
                
            }
        }
    },

这个set()不是必须写的
那么set()什么时候会被调用
当fullName被修改的时候
其实好像fullName没有真正的值，你要用的时候它现给你算出来的

结论

计算属性
1.定义:要用的属性不存在,要通过已有属性
2.原理:底层借助了Object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势: 与methods实现相比,内部缓存机制(复用),效率更高，调试方便
5.备注:
1.计算属性最终出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变

计算属性简写

一般计算属性一计算出来是不被修改的，不是不能改，从案例的角度来看完全没有必要写set, 注意，一旦你确定不用set只用get你才可以用简写形式

//完整写法
        /*fullName: {
            //当有人读取fullName的时候，get就会被调用，且返回值就作为fullName的值
            get(){
                return this.fristName + '-' + this.lastName
            },
            set(value){
                console.log('set被调用了',value)
                const arr = value.split('-')
                this.fristName = arr[0];
                this.lastName = arr[1];
            }
        }*/
        //简写
        fullName: function(){}

这个function()就当你的getter用;fullName代表你计算属性的名字