首页 微博热点正文

火车票查询,Vue3.0简略知道,physical

Vue3.0规划方针

  • 更小
  • 更快(*)
  • 加强TypeScript支撑(*)
  • 加强API规划一致性
  • 进步本身可维护性
  • 敞开更多底层功用

更快

  • Object.defineProperty -> Proxy (颗粒度更大)
  • Virtual Dom 重构
  • 更多编译优化:slo火车票查询,Vue3.0简略知道,physicalt默许编译为函数(不存在父做了爱子组件强耦合),Momomorphic vnode factory,Compiler-generated flags for vnode/children types

Virtual Dom 重构

传统Virtual 陈贵贞DOM的功能瓶颈

颗粒度是组件。

尽管Vue可以确保触发更新的组件最小化,可是单个组件内部仍然需求遍历该组件的整个Virtual DOM树。

传统Virtual DOM的功能跟模板巨细正相关,跟动态节点的数量无关。在一些组件整个模板内只要少数动态节点的情况下,这些遍历都是功能的糟蹋。

Vue3.0 Vi成都龙泉天气预报火车票查询,Vue3.0简略知道,physicalrtual DOM

动态结合

  • 节点结构彻底不会改动
  • 只要一个动态节点

节点结构改变 v-if

  • v-if 外部:只要v-if是动态节点
  • v-if 内部:只要 {{ message }} 是动态节点

节点结构改变 v-for

  • v-for 外部:只要v-fo阿娇相片r是动态节点 (fragment)
  • 每个v-for循环内部:只要 {{ item.message }} 是动态节点

区块树Block tree

  • 将模板根据动态节点指令切开为嵌套的戴夫的杂货铺区块
  • 每个区块内部的节点结构是固定的
  • 每个区块只需求以一个Array追寻本身包括的动态节点

晋级

新策略将Virtual DOM更新性沃趣小c能能由与模板全体巨细相关提升为与动态皆藤爱子内容的数量相关

TypeScript(略)洪金州

API规划

F异界封神录uction-based API

const App = {
setup() {
// data
c薄习onst count = value(0)
// computed
const plusOne = computed(() => count.value + 1)
// method
const increment = () => { count.val今天说法女模特碎尸案ue++ }
// watch
watch(() => count.value 超级天眼今天启用* 2, v => console.log(v))
// lifecycle
onMounted(() => console.log('mounted!'))
火车票查询,Vue3.0简略知道,physical// 露出给模嵩少秘贴板或烘托函数
return { count }
}
}
仿制代码

长处

  • 没有命名空间抵触
  • 数据来历明晰
  • 没有额定的组件功能耗费

比照Class API

  • 更好的TypeScript类型推导支撑
  • 更灵敏的逻辑复用才能
  • Tree-shak此间长情ing友爱
  • 代码更简单被紧缩

更灵敏的逻辑复用才能

鼠标方位侦听:

界说

function useMousePos火车票查询,Vue3.0简略知道,physicalition() {
const x = value(0)
const y = value(0)

cons曼若姿t update = e => {
x.valu师傅不要全文免费阅览e = e.pageX
y.value = e.pageY
}

onMounted(() => {
window.addEventListener裴佳欣的爸爸妈妈相片曝光('mousemove', update)
})

onUnmounted(() => {
window.removeEventListener('mo火车票查询,Vue3.0简略知道,physicalusemove', update)
})

return { x, y }
}
仿制代码

运用

new 学长的隐秘情人Vue({
template: `

Mouse position: x {{ x }} / y {{ y }}

`,
s火车票查询,Vue3.0简略知道,physicaletup() {
火车票查询,Vue3.0简略知道,physicalconst { x, y } = useMousePosition()
return { x, y }
}
})
仿制代码

比照React Hooks

  • 相同的逻辑组合、复用才能
  • Vue只调用一次,契合js直觉,没有闭包变量问题,没有内存/GC压力,不存在内联回调导致湍组词子组件永久更新的问题

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。