vue笔记3，计算笔记

时间 2021-02-17

标签 html vue npm 编程数组缓存 app iphone 函数栏目 HTML 繁體版

原文原文链接

1、使用计算属性的缘由

咱们己经能够搭建出一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。可是表达式若是过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护
举例html

<div>
{{ text.split ( ’,’ ) •reverse () . join (’,’)}}
</div>
这里的表达式包含 3 个操做，并非很清晰，因此在遇到复杂的逻辑时应该使用 计算属性

。vue

2、计算属性用法

全部的计算属性都以函数的形式写在 Vue 实例内的computed 选项内，在一个计算属性里能够完成各类复杂的逻辑，包括运算、函数调用等，只要最终返回计算后的结果npm

计算属性还能够依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会从新执行，视图也会更新编程

小技巧: 计算属性还有两个很实用的小技巧容易被忽略：
一是计算属性能够依赖其余计算属性：
二是计算属性不只能够依赖当前 Vue 实例的数据，还能够依赖其余实例的数据
实例 :展现两个购物车的物品总价数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        {{prices}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app2 =new Vue({
        el:'#abc',
        data:{
            msg:'ssssssfffff'
        }
    })
    var app1 =new Vue({
        el:'#demo',
        data:{
            package1:[
                {
                    name:'iphone8',price:6999,count:3
                },
                {
                    name:'ipad',price:3600,count:6
                }
            ],
            package2:[
                {
                    name:'iphone8',price:6999,count:3
                },
                {
                    name:'ipad',price:3600,count:6
                }     
            ]
        },
        computed:{
            prices:function(){ //不定义的话，默认是getter函数
                var prices=0;
                for(var i=0;i<this.package1.length;i++){
                    prices =prices+ this.package1[i].price *this.package1[i].count
                }
                for(var j=0;j<this.package2.length;j++){
                    prices +=this.package2[j].price * this.package2[j].count
                }
                return prices+'-------'+app2.msg  //定义msg是表明计算属性能够依赖多个vue实例的数据
            }
        }
    })
</script> 
</body>
</html>

3、getter和setter

每个计算属性都包含一个 getter 和一个 setter函数！
默认手法是getter来读取，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 set
ter函数，执行一些自定义的操做缓存

计算属性除了上述简单的文本插值外，还常常用于动态地设置元素的样式名称 class 和内联样式 styleapp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="abc">
        my name is {{fullName}}<hr>
        my name is {{firstName}}{{lastName}}<hr>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script> 
    var app2 =new Vue({
        el:'#abc',
        data:{
            firstName:'zhang',
            lastName:'sanfeng'
        },
        computed:{
            //计算属性的默认用法是getter函数
            // fullName:function(){
            //     return this.firstName+''+this.lastName
            // }
            fullName:{
                get:function(){
                    return this.firstName+''+this.lastName
                },
                set:function(newValue){
                    console.log('我是set方法，我被调用了')
                    var names=newValue.split(',')//分割成数组
                    this.firstName=names[0]
                    this.lastName=names[1]
                }
            }
        }
    })
</script>
</body>
</html>

修改fullname值得时候，就会调用set函数
iphone

4、计算属性的缓存

调用 methods 里的方法也能够与计算属性起到一样的做用
页面中的方法：若是是调用方法，只要页面从新渲染，方法就会从新执行。不须要渲染，则不须要从新执行
计算属性：无论渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        {{text}}<br>
        {{text.split(',').reverse().join(',')}}<hr>
        {{reverseText}}<hr>
        计算属性的缓存
        {{now}}<hr>
        经过methods拿到时间戳（方法须要加括号）
        {{thisTime()}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script>
    //需求是把123，456，789编程789，456，123
    var app =new Vue({
        el:'#demo',
        data:{
            text:'123,456,789'
        },
        computed:{
            reverseText:function(){
                return this.text.split(',').reverse().join(',');
                //因为文本取值只能用单行表达式，逻辑过程就会变得臃肿，因此遇到复杂的逻辑时，应当使用计算属性。
                //计算属性能够用多行表达式，运算和函数调用等，
            },
            now:function (){
                return Date.now()
            }
        },
        methods:{
            thisTime:function(){
                return Date.now()
            }
        }
    })
</script> 
</body>
</html>

当咱们改变text 的值，页面从新渲染，因此经过methods调用的计算属性的值从新更新了，但计算属性的没有变
ui

结论: 没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还能够接受
参数，使用起来更灵活。既然使用 methods 就能够实现，那么为何还须要计算属性呢？
缘由就是
计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会从新取值什么时候使用: -----------使用计算属性仍是 methods 取决于你是否须要缓存，当遍历大数组和作大量计算时，应当使用计算属性，除非你不但愿获得缓存

vue笔记3，计算笔记

1、使用计算属性的缘由

2、 计算属性用法

3、getter和setter

4、计算属性的缓存

2、计算属性用法