Vue3
李思岐
密云不雨,自我西郊
展开
-
vue3 组件规划方案
模板可以复用。模板通常伴随着业务。如果当前页面代码量过多,出现巨型组件。最好按块去拆下。目的是减少当前组件的代码行数,但是作为代价,需要多次设计组件的通信和多出 props(不提 emit 时间,是因为 props和 emit 是对等的。可以:on-click 传递一个回调函数,跟 react 那样,在子组件里调用父组件传进来的回调函数)业务逻辑业务逻辑可以借用 setup,将逻辑进行组合。把单独的逻辑放进单独的文件里组成逻辑的各个功能功能可以在上一步的业务逻辑文件里去实现对于可复用的逻原创 2021-11-23 10:48:04 · 750 阅读 · 0 评论 -
vue2 迁移至 vue3
迁移vue3 单文件组件的 style scoped 可以包含全局规则或者只针对插槽内容的规则<van-button>按钮</van-button>:deep(.van-button__text) { color: red !important;}非兼容的变更Vue.use -> app.use 更好的 treeShakingthis.$nextTick -> nextTick(() => {})删除keyCode 修饰符$on,原创 2020-12-29 18:17:31 · 1231 阅读 · 0 评论 -
工具
工具单元测试使用 vue-cli 官方推荐的 unit-jest 插件vue add unit-jesttypesript使用 vue-cli 添加vue add typescript单文件组件中的 script lang 设置为 ts<script lang="ts"> ...</script>定义 vue 组件使用 defineComponent 提供更好的 typescript 支持...原创 2020-12-29 17:38:46 · 67 阅读 · 0 评论 -
vue3 文档总结 -高阶指南-组合式 API
组合式 API什么是 composition API?将业务的逻辑关注点从不同 options,迁移到了同一个 option - setup组件具有更好的聚合性。同时组件很大时,也能减少组件维护的心智负担组合式 API 实际使用的地方在 setup 中。setup 中没有 this.除了 props 之外,无法访问组件声明的任何属性-本地状态、计算属性或者方法setup 接受 props 和 context 参数setupprops 参数setup 接受第一个参数是 props。这个原创 2020-12-29 13:26:33 · 1045 阅读 · 0 评论 -
Vue3 文档总结 - 高阶指南 - 响应性
高阶指南响应式状态reactive: 深层转化-用于转化对象,data 选项中返回的对象ref 创建一个独立的响应式对象,通过 value 属性访问其内部值ref 在模板中使用时,将会自动展开为原始值当 ref 存在于 reactive 参数对象中时,自动展开为原始值。reactive 的参数一定得是一个原始对象。不能是数组,或者 map 这种集合类型 setup() { const myRef = ref(0) const myReactive = reactive({my原创 2020-12-27 23:16:02 · 543 阅读 · 0 评论 -
vue3 文档总结-可复用性&&组合
自定义指令用于对 DOM 进行底层操作vue3 自定义指令的周期变为自定义指令周期beforeMount 在挂载之前调用,可以进行初始化配置mounted: 挂载到父组件的时候调用beforeUpdate: 更新包含此组件的 VNode 值钱调用updated: 在更新之后调用beforeUnmount: 在卸载之前调用unmounted: 当指令与元素解除绑定且父组件已卸载时调用每一个周期都接受 el, binding 参数自定义指令参数el: 可用于直接操作 domb原创 2020-12-26 12:26:34 · 338 阅读 · 1 评论 -
vue3 文档总结 -过渡&&动画
过渡&&动画描述动画的实现不仅仅可以通过 margin,或者设置 top 来实现。还可以通过 transform,perspective 等来实现。我们希望尽可能对元素动画进行硬件加速。并且使用不触发重绘的 property。我们可以通过工具,如 CSS Triggers[https://csstriggers.com/]来查看哪些属性在动画时会触发重绘opacity, transform 不会触发任何几何形状的变化或者绘制。是在 web 上做元素移动的理想选择注入 perspe原创 2020-12-25 19:07:34 · 2460 阅读 · 0 评论 -
vue3 文档总结 -深入组件
组件注册组件注册的方法从 Vue.component 迁移到了 Vue.definedComponentProps当向子组件传递一个非字符串类型的参数时,即使这个参数是静态的,也要通过:props。否则传入的参数将会被当做静态字符串处理。对于字符串则可以直接传入单向数据流prop 只能从父传递到子。每次父组件发生变更的时候,子组件中所有的 prop 都将会刷新称为最新的值。如果想将这个数据当做本地的数据来使用:定义一个本地的数据作为其初始值props: ['initProps']setu原创 2020-12-20 22:39:12 · 12217 阅读 · 1 评论 -
vue3 文档总结 - 基础部分
应用 && 组件实例每一个 Vue 应用都是通过 createApp 函数创建一个新的应用实例开始的const app = Vue.createApp({ /* 选项 */ })防抖和节流Vue 内部没有做防抖和节流,但可以使用 Lodash 等库来实现计算属性的 setter计算属性默认只有 setter,不过在需要时你也可以提供一个 settercomputed: { fullName: { // getter get() { retur原创 2020-12-20 15:34:32 · 1690 阅读 · 1 评论