Vue.js计算属性与观察者-优快云博客

计算属性与观察者

模板内的表达式非常便利，但是设计他们的初衷是用来简化运算的。在模板内放入太多的逻辑会让代码难以维护
所以当我们要使用复杂逻辑的时候我们最好使用计算属性

<div id="example">
        <p>原始:{{message}}</p>
        <p>翻转后:{{reverseMessage}}</p>
</div>
//JS代码
var text=new Vue({
        el:"#example",
        data:{
            message:"Hello myWorld"
        },
        computed:{
            reverseMessage:function(){
               return this.message.split("").reverse().join("");
            }
        }
    });

那么这里有一个很关键的点，就是 computed和methods有什么区别

computed是基于他们的依赖进行缓存的，也就是说，在使用computed计算属性的时候，只要他的依赖值没有改变，他就会立即返回之前的计算结果，而不是再次执行函数
methods方法在我们每次触发重新渲染的时候，调用方法总会执行该函数，并且methods需要调用里面的方法。

当我们有一个非常复杂的逻辑运算的时候，我们应该使用computed来优化，当然，如果你不希望缓存，请使用methods

watch侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性，但是你很容易滥用这种属性

<div id="name">
    <p>{{fullName}}</p>
</div>
//JS代码
var name=new Vue({
    el:"#name",
    data:{
        firstname:"Liu",
        lastname:"Xiang",
        fullname:"LiuXiang"
    },
    watch:{
        firstname:function(val){
            this.fullname=val+" "+this.lastname
    },
        lastname:function(val){
            this.fullname=this.firstname+" "+val
    }
    }
})

我们可以用计算属性来改写这个侦听属性

<div id="name">
    <p>{{fullname}}</p>
</div>
//JS
var name=new Vue({
    el:"#name",
    data:{
        firstname:"Liu",
        lastname:"Xiang"
    },
    computed:{
        fullname:function(){
            return  this.firstname+" "+this.lastname
        }
    }
})

Style和Class绑定

//css
.heightLight{background-color:red;}
//HTML
<div id="app">
<p v-bind:class="{heightLight:open}">hello,vue</p>
</div>
//JS
var app=new Vue({
    el:"#app",
    data:{
        open:true
    }
})

这样做有一个强大的地方就是可以通过计算属性来是否呈现该类

 <div id="app">
        <p v-bind:class="classObject">hello</p>
 </div>
  //JS
  var app=new Vue({
        el:"#app",
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObject:function(){
                return {
                    heightLight:this.isActive&&!this.error
                }
            }
        }
    })

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：，因为这个定义我们能通过多种方式来动态改变我们所需要的类

//css
        .heightLight{
            background-color: red;
        }
        .border{
            border: solid 2px red;
        }
//html
<div id="app">
        <p v-bind:class="[isActive?heightLight: ' ',border]">hello</p>
</div>
//JS
 var app=new Vue({
        el:"#app",
        data:{
            isActive:false,
            heightLight:"heightLight",
            border:"border"
        }
    })

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

<div v-bind:style="{fontSize:font+"px"}">Hello</div>
//JS
    var font=new Vue({
        el:"#font",
        data:{
         font:22
        }
    })

上面的代码可以改写为，当我们要添加多个属性的时候，会更加方便

<div v-bind:style="classList" id="font">Hello</div>
//JS
    var font=new Vue({
        el:"#font",
        data:{
            classList:{
                fontSize:"22px"
            }
        }
    })