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) {
          
   
            
        }
    }
}