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