随笔分类 - # Vue
摘要：toRef / toRefs 使 获取到的 响应式对象的属性 也具有响应式 也就是单独修改获取到的属性 原本响应式对象也会更新；反之亦然。 toRefs 主要方便解构语法，底层也是调用 toRef toRaw 去响应式结果 结果已经保存在内部属性中，toRaw 直接访问属性得到 obj[__v_ra
阅读全文
摘要：双向数据绑定方法 vue2 Object.definePropertie() vue3 Proxy VDOM 性能瓶颈突破 做了静态标记，静态内容不会去再对比 通过位运算对比得出其的静态标记情况 Fragments 允许组件多个根节点 vue3 会虚拟一个根节点，但实际不会渲染虚拟的节点 Tree-
阅读全文
摘要：ref ref isRef(obj) 判断 obj 是否为 ref 对象 需要 .value 再范围值 源码逻辑， createRef Ref对象会被直接返回 RefImpl 真正创建ref toRaw / toReactive 如果参数是引用类型 则会去调用 reactive ref 可绑定 DO
阅读全文
摘要：参考博客 arguments 防抖 高频请求只有最后一次处理 实现原理：每次响应时清空定时期，延时时间要高于高频请求的间隔 function debounce(fn, delay = 500) { let timer = null return function() { let args = arg
阅读全文
摘要：事件修饰符 只能对原生的 DOM 事件起作用的修饰符： .stop 组织事件冒泡传播 .prevent 阻止浏览器默认行为 如：a链接跳转页面，form submit会刷新页面，鼠标右键弹出菜单等 .capture 事件捕获模式 .self 当event.target是当前元素自身时触发 .once
阅读全文
摘要：用.的方式拼接字符串 绑定会变成拼接的字符串，使用数组方式 v-model="form[item.prop]" 注意：千万别把 from 写成 from，我是sb 😦
阅读全文
摘要：在时间钩子里使用 this.$nextTick() 可以等待 dom 生成以后再来获取 dom对象
阅读全文
摘要：由于element-ui 未对 Vue3 兼容，导致官方提供的构建版本不能使用 下面手动进行迁移 决定升级前请确保项目所有依赖都有替代方法 Vue特性变更，官网会给出解决方法 特别注意第三方UI相关依赖 vue2 改为 vue3 以及 相应的依赖修改 vue@next ， 组件 @vue/compi
阅读全文
摘要：Vue3 不支持 IE11 及以下 Vue2 不支持 IE8 及以下 因其无法兼容模拟 ES5 的特性 官方说明 新增-强大的新特性： 新增了 组合式 api --> setup 单文件组件的组合式 API 语法糖<script setup> 极大降低组件代码量<teleport to="selec
阅读全文
摘要：修饰符 修饰符可以简化代码 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 .stop 阻止事件继续传播 .prevent .capture 用事件捕获模式 .self 只当在 event.tar
阅读全文
摘要：字符串模板: 对象中作为 template 的属性值，是出现在js中的， DOM模板: 直接作用与HTML代码中，是出现在<templet>标签中的。 因为HTML标签的属性名是大小写不敏感的，会被自动识别成小写 因此无法在标签标签中使用驼峰命名，但js却可以使用驼峰命名 为了解决这个冲突，Vue会
阅读全文
摘要：watch 允许执行异步操作 (如访问一个 API)， 限制我们执行该操作的频率，并在得到最终结果前，设置中间状态。 这些都是 computed 计算属性无法做到的。 对于引用类型 默认不监听属性变化，除非设置deep选项，而 reactive 不需要设置 deep 引用类型 的newvalue 和
阅读全文
摘要：响应式 渲染函数也是函数 一处数据发生变化，与他相关的内容会同步发生变化。 响应式的基本思路： 要跟踪数据的变化，当数据变化时，更新相关(依赖)的运算。 为了能够更新相关运算（运算的代码需要被重复执行），应将其置于函数中方便调用 这个函数 通常被称为 effect 副作用函数 依赖关系的收集 tra
阅读全文
摘要：常见的应用范围： 添加全局方法或者 property。如：vue-custom-element加全局资源：指令/过滤器/过渡等。如：vue-touch）通过全局 mixin 来添加一些组件选项。(如vue-router)添加全局实例方法，通过把它们添加到 config.globalPropertie
阅读全文
摘要：参考教程 相较于模板，应用于更加灵活的场景 – 渲染函数 预备知识实例 property 的 api { rander() { return h('h1',xxx) // return h('h1',{},xxx) } } // 相当于 template： ` <h1> xxx </h1> ` h(
阅读全文
摘要：可以控制在 DOM 中哪个父节点下渲染了 HTML <teleport to="body"> <!-- 内部的 html 将在 body 下渲染 --> </teleport> 在同一目标（to='xxx'）上使用多个 teleport，顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之
阅读全文
摘要：directives选项中定义 指令 使用时添加v-前缀 全局注册 app.directive('xxx',{}) // vue2: Vue.directive('xxx',{}) 支持动态指令参数 v-xx:[abc]='xxx' 指令函数能够接受所有合法的 JavaScript 表达式。 如果方
阅读全文
摘要：一个 mixin 对象可以包含任意组件选项。 所有 mixin 对象的选项将被“混合”进入该组件本身的选项。 提高组件 选项api 的复用 规则： mixin会在前面执行属性冲突时会被覆盖 vue3 更推荐 组合api 全局 mixin app.mixin({···}) const app = Vu
阅读全文
摘要：父组件通过 provide选项提供数据 子组件通过 inject选项 注入数据 可以跨越层级传递 注：provide选项 要访问组件实例data，需要将 provide 转换为返回对象的函数 默认情况下，provide/inject 绑定并不是响应式的。
阅读全文
摘要：v-model 是表单双向数据绑定的简写方式 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；s
阅读全文
