基础语法

条件渲染

1. v-if

template元素可以当作不可见的包裹元素, 在v-if上使用,其不会被渲染出来,类似于小程序中的block

2. v-show

v-if不同,v-show是给元素加上一个display:none的样式

区别

  • 用法上:
    • v-show不支持template
    • v-show不可以和v-else一起使用
  • 本质上:
    • v-show的元素是否显示在浏览器上,它的dom都是会渲染的,只是通过css的display属性来进行切换 
    • v-if当条件为false时,对应的元素 不会渲染到DOM中

选择

  • 如果需要频繁切换,使用v-show
  • 如果无需频繁切换,使用v-if

列表循环

v-for 可以用于对象也可以用于数组

对象:

<div v-for = "(value,key,index) in object" :key="key">{{value}}</div>

数组:

<div v-for = "(item,index) in array" :key="item.id">{{item.name}}</div>

v-for中的key是什么作用

  • 在使用v-for进行列表渲染的时,我们通常会给元素或者组件绑定一个key属性
  • 官方解释
    • key属性主要用于在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes
    • 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用同类型元素的算法;
    • 使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在 的元素;

认识VNode

  • 目前未学习完整的组件概念,先理解HTML元素创建出来的VNode;
  • VNode的全称是Virutal Node,也就是虚拟节点;
  • 事实上,无论是组件还是元素,它们最终在Vue中表现出来的都是一个个VNode;
  • VNode的本质是一个JS标签
    <div class="title" style="font-size: 30px;color: red;">哈哈</div>
    const vnode = {
        type:"div",
        props:{
          class:"title",
          style:{
            "font-size":"30px",
            color:'red'
          }
        },
        children:"哈哈哈"
      }

虚拟DOM (V DOM )

  • 如果内容不只一层,而是多层嵌套的元素,那么就会形成一个VNode Tree

插入元素

  • 插入f元素(a,b,c,(f),d)
    • 在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表
    • 对于列表中a、b、c、d都是没变化的
    • 在操作真实DOM的时候,我们只需要添加一个便签写上
  • Vue中插入新元素
    • 在有key和没有key会调用两个不同的方法
    • 有key,使用patchKeyedChildren方法
    • 没有key,使用patchUnkeyedChildren方法

 VNode更新(没有key的情况)

  • 没有key的diff算法

  • 没有key的时候后,diff的算法效率不高,
    • c和d事实上不需要有任何改动
    • 但是因为c被f用了,后续的所有内容都要进行一次改动,并且最后进行新增
  • 有key执行操作(Vue3 源码)
  • 有key的diff算法

    • 第一步操作是从头开始遍历、比较:
      • a和b是一直的会继续比较;
      • c和f因为key不一致,所以就会break跳出循环
    • 第二步的操作是从尾部开始遍历、比较:
    • 第三不是如果旧节点遍历完毕,但是依然有新的节点,那么就新增节点:
    • 第四步是如果新的节点遍历完毕,但是依旧有旧的节点,那么就移除旧的节点:
    • 第五步是最特色的情况,中间还有很多未知的或者乱序的节点:
    • 以上内容,我们可以发现,Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作:
      • 在没有key的时候,效率低
      • 在进行插入或者重置顺序的时候,保持相同的key可以让diff算法更加高效

数据更新检测

Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,这些被包裹过的方法包裹如下:

  •  push():数组的末尾添加一个或多个元素
  • pop() :用于删除数组的最后一个元素并返回删除的元素
  • shift():从数组中删除第一个元素,并返回该元素
    • 如果在空数组上调用shift(),它将返回undefined
  • unshift():将新项添加到数组的开头,并返回新的长度
  • splice():用于添加或删除数组中的元素
  • sort():对数组的元素进行排序
  • reverse():用于颠倒数组中元素的顺序

替换数组的方法

  • 上面的方法会直接修改原来的数组,但是某些方法不会替换原来的数组,而是会生成新的数组,比如filter()、concat()和slice()

Vue3的Options API

复杂Data的处理方式——计算属性computed

  • 关于计算属性
    • 计算属性将被混入到组件实例中。所有getter和setter的this上下文自动地绑定为组件实例;
    • 计算属性的用法:
      • 选项:computed
      • 类型:{[key:string]:function|{get:Function,set:Function}}
    • 与methods的区别,计算属性会有缓存,多次调用,只执行一次,而方法在每次使用都会调用
  • setter和getter
    • 计算属性在大多数情况下,只需要一个getter方法,所以我们会将计算属性直接写成一个函数
    • computed:{
         fullName:function(){
            return this.firstName+''+this.lastName;  
        }
      }
    • computed:{
          fullName:{
              get:function(){
                  return this.firstName+''this.lastName
              },
      //修改的时候触发
              set:function(newValue){
                  console.log(newValue)
              }
          }
      }    
    • 一般的,对一个对象进行setter方法调用时,调用的这个set方法称为setter方法

复杂Data的处理方式——侦听器watch

  1. 基本使用
    侦听到变量的变化时,去进行一些逻辑处理(JavaScript,网络请求)
     
    watch:{
            //默认情况,侦听器只会针对数据本身,内部发生改变,无法侦听到
            //question,侦听的data属性
            // newValue 和 oldValue分别为新旧值
            question:{
                    deep:true,//深度监听
                    handler:function(newV,oldV){
    			    console.log('watch中:',newV)
                    },
                    immediate:true//立即执行
            }
    }
  2. 用法
    ·选项:watch
    ·类型:{ [key:string]:string | Function | Object | Array }

  3. 其他用法

    watch:{
        "info.name":function(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    }
    created() {
        this.$watch("info",(newInfo,oldInfo)=>{
    
        },{
            deep:true,
            immediate:true
        })
        <!-- 或者 -->
        this.$watch("info",function(newInfo,oldInfo){
    
        })
    },

Vue3 组件化开发

Vue3的表单和开发模式

v-model的原理

  • v-bind绑定value的值
  • v-on绑定input时间监听到函数中,函数会获取最新的值赋值到绑定的属性中
Logo

前往低代码交流专区

更多推荐