VUE学习总结（二）

1、计算属性

• 双向绑定的数据表达式如果过长，则将计算属性已函数的形式写在Vue实例中的computed选项内。

• 每一个计算属性都包含一个getter(读取)和setter(写入)，默认getter。

computerd:{
	get:function(){
	...
	}
	set:function(newValue){
	...
	}
}

• 两个实用小技巧
  计算属性可以依赖其他计算属性；计算属性可以依赖其他实例的数据。
• 使用method可以代替computed，但是计算属性依赖于缓存，当其所依赖数据发生变化时，会从新取值计算；而method不同，只要被重新渲染，函数就会被执行。

2、class绑定
data\computed\methods，表达式较长或逻辑复杂，优先使用computed。

• 对象语法

//实例data中给出 isActive /isError的值
<div class="static" :class="{ 'active' : isActive , 'error': isError }"></div>

class条件过多时（超过两个），也可以绑定计算属性，这是一种很友好并且常见的方式。

• 数组语法

//实例data中给出 activeCls /errorCls分别表示哪个类名
<div class="static" :class="[activeCls , errorCls]"></div>
//三元表达式
<div class="static" :class="[isActive ？activeCls ：‘’ , errorCls]"></div>
//数组语法中使用对象语法
<div class="static" :class="[ { 'active' : isActive } , errorCls]"></div>

3、style绑定
与class绑定相似，由于直接写一长串不便于阅读维护，一般写在data或computed里。

4、
Vue在渲染元素时，出于效率考虑，会尽可能复用已有元素，但如果给标签加上key值，就不会被复用了，key的值必须是唯一的。

5、
v-for中n in 10，打印结果是1～10。
6、
vue的核心是数据与视图的双向绑定，当修改数组时，vue检测到数据变化，视图也会立即更新。push() , pop() , shift() , unshift() , splice() , sort() , reverse()。
有些方法返回新数组，不会改变原数组，则不会触发更新，filter() , concat() , slice()。
有些变动，vue检测不到：通过索引设置项app.books[3]= {…};修改数组长度，这两种都不会触发视图更新。
在计算属性中对数据进行过滤或排序，返回的是新数组，不修改原数据。
6、
vue提供特殊变量可以阻止链接打开。

$event.preventDault();