vue3最新版

Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

vue3

• 组合式API
  • 将同一个逻辑关注点相关的代码配置在一起 setup
  • 注意点
    • 在创建组件之前执行（beforeCreate之前）
      • 无法访问data、methods、computed
    • setup函数中this =>undefined
    • 只能同步，不能异步
    • 从setup返回的refs在模板中访问会自动展开，模板中不需要.value
  • 特性
    • composition API 入口
    • 在生命周期beforeCreate事件之前调用
    • 返回值
      • 返回一个对象，在模板中直接使用
      • 返回一个渲染函数
        • return () => h('div', [count.value, object.foo])
    • 参数
      • props对象 => 可以通过watchEffect或watch监听其变化
        • 不可解构=>失去响应式，若要解构使用vue的toRefs
      • context对象（attrs，slots、emit）=>非响应式，可解构
  • 新函数
    • ref
    • toRef
    • reactive
      • 参数必须是对象（json/arr）
    • h
    • watch
    • computed
    • 生命周期钩子，前缀为on
      • onMounted
      • onUpdated
      • 等
  • 提供注入
    • provide
    • inject
• 片段
  • 支持多个根节点
• Global API
  • new Vue() --> createApp
  • 挂载app实例 --> app.mount('#app')
  • 提供/注入
  • 应用之间共享配置
    • 设置工厂功能
      • const createMyApp = options => { const app = createApp(options) app.directive('focus' /* ... */) return app} createMyApp(Foo).mount('#foo')createMyApp(Bar).mount('#bar')
  • nextTick
• 特殊指令
  • key
    • 预期：number | string
    • 最常用例子：结合v-for使用
  • ref
    • 预期：string | Function
      • $refs 是非响应式的
    • 在dom上使用，指向dom元素；在子组件上使用，指向组件实例
  • is
    • 预期：string | Object (component’s options object)
• 模板指令
  • v-model
    • 高阶内容
    • prop：value -> modelValue
    • event：input -> update:modelValue
    • v-bind 修饰符 .sync 和组件model已移除，用v-model代替
    • 组件上可多个v-model 双向绑定
      • v-model:title='pageTitle' v-model.content='pageContent'
    • 可自定义修饰符
      • 对于带参数的v-model绑定，生成的prop名称为 arg+‘Modifiers’
  • template
    • <template v-for> 的key应该设置在template标签上
  • v-for 和 v-if 优先级更改
    • vue2+ v-for 优先级高于v-if
    • vue3+ v-if 优先级高于 v-for
  • v-bind='object' 排序问题
    • vue2+ 单独property 覆盖 object中的绑定
    • vue3+ 后者覆盖前者
  • v-for中ref不再注册ref数组
• 触发组件选项
  • 事件名建议使用kebab-case命名
• 组件
  • 函数组件
    • 全局导入h
  • 单文件组件
    • functional 在 template上删除
    • listeners 现在作为$sttrs一部分传递，可以将其删除
    • props的所有引用重命名为$props，将attrs重命名为$attrs
• 动态组件
  • keep-alive
• 异步组件
  • defineAsyncComponent
    • component 选项现在被重命名为 loader，以便准确地传达不能直接提供组件定义的信息。loader 函数不再接收 resolve 和 reject 参数，且必须始终返回 Promise
  • 与Suspense一起使用，由Suspense控制，也可修改Suspense：false，恢复自身的加载状态
• 内置组件
  • component
    • is - string | Component
  • transition
  • transition-group
    • <transition-group> 的子节点必须有独立的 key
  • Teleport
    • to - string
      • 必须是有效的查询选择器或HTMLElement
    • disabled - boolean
  • slot
    • 用于具名插槽
• 渲染函数
  • 渲染函数API
    • h全局导入
    • 参数更改为在有状态组件和函数组件之间更加一致
    • vnode 现在有一个扁平的prop结构
  • slot统一
    • this.$scopedSlots 替换为 this.$slots
  • 自定义指令
    • api和组件生命周期统一起来 ，变为了beforeMount，mounted，beforeUpdate，update（移除），updated，beforeUnmount，unmounted
  • class被重命名
    • v-enter -> v-enter-fromv-leave -> v-leave-from
  • 不再支持点分隔字符串路径，请改用计算函数作为参数
    • 组件watch选项和实例方法$watch
• 实例方法
  • $watch
    • unwatch <取消侦听函数>
    • deep <发现对象内部值的变化 deep:true>
    • immediate
      • <立即以表达式的当前值触发回调 immediate:true>
      • 带有immediate选项时，不能在第一次回调中取消侦听；若仍需取消侦听，则先检查函数可用性
  • $emit
    • 最常用于 子组件使用父组件的方法
  • keep-alive
    • include 和 exclude
    • max
      • 最多可以缓冲多少个组件实例
    • 不会在函数式组件中正常使用，他们没有缓冲实例
  • $forceUpdate
    • 迫使组件实例重新渲染
  • $nextTick
    • 回调延迟到下次dom更新循环后执行，在修改数据后立即使用，等待dom更新
• 响应式API
  • 响应性基础API
    • reactive
      • 参数必须是对象（json/arr）
    • readonly
      • 只读 若变更会发出警告并失败
    • isProxy
      • 检查对象是reactive还是readonly创建的代理
    • isReactive
      • 检查对象是否是reactive创建的响应式proxy
      • 返回boolean值
      • 若proxy是readonly创建的，但包装了由reactive创建的另一个proxy，也会返回true
    • isReadonly
      • 检查对象是否由readonly创建的只读proxy
    • toRaw
      • 返回reactive或readonly代理的原始对象，用于临时读取或用于写入而不会触发更改
      • 不建议对保留原始对象的持久使用，请谨慎使用
    • markRaw
      • 标记一个对象，使其用于不会被转为代理，返回对象本身
    • shallowReactive
      • 创建响应式代理，跟随自身的property响应，不执行嵌套对象的深度响应式转换
    • shallowReadonly
      • 创建代理，使其自身的property为只读，不执行嵌套对象的深度只读转换
  • Refs
    • ref
      • 指向内部值的单个property
        • .value
      • 指定复杂类型，利用泛型参数 eg：const foo = ref<string | number>('foo')
      • 泛型未知，则用Ref<T>
    • unref
      • 参数为ref，则返回内部值，否则返回参数本身
    • toRef
      • 响应式连接，最常用的是prop的ref传给复合函数
    • toRefs
      • 将响应式对象转换为普通对象
    • isRef
    • customRef
      • 自定义ref
      • 需要工厂函数
      • 参数（track 和 trigger）
      • 返回（get 和 set）
    • shallowRef
      • 跟踪自己的.value更改，但是不会使其值变为响应式
    • triggerRef
      • 手动执行与shallowRef关联的任何效果
  • Computed 与 watch
    • computed
    • watchEffect
    • watch
• 移除API
  • $on，$off 和 $once 实例方法已被移除
  • 内敛模板 inline-template
  • $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期
  • 用计算属性或方法代替过滤器
  • 按键修饰符
    • 不再支持 config.keyCodes
    • 不再支持使用数字 (即键码) 作为 v-on 修饰符
• 小改变
  • destroyed 生命周期重命名为 unmounted
  • beforeDestroy 生命周期重命名为 beforeUnmount
  • 生成 prop 默认值的工厂函数不再能访问 this
    • 把组件接收到的原始 prop 作为参数传递给默认函数；
      • props: { theme: { default (props) { // `props` 是传递给组件的原始值。 // 在任何类型/默认强制转换之前 // 也可以使用 `inject` 来访问注入的 property return inject('theme', 'default-theme') } } }
    • 注入 API 可以在默认函数中使用
  • data选项只接受返回object的function，与mixin或extend合并时，浅层次执行合并
  • class被重命名
  • 自定义指令与生命周期相统一
• 变化