Vue计算属性、过滤器、侦听器

v-for更新监测

当使用会造成原数组改变的方法时，会导致v-for更新，页面更新；
不会造成原数组改变的方法，可以给原数组重新赋值或使用this.$set()更新数组；
使用arr[索引] = 值的方法更新数组的值时，不会造成v-for的更新，需要使用this.$set()方法；

this.$set()
语法：this.$set(this.arr, 索引, 值)

v-for的就地更新
v-for的默认行为会尝试原地修改元素而不是移动他们

虚拟DOM

.vue文件中的template里写的标签都是模板，都要被处理成虚拟DOM对象，才会渲染显示到真实的DOM页面上；

虚拟DOM本质就是一个js对象 vue会将真实DOM的关键信息记录在虚拟的DOM结构对象中，在更新DOM时，生成新的虚拟DOM结构，与旧的结构对比，利用diff算法找不同，只更新变化的部分

虚拟dom的优点
1.提高了更新DOM的性能
2.虚拟DOM只包含必要的属性

diff算法

vue使用diff算法将新虚拟DOM和旧虚拟DOM比较；
1.当根元素改变时，直接删除重建
2.根元素未改变，属性改变，不会删除元素，只更新元素的属性
3.根元素和子元素均未改变，元素内容改变：
根元素无key属性：就地更新（当在前面插入新元素时，会造成新元素得到之前旧元素的子节点）
根元素有key属性，值为索引：还是就地更新；
根元素有key属性，值为id：key的值是唯一不可重复的，新插入的元素就不会的到之前旧元素的子节点；

动态class、动态style

使用v-bind给标签的class设置动态的值
语法：:class="{类名: 布尔值}"（布尔值可以为表达式，在执行时会自动将其转化为布尔值执行；花括号里可以写多个键值对形式的类名，用英文的逗号隔开）
:style="{css属性: 值}"（和动态class写法相同）

vue过滤器

过滤器只能用在插值表达式和v-bind中；
过滤器可以转换格式，过滤器就是一个函数，传入旧值返回处理后的新值；
语法：

// （全局定义，写在main.js中）
Vue.filter("过滤器名", (值) => { 
	return "返回过滤后的值" 
})

// 局部定义 写在vue文件的module.exports的导出对象中
filters: {
	过滤器名字(val, 形参) { 
		return "返回过滤后的值"
	}
}

过滤器可同时使用多个，也可以传参
语法:

- 过滤器传参:   vue变量 | 过滤器(实参) 
- 多个过滤器:   vue变量 | 过滤器1 | 过滤器2

vue计算属性

语法：

computed: {
    "计算属性名" () {
        return "值"
    },
    "计算属性名" : {
    	// 赋值触发set方法
    	set(val){
			// 操作
		},
		// 使用值触发get方法
		get(){
			return "值"
		}
    }
}

计算属性-缓存
计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

vue侦听器

语法：

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

想要侦听一个属性变化, 可使用侦听属性watch

深度侦听和立即执行
语法:

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}