v-if和v-show区别
v-if通过条件来进行渲染和销毁v-show通过条件,控制CSS的显示和隐藏v-if比v-show开销大- 经常需要控制显示和隐藏的用
v-show
为什么用Proxy替换Object.defindProperty
Object.defineProperty无法监控到数组下标变化,只能用vue.set,vue.deleteapi进行修改,删除Object.defineProperty通过递归方式劫持对象的每个属性Proxy可以劫持整个对象,对对象进行一次包装返回一个新对象,可以检测到数组变变化
vue修饰符
事件修饰符
.stop:组织事件冒泡.prevent:组织默认行为,等同于JavaScript中的event.preventDefault.capture: 先执行父级函数,再执行子级的函数,等同于JavaScript中的捕获阶段,从父节点->子节点.selft:只会触发子级范围内的子级的事件.once:只执行一次.passive:.passive 会告诉浏览器你不想阻止事件的默认行为
Vue键盘修饰符
.enter：回车键.tab：制表键.delete：含delete和backspace键.esc：返回键.space: 空格键.up：向上键.down：向下键.left：向左键.right：向右键.ctrl: ctrl.alt: alt.shift:shift.meta: Mac中对应command.exact:控制由精确的系统修饰符组合触发的事件
鼠标按钮修饰符
.left.right.middle
表单中的修饰符
.lazy: 把input事件同步修改,改为change事件后修改1
2<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">.number: 输入值转为数值.trim: 过滤输入的首尾空白符
Vue中key值的作用
- 作为diff算法中的节点唯一标识符,在生成虚拟DOM时,可以快去定位到节点与旧的节点进行比对,是否需要改变,删除,加速虚拟DOM的生产
- key必须是要唯一的,如果无法通过key值作为节点标识符,那么当触发生成虚拟DOM时不能正确的定位要需要修改的节点
- 还有一种情况,如果key是循环数据的索引的情况下,这个时候key并不能和数据有直接关联关系
- 随机数作为key和不加key是一样的效果,因为随机数会变化,这个key并不能和数据产生关联关系
- key取值要唯一的,这个key能与对应的数据产生强绑定关系,必须每条数据的id(数据库中的id)