Vue.js 使用注意事项

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