随笔分类 - vue3
摘要：vue的源码包含三大核心： Compiler模块：编译模板系统 Runtime模块：也可以称之为Renderer模块，真正的渲染的模块 Reactivity模块：响应式系统 三个系统之间如何协同工作呢？ 实现一个Mini-Vue 包含三个模块： 渲染系统模块 可响应式系统模块 应用程序入口模块 渲染
阅读全文
摘要：通常向vue全局添加一些功能时，会采用插件的模式，有两种编写方式： 对象类型：一个对象，但是必须包含一个install的函数，该函数会在安装插件时执行 函数类型：一个function，这个函数会在安装插件时自动运行 插件可以完成很多功能，没有限制，一下几种都是可以的： 添加全局方法或者propert
阅读全文
摘要：自定义指令 自定义指令分为两种： 自定义局部指令：组件通过directives选项们只能在当前组件中使用 自定义全局指令：app的directive方法，可以在任意组件中使用 案例：当input元素挂载完成之后可以自动获取焦点 实现方式一：使用默认的实现方式 <template> <div> <in
阅读全文
摘要：vue推荐在绝大多数情况下使用模板来创建html，但是在一些特殊的场景，需要JavaScript的完全编程的能力，这个时候就可以使用渲染函数，比模板更接近编译器 vue在生成真实的DOM之前，会将所有的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM） templ
阅读全文
摘要：customRef函数 创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制 它需要一个工厂函数，该函数接收track和trigger函数作为参数 并且返回一个带有get和set的对象 在进行双向数据绑定的时候，输入框输入的内容与下方文字显示的内容是同步变化的 <template> <di
阅读全文
摘要：vite是vue3中新型的工程化工具，它是一个基于浏览器原生ES模块导入的开发服务器 在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用，同时不仅对vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生成环境下使用Ro
阅读全文
摘要：keyCode作为v-on修饰符被移除 非兼容：不再支持使用数字 (即键码) 作为 v-on 修饰符 非兼容：不再支持 config.keyCodes 在 Vue 2 中，keyCodes 可以作为修改 v-on 方法的一种方式。 <!-- 键码版本 --> <input v-on:keyup.13
阅读全文
摘要：其他小改变 destroyed 生命周期选项被重命名为 unmounted beforeDestroy 生命周期选项被重命名为 beforeUnmount default prop 工厂函数不再可以访问 this 上下文 自定义指令的 API 已更改为与组件生命周期一致，且 binding.expr
阅读全文
摘要：概览 非兼容：检测并确定哪些标签应该被视为自定义元素的过程，现在会在模板编译期间执行，且应该通过编译器选项而不是运行时配置来配置。 非兼容：特殊的 is attribute 的使用被严格限制在保留的 <component> 标签中。 新增：为了支持 2.x 在原生元素上使用 is 的用例来处理原生
阅读全文
摘要：在vue中我们除了可以用template来进行模板化的渲染输出，还可以用render方法进行编程式的渲染 模板有着看起来更易于阅读，更直接的优点，而render方法有着更好的灵活性，但是在vue3中依然保留了这个功能，而且还为Composition Api的编程理念做了调整。 在vue2中，rend
阅读全文
摘要：以下是对变化的总体概述： 新的 defineAsyncComponent 助手方法，用于显式地定义异步组件 如果是一个带选项的复杂的异步组件，component 选项重命名为 loader Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise 在vu
阅读全文
摘要：对变化的总体概述： 在 3.x 中，2.x 带来的函数式组件的性能提升可以忽略不计，因此我们建议只使用有状态的组件 函数式组件只能由接收 props 和 context (即：slots、attrs、emit) 的普通函数创建 非兼容：functional attribute 已从单文件组件 (SF
阅读全文
摘要：在vue2中v-for绑定的$refs将会自动生成一个refs数组，但是在v-for中这种行为将会变得有歧义和不高效。 在vue3中，这种用法将不会被生效，因为vue3中不会自动生成refs数组，如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的形式来手动绑定,也就是在vue3中v-fo
阅读全文
摘要：v-on 的 .native 修饰符已被移除。 2.0 语法 默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符： <my-component v-on:close="handle
阅读全文
摘要：vue3中同一个元素上即使用v-if，又使用v-for时，v-if的优先级高于v-for 案例： <body> <div id="app"> <ul> <li v-for="item in arr" v-if="item.done" :class="{todos:iten.done}" :key="
阅读全文
摘要：在vue3中，如果一个元素同时定义了v-bind="object"语法绑定属性和单独绑定的属性，那么声明绑定的顺序决定了他们如何合并，现在开发者对自己所希望的合并行为有了更好的控制 <body> <div id="app"> <div id="red" v-bind="{id:'blue'}"> v
阅读全文
摘要：新增：对于v-if/v-else/v-else-if的各分支项，key将不再是必须的，因为vue3会自动生成唯一的key 非兼容：如果你手动提供了key，那么每个分支必须使用唯一的key，不能通过故意使用相同的key来强制使用分支 非兼容：<template v-for>的key应该设置在<temp
阅读全文
摘要：v-model指令的变化 在vue2中有两个相似的功能，是sync修饰符和v-model，但是实际运用的时候，往往容易混淆，因为它们功能很相似。比如我想绑定一个动态的值，又想在子组件中尝试的去改变它，sync修饰符和v-model都可以实现此功能，所以不知道该选哪个。 在vue3中这两个功能做了一次
阅读全文
摘要：在vue3 中，将全局改变vue行为的全局API移到由新的createApp方法创建的应用程序实例中，并且它们的影响现在仅限于该应用程序实例 vue2可以改变vue行为的全局API和全局配置 常见的全局API：Vue.component 、Vue.mixin 、Vue.extend、Vue.next
阅读全文
摘要：在vue3.0中，为了更好的实现多平台应用，将渲染器的创建函数createRenderer方法单独分离出来，这个API可以用来自定义渲染逻辑，将Virtual DOM渲染为web平台真实DOM 作用：实现脱离于源码之外的各种跨平台操作 <!DOCTYPE html> <html lang="en">
阅读全文
浙公网安备 33010602011771号