Vue遇到的注意点总结-1

Vue遇到的注意点-1

1.vue无法检测数组项的修改

通过索引更改数组中某一项时不会触发刷新

this.items[3] = {'message':'update'};//不会触发更新

解决方式:
1.使用Vue.set()方法
2.通过splice()方法的第三个参数修改内容

2.vue无法检测数组长度的修改

直接修改数组length属性不会触发刷新

this.items.length = 2

解决方式:
使用splice方法

this.items.splice(2)
3.注意html标签嵌套规则

例如ul的下级应该是li而不是其他标签

4.不要使用template作为组件标签名

使用‘template’作为组件标签名是无效的

5.每个组件都需要有根元素

组件若是有多个标签,应该用一个根元素去包括他们
例:
<div> <p></p> <p></p> <p></p> </div>

6.子组件的data使用函数的方式定义

定义方式分公有和私有
格式:
私有:

data:function(){
	return {name:doggi}
}

公有:

var data = {name:doggi}//这句在组件外定义
data:function(){
	return data;
}
7.v-for的优先级比v-if更高

一个标签里同时存在v-for和v-if时,先执行for循环,再对循环的每一项做if判断

8.尽可能使用v-for来提供 key
<div v-for='item in items' :key='item.id'>
9.不应该使用箭头函数来定义methods函数
10.computed中定义的函数只有依赖关系发生改变时才触发渲染,否则返回缓存上次结果
11.v-text不会渲染html标签

以文本的形式原样输出。需要渲染标签请使用v-html

12.使用v-pre指定不需要渲染的元素,减少编译时间
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章