深圳正规网站制作哪里好,英文网站制作公司哪家好,网站是用什么程序做的,中国最好的建筑设计公司文章目录 前言一、Composition Api二、setup语法糖三、响应式refreactive 四、其他一些关键点v-prev-oncev-memov-cloak 五、虚拟Dom五、diff算法 前言
本文用于记录学习Vue3的过程 一、Composition Api 我觉得首先VUE3最大的改变就是对于代码书写的改变#xff0c;从原来选择… 文章目录 前言一、Composition Api二、setup语法糖三、响应式refreactive 四、其他一些关键点v-prev-oncev-memov-cloak 五、虚拟Dom五、diff算法 前言
本文用于记录学习Vue3的过程 一、Composition Api 我觉得首先VUE3最大的改变就是对于代码书写的改变从原来选择式API变成现在的组合式API方式Vue3也是支持选择式的他能让我们的代码逻辑不再满屏跳转让代码更具有逻辑性当然我觉得也更好调试了。 二、setup语法糖 script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 script 语法它具有更多优势更少的样板内容更简洁的代码。能够使用纯 TypeScript 声明 props 和自定义事件。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
三、响应式 Vue3中响应式是整个框架的核心要使用响应式就须通过 ref 或者 reactive将常量变为响应式 其中可以搭配下列API简化开发在之后的文章中介绍 computed() readonly() watchEffect() watchPostEffect() watchSyncEffect() watch() 在进阶响应式还有其他响应式API
ref
ref 可以绑定一些基本数据类型比如字符串、数字等。ref实际上是通过对象自身value属性的get和set方法来拦截value属性达到响应式的。 所以使用ref定义的数据的时候都是以 xxx.value来使用。 使用ref也是有好处的在将其封装到一个对象中的时候所有的基本数据类型格式都是统一的在数据传输的时候传输的也是对象地址而不是值这保证了数据的统一性。 ref: 深层次的响应式,一般用来做普通类型的响应式如除arr\object的数据类型底层arr和object实现也是走reactive 可以获取dom元素具体使用场景在 组件通讯–06_ref-children-parent中
isRef: 用来判断某个对象是否为响应式对象 传入参数变量返回结果为boolean
shallowRef: 浅层次的响应式只会在响应到 xxx.value 第三方库对象代理不能用proxy时可以用这个 注不能和ref混用当两者变量同时出现在template中shallowRef会被影响视图的更新 ref底层调用triggerRefValue–triggerEffects 使得强制更新收集的依赖
triggerRef: 强制更新收集的依赖
customRef: 自定义响应式浅层次的响应式 reactive
reactive: 对类型进行了约束不能绑定普通数据类型只能绑定引用类型Array Object Map Set reactive proxy不能直接赋值否则破坏响应式对象 解决数组 可以push加解构 添加对象将数组当成属性使用
readonly: 用来将其变为只读的 注与 reactive一起使用时没有作用
shallowReactive 浅层响应式,与shallowRef类似存在相同的问题和reactive一起使用会影响响应
四、其他一些关键点
v-pre
跳过该标签以及子标签的编译按照原内容显示
span v-pre{{ this will not be compiled }}/spanv-once
使用该命令可以让该标签以及子标签只渲染一次并在未来跳过更新。
!-- 单个元素 --
span v-onceThis will never change: {{msg}}/span
!-- 带有子元素的元素 --
div v-onceh1comment/h1p{{msg}}/p
/div
!-- 组件 --
MyComponent v-once :commentmsg /
!-- v-for 指令 --
ulli v-fori in list v-once{{i}}/li
/ul使用场景
不需要数据响应式的标签上
script setup
import { ref } from vueconst msg ref(Hello World!)
/scripttemplateh1 v-once{{ msg }}/h1input v-modelmsg
/templatev-memo
v-memo也具有v-once的功能与v-once不同的是v-memo可以传 条件能更好的控制模板的缓存在其中可以传一个逻辑也可以传一个变量来控制。
// 当valueA和valueB不变的时候不更新
div v-memo[valueA, valueB]...
/div
// 当item.id selected条件成立不更新
div v-foritem in list :keyitem.id v-memo[item.id selected]pID: {{ item.id }} - selected: {{ item.id selected }}/pp...more child nodes/p
/div值得注意的是如果不传任何东西效果和v-once一样。 当搭配 v-for 使用 v-memo确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。
v-cloak
用于隐藏尚未完成编译的 DOM 模板
使用场景
在数据未完全挂载到实例上时会出现如v-pre指令的原始内容效果的”未编译模板闪现“的情况 搭配 [v-cloak] { display: none } css属性可以避免这种情况v-cloak会一直挂载在标签上直到组件编译完成前都隐藏原始模板最后他会自动移除。 五、虚拟Dom 虚拟Dom的存在大大降低了 操作真实DOM的代价因为一个真实DOM结点上的属性有很多通过对虚拟DOM的预操作让真实DOM以最小的代价更新视图。虚拟DOM是JS对象里面储存了关于结点的信息。 真实DOM属性 div/div虚拟DOM结点 div idapph1hello world!/h1
/div对应的虚拟DOM为 {tagName: div,props: {id: app},children: [{tagName: h1,props: {},children: [hello world!]}]
}
五、diff算法 diff算法的目的就是用来以最少的代价操作DOM就是能复用的绝不新建以最少的移动操作DOM。 Vue3中diff算法相比Vue2来说有了很大的提升主要靠他最长增长子序列算法来提升移动Dom代价。 Vue2更新结点的操纵主要有同级对比深度优先遍历
如果新节点有子节点而老节点没有子节点则判断老节点是否有文本内容如果有就清空老节点的文本内容然后为其新增子节点。如果新节点没有子节点而老节点有子节点则先删除老节点的子节点然后设置文本内容。如果新节点没有子节点老节点也没有子节点则进行文本的比对然后设置文本内容。如果新节点有子节点老节点也有子节点则进行新老子节点的比对然后进行新增、移动、删除的操作这就是diff 算法发生的地方。
Vue2中是通过双端对比算法来进行DOM的操作主要操作有
头新头旧尾新尾旧头旧尾新尾新头旧
在比较过程中如果存在相同就移动复用出现多的或者少的就进行新增和删除操作。
最后对于旧DOM中多的没有比对的就删除新DOM没有比对的就新增。 Vue3中分为两种情况有key和没有key的标识key也就是标签上的key大多在使用v-for时key比较常见。
没有key 没有Key时总共分为三步 - 头新---- 头旧从左到右依次比对相同就直接复用一直到不同- 尾新---- 尾旧从右到左依次比对相同就直接复用一直到不同- 更新和删除操作剩余结点如果多了就删除少了就新增。删除在前新增在后有key 有key时会经过五步其中最重要的为第五步也是运用了最长递增子序列算法的步骤 前序比较 从左到右依次比对相同就直接复用一直到不同后序比较 从右到左依次比对相同就直接复用一直到不同检查新增 有需要新增则新增检查删除 有需要删除则删除剩余结点数新旧一样 无序特殊处理 构建新结点的映射关系新增或者删除结点move为true求最长递增子序列 得到移动结点的最小代价时间复杂度为Onlogn移动不在序列里的结点 最长递增子序列 // 贪心二分
function getSequence(arr: number[]): number[] {const p arr.slice() // 保存原始数据const result [0] // 存储最长增长子序列的索引数组let i, j, u, v, cconst len arr.lengthfor (i 0; i len; i) {const arrI arr[i]if (arrI ! 0) {j result[result.length - 1] // j是子序列索引最后一项if (arr[j] arrI) { // 如果arr[i] arr[j], 当前值比最后一项还大可以直接push到索引数组(result)中去p[i] j // p记录第i个位置的索引变为jresult.push(i)continue}u 0 // 数组的第一项v result.length - 1 // 数组的最后一项while (u v) { // 如果arrI arr[j] 通过二分查找将i插入到result对应位置u和v相等时循环停止c (u v) 1 // 二分查找if (arr[result[c]] arrI) {u c 1 // 移动u} else {v c // 中间的位置大于等于i,vc}}if (arrI arr[result[u]]) {if (u 0) {p[i] result[u - 1] // 记录修改的索引}result[u] i // 更新索引数组(result)}}}u result.lengthv result[u - 1]//把u值赋给resultwhile (u-- 0) { // 最后通过p数组对result数组进行进行修订取得正确的索引result[u] vv p[v]}return result
}所以对于key的运用一定程度上能提升性能。
