Vue.js 使用注意事项
1
过滤器主要用于简单的文本转换,如果要实现复杂的数据变换,应使用计算属性
指令的使用
v-bind
基本用于HTML元素上的属性,如id、class、href、src等v-on
用来绑定事件监听器,如click、dblclick、keyup、mousemove等,method内的this指向的是当前Vue实例v-show
不能使用在template上
- v-if
和 v-show
使用场景
v-if
条件为false则不会编译渲染元素。v-show
只是简单的CSS属性切换,无论true/false,都会编译。v-if
适合条件不常改变的场景v-show
适用频繁切换条件
computed和methods的区别
methods有括号(),computed不带括号。
computed是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
methods在重新渲染的时候,函数总会重新调用执行。
key的使用
Vue渲染元素时,考虑效率,会尽可能复用已有的元素。此时需要在被重用的元素加上key属性
<input key="go">
数组的使用
filter()
、concat()
、slice()
不会更改原数组,将返回一个新数组用新数组替换原数组,无性能影响。Vue渲染时,会尽量复用DOM元素
部分数组变动无法被Vue检测到,并更新视图
app.books[3]={}
app.books.length=1
以上情况可以分别使用
Vue.set
和app.books.splice(1)
处理
组件的使用
<table>
、<ul>
、<ol>
、<select>
等标签受HTML限制,只允许出现限制的标签,自定义的组件标签是无效的。
这时候可以使用is
属性挂载组件
<table>
<tbody is="my-component"></tbody>
</table>
<tbody>
渲染时会替换为组件my-component
的内容
注:但使用字符串模板时,不受限。如.vue
文件
组件通信
- 父->子 prop
- 子->父 $emit v-model