vue一些容易混淆的名词

一、计算属性computed和侦听属性watch

1.计算属性computed
  • 计算属性是基于它们的依赖进行缓存的,而调用方法总是每次重新计算。如果不需要缓存,就使用方法。
  • 当你有一些数据需要随着其它数据变动而变动时,通常更好的做法是使用计算属性而不是命令式的 watch 回调。
2.侦听属性watch
  • 当需要在数据变化时执行异步开销较大的操作时,这个方式是最有用的。

二、v-if和v-show

1.v-if

  • v-if是真正的条件渲染,它会确保在切换过程中,条件块内的事件监听器和子组件适当的被销毁和重建
  • v-if是惰性的:如过在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块
  • 适用于在运行时条件很少改变
2.v-show
  • 不管初始条件是什么,元素总是会被渲染,并且只是简单的基于css进行切换(display)
  • 适用于频繁的切换

三、v-for

1.v-for(数组)
  • (item, index) in items 可选的第二个参数为当前项的索引
2.v-for(对象)
  • <div v-for="(value, key, index) in object">可以提供第二个的参数为键名
  • 第三个参数为索引
<div v-for="item in items" :key="item.id"> 建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

四、数组更新检测

1.以下变动 不能触发对应元素更新
  • 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue  替代方法:Vue.set(vm.items, indexOfItem, newValue) 或  vm.$set(vm.items, indexOfItem, newValue)
  • 当你修改数组的长度时,例如:vm.items.length = newLength 替代方法:vm.items.splice(indexOfItem, 1, newValue)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值