1.v-if 和 v-show 的区别?
1).v-show 和 v-if 都是用来显示隐藏元素, v-if 还有一个 v-else 配合使用, 两者达到的效果都一样.
性能方面去有很大的区别:
2).v-show: 不管条件是真还是假, 第一次渲染的时候都会编译出来, 也就是标签都会添加到 DOM 中. 之后切换的时候, 通过 display: none; 样式来显示隐藏元素. 可以说只是改变 CSS 的样式, 几乎不会影响什么性能. v-if: 在首次渲染的时候, 如果条件为假, 什么也不操作, 页面当作没有这些元素. 当条件为真的时候, 开始局部编译, 动态的向 DOM 元素里面添加元素. 当条件从真变为假的时候, 开始局部编译, 卸载这些元素, 也就是删除.
3). 性能方面 v-if 绝对是更消耗性能的, 因为 v-if 在显示隐藏过程中有 DOM 的添加和删除, v-show 就简单多了, 只是操作 CSS.
4). 因为 v-show 无论如何都会渲染, 如果在一些场景下很难出现, 那么使用 v-if. 如果是一些固定的, 条件内容都不怎么会改变的, 频繁切换的, 使用 v-show 会比较省性能. 如果是子组件, 每次切换子组件不执行生命周期, 使用 v-show, 如果子组件需要重新执行生命周期, 那么使用 v-if 才能触发.
2.vue 生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
- --------------------------
- beforeCreate
实例组件刚创建, 元素 DOM 和数据都还没有初始化, 暂时不知道能在这个周期里面进行生命操作.
created
数据 data 已经初始化完成, 方法也已经可以调用, 但是 DOM 为渲染. 在这个周期里面如果进行请求是可以改变数据并渲染, 由于 DOM 未挂载, 请求过多或者占用时间过长会导致页面线上空白.
beforeMount
DOM 未完成挂载, 数据也初始化完成, 但是数据的双向绑定还是显示 {{}}, 这是因为 Vue 采用了 Virtual DOM(虚拟 Dom) 技术. 先占住了一个坑.
mounted
数据和 DOM 都完成挂载, 在上一个周期占位的数据把值给渲染进去. 一般请求会放在这个地方, 因为这边请求改变数据之后刚好能渲染.
beforeUpdate
只要是页面数据改变了都会触发, 数据更新之前, 页面数据还是原来的数据, 当你请求赋值一个数据的时候会执行这个周期, 如果没有数据改变不执行.
updated
只要是页面数据改变了都会触发, 数据更新完毕, 页面的数据是更新完成的. beforeUpdate 和 updated 要谨慎使用, 因为页面更新数据的时候都会触发, 在这里操作数据很影响性能和容易死循环.
beforeDestroy
这个周期是在组件销毁之前执行, 在我项目开发中, 觉得这个其实有点类似路由钩子 beforeRouterLeave, 都是在路由离开的时候执行, 只不过 beforeDestroy 无法阻止路由跳转, 但是可以做一些路由离开的时候操作, 因为这个周期里面还可以使用 data 和 method. 比如一个倒计时组件, 如果在路由跳转的时候没有清除, 这个定时器还是在的, 这时候就可以在这个里面清除计时器.
Destroyed
说实在的, 我还真的不知道这个周期跟 beforeDestroy 有什么区别, 我在这个周期里面调用 data 的数据和 methods 的方法都能调用, 所以我会觉得跟 beforeDestroy 是一样的.
3.
来源: http://www.bubuko.com/infodetail-3275811.html