vue的就地复用策略:
Vue会尽可能的就地(同层级,同位置)最对比,如果原来的存在不在重新创建。
什么是虚拟dom:
用虚拟的dom来模拟真实的dom元素。
为什么要有虚拟dom的概念呢?
因为让元素新旧做对比。
为什么要做对比?
渲染效率高一些。
vue在渲染页面之前,会生成虚拟dom(type attributes text children)在内存里面。
当重新渲染的时候: 会用新的虚拟dom和旧的虚拟dom做对比---------------相同的内容就地复用,不同的重新创建。
对比啥呢?
新旧元素的属性 内容 元素------diff算法。
策略1:
1.先同层级根元素做比较,如果根元素变化,那么不考虑复用,整个dom树重建
2.如果根元素没有变化,则比较元素的属性。 有相同的属性复用, 不同的属性新添加。
3.默认按照下标的方式的比较
3.1先比较元素是否相同的。
3.2在比较元素的属性是否相同。
3.3比较元素的内容是否相同。
:key:
可以通过key去更改比较顺序。 注意key值一定不可以重复!!! 是一个基本数据类型。
注意点:
1.有id用id当做key
2.没有id 用索引当做key
样式操作:
类名操作:
124
124
124
124
style:
1234
1234
1234
12345
activeColor: 'red',
fontSize: '30px',
objClass:{
color:'red',
fontSize:'30px'
}
计算属性:
一个属性不存在, 是计算得来的属性----计算属性
使用:
computed:{
计算属性的名字(){
return '值'
}
}
{{计算属性的名字}}
计算属性和属性的区别是什么:
1.如果返回一个具体的值 两者没有区别 和属性的方式是一样的
2.计算属性可以依赖于一个值的变化:
譬如: 意味着: name变化就会重新执行这个函数 把这个值给计算属性
computed:{
计算属性的名字(){
return this.name
}
}
注意点:
计算属性和属性或者方法都不可以重名
计算属性里面必须要有return值 标签:计算,dom,元素,名字,虚拟,key,属性 From: https://www.cnblogs.com/jiaoliuxuexi/p/17483847.html