Vue.js 创建一个 CNODE 社区

Posted 2021-01-09 小粒旬

还是继续入门 demo

这篇博文应该有点长，因为觉得了解了 computed 之后，应该还会继续学下去，所以这里会包含 computed 和 v-bind 的相关学习内容。

---

computed

什么是计算属性

所有的计算属性都以函数的形式写在 Vue 实例内的computed 选项内，最终返回计算后的结果。

为什么使用计算属性以及如何使用

逻辑过长，会变的臃肿，难以维护。

使用计算属性可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果即可。

如计算一个购物车总价：

计算属性还可以依赖多个 Vue 实例的数据

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

我们声明了一个新的 Vue 实例 app2，然后在 app 中的计算属性 prices 中调用 app2 中的属性：

var app2 = new Vue({
  el:‘#app2‘,
  data:{
    msg:‘ this‘s app2‘
  }
})
var app = new Vue({
  el:‘#app‘,
  data:{
    text:‘123,456,789‘,
    package:[
      {
        package1:{
          name:‘iphone‘,
          price:6900,
          count:2
        },
        package2:{
          name:‘ipad‘,
          price:5900,
          count:3
        }
      }
    ]
  },
  //定义计算属性
  computed:{
    reverseText:function(){
      // this 代表了这个 Vue 实例
      return this.text.split(‘,‘).reverse().join(‘,‘)
    },
    prices:function(){
      var price = 0
        for(let key in this.package[0]){
          price += this.package[0][key].price*this.package[0][key].count
        }
      return price + app2.msg
    }
  }
})

计算属性中的 getter 和 setter

每一个计算属性都包含－个 getter 和一个 setter。

如果计算属性直接跟一个 function，默认的就是 getter ，如上面那几个例子。

如果计算属性设置 getter 和 setter，同时给计算属性设置值的时候，他就会根据 setter 先拿到新数据，处理过之后，再交由 getter 处理：

计算属性和 methods 的区别

调用 methods 里的方法也可以与计算属性起到同样的作用。那他们有什么区别呢？

通过 demo 来理解，使用不同的方法获取时间戳，我们在 methods 中定义一个方法：

methods:{
    thisTime:function(){
        return Date.now()
    }
}

在 computed 中定义一个属性：

computed:{
    nowTime:function(){
        return Date.now()
    }
}

在页面中显示出来：

<!--下面使用了 计算属性-->
{{ nowTime}}
<br>
<!--下面使用了 methods-->
{{ thisTime() }}

第一次渲染：

通过给 app.text 重新赋值，再次渲染：

可以看到，在渲染后，通过 methods 获取到的数据发生了改变；而计算属性获取到的数据并没有发生改变。

注意 渲染是渲染，页面刷新是刷新；页面刷新，一定会重新渲染；页面重新渲染，页面不一定要刷新。

methods 方法： 如果是调用方法，只要页面重新渲染。方法就会重新执行，不需要渲染，则不需要重新执行

计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变，计算属性是依赖于缓存的。

如何选择 methods 和计算属性：

是否需要缓存，需要缓存，选择计算属性；不需要缓存，使用 methods。

---

小总结

JSbin 代码链接

• 创建以一个vue实例，并使用计算属性和方法实现一个字符串翻转的操作，写出核心代码

html:

<div id="app">
    {{ textReverse() }}
    {{ textReverse2 }}
</div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        text:‘reverse text‘
    },
    methods:{
        textReverse:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    },
    computed:{
        textReverse2:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    }
})

• 何时使用模板内表达式,何时使用计算属性

当表达式所需的逻辑链较短，数据处理需求不大时，可以使用模板内表达式。

当逻辑链变长，逻辑更为复杂时，使用计算属性。

• 计算缓存 vs Methods，两者的区别

调用 methods 里的方法可以与计算属性起到同样的作用。

他们的区别在于：

methods 方法： 如果是调用方法，只要页面重新渲染。方法就会重新执行，不需要渲染，则不需要重新执行

计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变，计算属性是依赖于缓存的。

• 代码题

实例化一个vue实例，在data中定义一个姓氏firstName和名字firstName，还有一个全称叫fullName。

提示：fullName = firstName + firstName。

需求：分别使用watch监听器和计算属性来实现以下功能实现，只要姓氏firstName和名字firstName中的任意一个改变，全称fullname就会改变

老师真鸡贼...还没有看到 watch 呐哈哈，还是得去预习一下再做这道题了：

HTML:

<div id="app">
    {{ fullName }}
</div>

computed：

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘,
        fullName:‘Zhang da‘
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ‘ ‘ + this.lastName
            },
            set:function(newValue){
                let name = newValue.split(‘,‘)
                this.firstName = name[0]
                this.lastName = name[1]
            }
        }
    },
})

watch：

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘
    },
    watch:{
        firstName:function(val,oldVal){
            this.fullName = val + ‘ ‘ + this.lastName
            console.log(oldVal)
        },
        lastName:function(val,oldVal){
            this.fullName = this.firstName + ‘ ‘ + val
            console.log(oldVal)
        }
    }
})

---

v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。

之前在 (1) 已经略微了解过 v-bind，现在来更深入地了解一下他的用法。

绑定 class - 对象

绑定 class 对象语法，对象的键是类名，值是布尔值。

绑定 class - 计算属性

当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性

active 就是类名，他是否会启用，取决于他的值是否为 true。当 this.isActive 为 true 且 !this.isBorder 也为 true 时，这个样式才能显示出来。

绑定 class - 数组

绑定 class 数组，数组中的成员 对应着 类名

数组和对象混用

把对象写入数组中，如：

HTMl:

<div :class=‘[{borderStyle:isActive},"className"]‘></div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        isActive:true,
        className:‘lineStyle‘
    }
})

CSS:

.lineStyle{
    line-height:666px;
}

绑定内联样式

还可以绑定内联样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>

data: {
  activeColor: ‘red‘,
  fontSize: 30
}

还可以直接绑定到一个样式对象：

<div v-bind:style="styleObject"></div>

data:{
    styleObject:{
        color:"red",
        fontSize:"30px"
    }
}

关于 v-bind 的 demo 详见 JSbin

---

小总结

• 写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法

作用：通过数据绑定操作元素的 class 列表和内联样式

变量语法： v-bind:class=变量名，变量名在 Vue 实例里的 data 对象内定义，变量的赋值内容则是类名。

数组语法： v-bind:class=[数组成员]，可以绑定多个 class，数组成员可以是对象，如果是对象的话，这个对象的值为 true ，这个 class 才可以会被使用；如果是数组成员是变量，则需要的 Vue 实例里的 data 对象内设置变量，变量的赋值内容则是类名。

对象语法： v-bind:class = {类名:布尔值}，通过判断布尔值，来确定 class 是否被启用。

变量语法

HTML:

<div :href=‘url‘></div>

JS:

data:{
    url:‘http://www.acfun.cn/‘
}

数组语法

HTML:

<div :class=‘[className1,className2]‘></div>

JS:

data:{
    className1:‘divStyle‘,
    className2:‘borderStyle‘
}

对象语法

HTML：

<div :class=‘{divStyle:isActive}‘></div>

JS:

data:{
    isActive:true
}

绑定计算属性:

HTML:

<div :class=‘className‘></div>

CSS:

.active{
    color:red;
}

JS:

...
data:{
    isActive:true,
    isBorder:true
},
computed:{
    className:function(){
        return {
            active: this.isActive || isBorder
        }
    }
}

---

本篇博文到此结束，主要学习了计算属性 computed 和 v-bind 的一些用法，其实 Vue 的官方文档里面也有相关的教程，但是老师讲得也是十分详细，对照着看很容易理解，多写 demo 也增加了对 Vue 的认识。