继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Vue防坑指南

Keyro
关注TA
已关注
手记 25
粉丝 35
获赞 64

对象属性添加与删除


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(()=>{
	       ///.......
		})
	}
})

最后,附上我的个人博客地址,欢迎交流。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP