Vue防坑指南
对象属性添加与删除
let vm = new Vue({
data() {
return {
a
}
}
})
vm.b = "xxxx" //非响应
vm.a = "xxx" //响应
vm.$set('b',"xxxx")//响应
Vue 不能检测以上属性添加或删除的变化,必须使用 Vue.set 或者 vm.$set 设置属性
数组更新检测
Vue 无法检测到以下更新:
-
单独设置数据中某一项元素
-
变更数据长度
替代的解决方案是使用 vm.$set 方法,删除数据某一项使用 splice 方法
let vm = new Vue({
data() {
return {
items:[]
}
}
})
vm.$set(vm.items,index,item)
vm.items.splice(newLength)
vm.items.splice(itemIndex,1)
vm.items.push(item)
...
变量命名
以"_","$"为开头命名的变量不会被 Vue 代理
let vm = new Vue({
template:`
<div>
<span>{{_a}}</span>
<span>{{$b}}</span>
</div>
`,
data() {
_a:1,
$b:2
}
})
vm._a = 3 //不会响应
vm.$b = 4 //不会响应
事件绑定
在自定义 Vue 组件上绑定原生事件需要加 .native 修饰符
<my-component @click.native="handleClick"></my-component>
定时器
组件内部创建的定时器要及时销毁,防止内存溢出
let vm = new Vue({
mounted() {
this.timer = setInterval(()=>{},10000)
},
beforeDestory() {
clearInterval(this.timer)
}
})
dom操作
需要在dom操作之后执行的操作要放到$nexTick中执行
let vm = new Vue({
mounted() {
this.$nextTick(()=>{
///.......
})
}
})
最后,附上我的个人博客地址,欢迎交流。
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦