基础语法

条件渲染

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

Vue3+TypeScript相关推荐

  1. vue3+typescript引入外部文件

    vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...

  2. Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码

    文章目录 一.简介 二.Vue2和Vue3区别 三.Vue知识点学习 四.TypeScript知识点 一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...

  3. 前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

    一.文章引导 #mermaid-svg-1aHB08JglRY7yGzA {font-family:"trebuchet ms",verdana,arial,sans-serif; ...

  4. Vite+Vue3+TypeScript

    2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景 随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...

  5. vue3 + TypeScript + vant +pinia 实现网易云音乐播放器

    vue3 + TypeScript + vant +pinia 实现网易云音乐播放器 实现功能 每日推荐 私人FM 歌单广场 排行榜 歌手 歌曲播放 mv播放 上下滑动切换 云盘上传 用户登录 歌单创 ...

  6. 搭建环境，创建vue3+typescript+vuetify项目

    使用场景 使用Vue框架创建 vue3+typescript+vuetify3 项目: 一. Node下载安装及配置 1. node官网下载地址: https://nodejs.org/en/ 2. ...

  7. Vue3+TypeScript从入门到精通系列之：Try changing the lib compiler option to es2015 or later

    Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later tsc ./泛型接口.ts tsc编译 ...

  8. Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）

    1. 成果展示 真实接口地址 本项目使用的是真实线上的网易云API 线上演示地址 目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...

  9. Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果.结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识.通过本文的学习,相信读者 ...

  10. Vite搭建Vue3 + TypeScript 项目(NPM)

    文章目录 运行环境 使用Vite初始化项目 vite提供不同工具的初始化 以NPM为例: 运行环境 请确保电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 & ...

最新文章

  1. CAD二次开发学习笔记二(创建一个对话框)
  2. kvm cobbler无人值守批量安装操作系统
  3. [bash] printf使用范例
  4. 基于JAVA+SpringMVC+Mybatis+MYSQL的学生社团管理系统
  5. 嵌入式系统功能概要设计说明_嵌入式软件架构设计实际该怎么做？
  6. Delphi 11.1 Alexandria 下载地址集合（包括以前版本）
  7. arcMap安装教程
  8. 进程调度算法的模拟实现
  9. 打工人年终的自我犒赏,一人食火锅走起
  10. tcl电视显示服务器异常1500,TCL 智能液晶电视常见故障分析检修实例
  11. 开学作业——如何做好课堂笔记
  12. ReSharper未按照预期路径安装后如何修改（Windows 找不到“C:\Program Files (x86)\JetBrains\Installations”。请检查拼写并重试）
  13. 番茄工作法（番茄钟时间管理）
  14. 论文笔记：Controlling Decoding for More Abstractive Summaries with Copy-Based Networks
  15. QA——性能优化（一）
  16. php语言讲座,学习PHP语言的十大诀窍
  17. 知乎引流、知乎带货工具、知乎选品、数据分析、带货软件(1)
  18. C#时间格式转换问题（12小时制和24小时制）
  19. android usb采集卡,USB HDMI直播采集卡1805怎么用？
  20. PC主机主板OEM密钥读取保存工具

热门文章

  1. 【面试】Java 并发编程
  2. 腾讯云OCR文字识别的使用
  3. python中node_size是什么意思_python里二叉树pop_node=q.pop(0)什么意思？
  4. 《不拘一格——网飞的自由与责任工作法》读后感
  5. canvas里 阿里云服务器oss图片跨域处理
  6. Qt发布版本退出时错误处理“The inferior stopped because it received a signal from the operating system.”
  7. 一个较为感人的升学故事
  8. 强制关闭计算机窗口,windows系统怎么取消关机时强制关闭程序提示窗口？
  9. A Guide To Reverse Tethering
  10. 曝！苹果折叠iPhone要问世了