Vue注意事项

vue 中 data 为什么是一个函数

1. 如果不是 data 的话就会报错

2. 初期的 vue 版本 data 可以是个对象，但是当包含 data 的组件被实例化两处后，修改其中一个组件的 data，另外一个组件也会发生改变。容易导致出现问题

computed 和 watch 的区别是什么

computed

1. 它是计算属性。主要用于值的计算并一般会返回一个值。所以它更多⽤于计算值的场景

2. 它具有缓存性。当访问它来获取值时，它的 getter 函数所计算出来的值会进行缓存

3. 只有当它依赖的属性值发生了改变，那下⼀次再访问时才会重新调⽤ getter 函数来计算

4. 它适⽤于计算⽐较消耗性能的计算场景

5. 必须要有一个返回值

6. 不支持异步

watch

1. 它更多的是起到 “观察” 的作⽤，类似于对数据进行变化的监听并执行回调。

   主要⽤于观察 props 或 本组件 data 的值，当这些值发生变化时，执⾏处理操作

2. 不一定要返回某个值

3. 支持异步

4.  不支持缓存，数据变，直接会触发相应的操作；

建议

1. 当目的是进⾏数值计算，且依赖于其他数据，那么推荐使用 computed

2. 当需要在某个数据发生变化的, 同时做⼀些稍复杂的逻辑操作，那么推荐使⽤ watch

v-show 和 v-if 的区别

• 控制手段不同

• 编译过程不同

• 编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于 css 切换

• v-show 由false变为true的时候不会触发组件的生命周期

• v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

v-if 和 v-for 的优先级,能否连用

作用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

优先级

v-for优先级比v-if高

注意事项

1. 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

2. 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行 v-if 判断，然后在内部进行 v-for 循环

3. 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项