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指定不需要渲染的元素，减少编译时间