前端常见vue面试题(必备)

v-if和v-for哪个优先级更高

  • 实践中不应该把v-forv-if放一起
  • vue2中,v-for的优先级是高于v-if,把它们放在一起,输出的渲染函数中可以看出会先执行循环再判断条件,哪怕我们只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表,这会比较浪费;另外需要注意的是在vue3中则完全相反,v-if的优先级高于v-for,所以v-if执行时,它调用的变量还不存在,就会导致异常
  • 通常有两种情况下导致我们这样做:
    • 为了过滤列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如 activeUsers),让其返回过滤后的列表即可(比如users.filter(u=>u.isActive)
    • 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。此时把 v-if 移动至容器元素上 (比如 ulol)或者外面包一层template即可
  • 文档中明确指出永远不要把 v-ifv-for 同时用在同一个元素上,显然这是一个重要的注意事项
  • 源码里面关于代码生成的部分,能够清晰的看到是先处理v-if还是v-for,顺序上vue2vue3正好相反,因此产生了一些症状的不同,但是不管怎样都是不能把它们写在一起的

vue2.x源码分析

在vue模板编译的时候,会将指令系统转化成可执行的render函数

编写一个p标签,同时使用v-ifv-for

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {
  { item.title }}
  p>
div>

创建vue实例,存放isShowitems数据

const app = new Vue({
   
  el: "#app",
  data() {
   
    return {
   
      items: [
        {
    title: "foo" },
        {
    title: "baz" }]
    }
  },
  computed: {
   
    isShow() {
   
      return this.items && this.items.length > 0
    }
  }
})

模板指令的代码都会生成在render函数中,通过app.$options.render就能得到渲染函数

ƒ anonymous() {
   
  with (this) {
    return 
    _c('div', {
    attrs: {
    "id": "app" } }, 
    _l((items), function (item) 
    {
    return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}
  • _lvue的列表渲染函数,函数内部都会进行一次if判断
  • 初步得到结论:v-for优先级是比v-if高
  • 再将v-forv-if置于不同标签
<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{
  {item.title}}p>
  template>
div>

再输出下render函数

ƒ anonymous() {
   
  with(this){
   return 
    _c('div',{
   attrs:{
   "id":"app"}},
    [(isShow)

你可能感兴趣的:(前端框架,vue.js)