vue学习笔记8----计算属性

最新推荐文章于 2024-05-31 16:22:19 发布

lazy91

最新推荐文章于 2024-05-31 16:22:19 发布

阅读量235

点赞数

分类专栏： Vue 文章标签：学习 javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_59954212/article/details/126437368

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

计算属性

1.定义：要用的属性不存在，要通过已有属性（data中的，不是已有数据）计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。

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

5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

关于小括号究竟有没有？

事件绑定时，函数的小括号加不加都行。

@click=“fun” 不带括号、不写实参

fun函数默认传递event (事件对象)，在fun函数中可以直接使用$event。

@click=“fun(value)” 加了括号
只要加括号，无论是否传值，都属于传实参给函数，event (事件对象)就接收不到。
如果需要实参、又需要event (事件对象)，就需要手动传入 event (事件对象)，如下：
@click=“fun($event, value)”

插值语法 {{***}} 时，

对于data中的属性，计算属性均不加小括号

（虽然简写的计算属性长得和函数一样，但他不是函数）

对于methods方法

{{ fun }} 是函数内容，会将整个函数放到页面上

{{ fun( ) }} 会将函数的返回值放到页面上

我决定，凡是和方法有关的统统加括号（包括事件绑定和插值语法调用methods方法）。(ˇˍˇ)

姓名案例

插值语法实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">    <br><br>
        名：<input type="text" v-model="lastName">    <br><br>
        <!-- firstName截取前三位    slice（0,3）第0,1,2位，不包括第三位 -->
        全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
</body>

<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        }
    })
</script>

methods实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">    <br><br>
        名：<input type="text" v-model="lastName">    <br><br>
        <!-- firstName截取前三位，使用methods实现 -->
        <!-- {{fullName}}是函数内容
             {{fullName()是这个函数的返回值
            绑定事件时加不加括号均可，这里是用在插值语法中}} -->
        全名fullName：<span>{{fullName}}</span> <br><br>
        全名fullName()：<span>{{fullName()}}</span> 
    </div>
</body>

<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        methods: {
            fullName(){
                return this.firstName + '-' + this.lastName
            }
        },
    })
</script>

计算属性实现

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">    <br><br>
        名：<input type="text" v-model="lastName">    <br><br>
        全名：<span>{{fullName}}</span> 
    </div>
</body>

<script>
    new Vue({
        el:'#root',
        //属性
        data:{
            firstName:'张',
            lastName:'三',
        },
        //计算属性
        //缓存
        computed:{
            fullName:{
                //get和set也不能写成箭头函数

                //当有人读取fullName时，get函数就会被调用，且返回值就作为fullName的值
                //vue使get函数的this为vm
                //get的调用？初次读取fullname时；所依赖的属性发生变化时。
                get(){
                    return this.firstName + '-' + this.lastName
                },

                //当fullname被修改时，set被调用
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

计算属性的简写

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">    <br><br>
        名：<input type="text" v-model="lastName">    <br><br>
        全名：<span>{{fullName}}</span> 
    </div>
</body>

<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
            //确定不会修改fullname，只读不改得时候可以采用简写形式，去掉set
            // fullName:function(){
            //     return this.firstName + '-' + this.lastName
            // }
            fullName(){
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>