v-if 与 v-show 的区别/v-for 与 v-if 的优先级 /methods computed watch 的区别

v-if 与 v-show 的区别?

 v-if 和 v-show 都是控制元素的显示与隐藏, 不过 v-if 控制元素的显
示和隐藏的时候会删除对⽤的 dom 元素,当每⼀个显示的时候,都会重新创建 dom 和渲染. ⽽ v-show 则是通过 css 的 display:none
和 display:block 来控制元素的显示与隐藏. v-if ⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤ v-show,如果不
是频繁操作的话,我们可以 v-if
在项⽬中我会经常使⽤ v-if 和 v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判断历史记录的显示与隐藏,这块我就可以使⽤ v-if ,当然⽤ v-show 也可以. 以上就是我对 v-if 和 v-show 的理解.

 v-for 与 v-if 的优先级那个⾼?如果同时使⽤ v-for 和 v-if 怎么解决?

v-for 的优先级⾼. 因为 v-for 的时候我们才开始渲染 dom 元素,这个 v-if 还⽆法进⾏判断.
v-for 和 v-if 不能同时使⽤,我们可以通过标签,⽐如 div 或者 template 标签来进⾏包裹,把 v-if 写到包裹的标签上⾯(写到 v-for 外⾯) 还有就是用计算属性算出来想要的数据再去循环
在 vue3 中 v-if 的优先级更高

methods computed watch 的区别

methods 是方法 各种事件放在这里 没有缓存功能

computed 是计算属性 需要 return 计算的结果 并且有缓存功能
只有跟他有关的值发生变化才会重新计算 否则就从缓存里拿 通常用来计算总数和总价 比如购物车功能就会用到计算属性

watch 监听属性 有三个参数 handler（执行函数） deep（深度监听） immediate（立即监听）
如果不需要 deep 和 immediate 的时候就会简写成一个函数
watch 可以监听 data 数据还能监听路由的变化
watch 里可以执行异步操作 但是计算属性不行
watch 的使用场景 存本地存储的时候 只要数据变了就要重新存一次 那么就可以用 watch 实现