12 2021 档案
摘要：Teleport 直译为传送的意思，顾名思义 vue3 的 teleport PAI 能把组件的 html 结构移动倒指定的位置 例子： 原始结构 使用teleport,移动到body去 就是这么神奇
阅读全文
摘要：父组件通过 provide 提供数据 provide('data',data) 后代组件提供 inject 接收数据 inject('data') 父组件 后代组件（无论层级）
阅读全文
摘要：定义：toRefs可以将对象（只能接收ractive对象）中的属性变成响应式 正常reactive对象数据也是响应式的，如果用toRefs解构出去会更加方便 用法： <h3>{{name}}</h3> let obj = reactive({ name:'kebi' }) return { ...t
阅读全文
摘要：优势： 1、可以做出各种各样营销活动页，通过链接跳转，不占小程序包的大小（简直福音） 2、内嵌H5可以及时上传服务器更新，绕过小程序漫长的审核 3、自动铺满屏幕，其他标签会被覆盖哟 缺点： 1、不支持支付、不支持消息推送（H5的交互行为不算在微信体系内） 注意： 1、内嵌H5域名必须要配置的合法域名
阅读全文
摘要：vue3中引入 hooks 概念， hooks 本质是一个函数，是对 setup 中使用的 composition API的封装 hooks 复用率高，使setup中逻辑更清晰 例子： 新建一个 hook 函数组件 usePoint.js 页面中调用
阅读全文
摘要：在我看来 watchEffect 是 watch的升级版 1、watchEffect 不指明那个属性，谁调用，就监测谁（watch 需要指明那个属性） 2、watchEffect 和计算属性computed有点像， 但是computed需要return返回 而watchEffect不需要return
阅读全文
摘要：总体来说vue3的watch属性和vue2差不多，但是也有几个不同点 1、需要从vue中引入 2、vue3中的watch属性不能监测到响应式数据 reactive 对象，否则获取不到属性旧值（深度监测deep设置无效） watch能监测ref响应式数据，且能返回新旧值 3、vue3中watch可以监
阅读全文
摘要：reactive 定义数据响应式 1、实现：基于ES6的 proxy 实现 2、参数：接收一个 对象 或者 数组 3、优点：能对深层次数据进行处理 能直接修改数组 能直接把对象属性进行新增、修改、删除（Object.defineProPerty 需要遍历对象的每一个属性，然后再去操作） 对比 ref
阅读全文
摘要：vue2 中的 ref 获取一个 dom 元素和实例对象 vue3 中 ref 是用来定义数据响应式 特别注意：ref 可以接收基本数据类型，也可以是对象类型 1、基本数据类型：基本数据类型 ref 的处理方式还是 Object.defineProPerty() 的get()和set() 完成 2、
阅读全文
摘要：vue3和vue2不同的地方就是不必写 data、methods、等代码块了 所有的东西都可以在 setup 中返回 setup 可以返回两种值： 1、返回对象，对象中的属性、方法都可以直接在模板中使用 2、返回渲染函数，可以自定义渲染内容（其实也就是 render 函数）注意：渲染函数优先级还高，
阅读全文
摘要：一、总体性能 官方给出量化数据为： 1、打包大小减少41% 2、初次渲染快 55%，更新渲染快133% 3、内存减少54% 二、源码升级 1、使用 proxy 来代替 definProperty 实现响应式 2、重写虚拟DOM 3、Tree-Shaking （树摇） 三、拥抱 typescript
阅读全文
摘要：vue 指令分为 内置指令 和 自定义指令 一、自定义指令 （顾名思义：自己封装的指令） 首先指令声明 directive(全局)，directives（局部） 1、全局自定义指令 main.js 全局注册 2、局部自定义指令 同一文件内如 index.vue 函数式： 对象式：对象式里包含 bin
阅读全文
摘要：一、事件修饰符 1、.stop 阻止事件冒泡 原生JS里面阻止事件冒泡 event.stopPropagation() 在 vue 里面直接可以写在 事件之后 @click.stop = 'submit' 2、.prevent 阻止默认事件 （如a标签默认跳转行为） 原生JS阻止默认事件 event
阅读全文
