结论
v-if适用于运行时很少改变条件，不需要频繁切换条件的场景 。v-show则适用于需要非常频繁切换条件的场景 。
2、合理使用watch和
计算属性，依赖其他属性值，且计算属性的值有缓存 。只有计算属性依赖的的属性值发生变化，计算属性才会重新计算 。
当我们需要进行数值计算，且依赖于其它数据时，推荐使用计算属性，因为可以利用缓存特性，避免每次获取值时，都要重新计算 。
watch
更多的起到观察的作用，类似数据的监听回调 。每当监听的数据变化时，都会执行回调，进行后续操作 。
当我们需要在数据变化时，执行异步或开销较大的操作时，可以使用watch 。watch允许我们执行异步操作、限制执行操作时的频率、设置中间状态等，这些都是计算属性无法做到的 。
3、v-for遍历注意事项
v-for遍历必须为item添加key
列表数据进行遍历渲染时，需要为每一项item设置唯一的key值，方便Vue.js内部机制精准找到数据，有变动时，可以精准实现局部渲染 。
v-for遍历避免同时使用v-if
v-for的执行级别比v-if高，同时使用会遍历数组的每一项，然后挨个判断v-if，这样会造成不必要的性能开销，影响速度，尤其是只需要渲染很小一部分的时候，推荐使用计算属性 。
推荐 。
computed: {activeUsers: function () {return this.users.filter(function (user) {return user.isActive})}}
不推荐 。
4、长列表性能优化
Vue会通过.对数据进行劫持，来实现视图响应数据的变化，然而有些时候，组件就是纯粹的数据展示，不会有任何改变，此时就不需要Vue来劫持数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间 。
那如何禁止Vue劫持数据呢？可以通过.方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了 。
export default {data: () => ({users: {}}),async created() {const users = await axios.get("/api/users");this.users = Object.freeze(users);}};
5、事件的销毁
Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器 。
但仅限于组件本身的事件 。如果在JS内使用等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露 。
created() {addEventListener('click', this.click, false)},beforeDestroy() {removeEventListener('click', this.click, false)}
6、图片资源懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载 。这样对于页面加载性能上会有很大的提升，也提高了用户体验 。
7、路由懒加载
Vue是单页面应用，可能会有很多的路由引入，这样使用打包后的文件很大，当进入首页时，加载的资源过多，页面可能会出现白屏，不利于用户体验 。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了，会大大提高首屏显示的速度，但可能其他的页面的速度会降低 。
const Foo = () => import(‘./Foo.vue’)const router = new VueRouter({routes: [{ path: ‘/foo’, component: Foo }]})
- 可再生能源有哪五种
- Kubernetes 17 （k8s中部署Prometheus、监控nginx、
- 电脑串口号被占用，如何清除和重置串口号
- 2022年全球市场电视空白频谱总体规模、主要生产商、主要地区、产品和应用细分研究
- i18n 国际化
- 安全工具
- 如何用Python保存语音、图片、视频等信息转发给好友
- Drizzle、MariaDB和Percona Server_超越MySQL：三
- 一、安装适用于Windows的Linux子系统
- 卷积神经网络的FPGA硬件加速——QMJ