Vue3+TypeScript

基础语法

条件渲染

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 可以用于对象也可以用于数组

对象：

{{value}}

数组：

{{item.name}}

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标签

  哈哈

  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的时候，我们只需要添加一个便签写上f 
• 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时间监听到函数中，函数会获取最新的值赋值到绑定的属性中