VUE基础知识二：计算属性computed、侦听器watch和样式绑定

计算属性computed

在变量发生变化的时候，computed内的计算属性会自动进行重新计算并渲染到页面。（不仅限于数值的运算，可以是对象、字符串、数组等）

data(){
	return {
		count: 2,
		price: 10,
        message: '123'
	}
},
computed: {
	// 当计算属性依赖的内容发生变更时，才会重新计算
	total(){
		return this.price * this.count
	}
},
methods:{
	// 当页面重新渲染，才会重新计算
	getTotal(){
		return this.price * this.count
	}
}
<div>{{total}}</div> <!-- 当动态改变message的时候，这个total值是不会变化的 -->
<div>{{message}} {{getTotal()}}</div> <!-- 当动态改变message的时候，此div会重新渲染，重新调用getTotal方法-->

侦听器watcher

监听属性的变化，在侦听器的函数上有两个参数，分别是修改后和修改前的值。

data(){
	return {
		count:2,
		price:5,
		total:10
	}
},
watch: {
	// current表示当前修改后的值，prev表示历史值
	price(current,prev)	{
		return this.count * current;
	}
}
<div>{{total}}</div>

注意：

• 在computed和method都可以实现的时候，优先使用computed
• 在computed和watcher都可以实现的时候，优先使用computed

样式绑定

样式绑定的三种方式：

• 字符串方式：适用于只绑定一个class；
• 数组方式：适用于绑定多个class；
• 对象方式：适用于绑定多个class；

<style>
    .classOne {
        color :red;
    }
    .classTwo {
        font-size:100px;
    }
</style>
data(){
	return {
		classString:'classOne',
		classObject:{ classOne:true,classTwo:false },
		classArray:['classOne','classTwo']
	}
}
template:`<div :class="classArray">hello world!</div>`

这里如果使用的是style属性，不是使用class，style对应的属性值，定义在变量里面，应该怎么去做。如下代码：

data() {
	return{
		styleString:"color:red;font-size:100px;",
		styleObject:{
			color :red;
			font-size:100px;
		}
	}
}
template:`<div :style="styleString">hello world!</div>`
template:`<div :style="styleObject">hello world!</div>`