vue
文章平均质量分 77
勤学daydayup
good good study, day day up
展开
-
极简系列---vue3.x表单组件form
本文从零开始实现一个自定义的vue3.x表单组件ti-form,组件使用体验类似element-ui。完整代码地址:https://github.com/littleluckly/vue3.x-components-study实现过程涉及到的知识点setup函数,用法参考:https://v3.cn.vuejs.org/guide/composition-api-setup.htmltoRefsrefreactivev-model事件订阅派发,采用第三方库mitt,用法参考https:/原创 2021-08-01 16:17:21 · 1945 阅读 · 0 评论 -
极简系列---vue3.x消息组件message
极简系列—vue3.x消息组件messageVue2.x消息组件参考另一篇:https://blog.csdn.net/hncu1990/article/details/119153572全局API与vue2.x变化变更前变更后Vue.extend(组件选项)Vue.createApp(组件选项)Vue.prototypeconfig.globalProperties,如const app = createApp({}) app.config.globalProper原创 2021-07-31 11:53:38 · 2087 阅读 · 0 评论 -
极简系列---vue2.x消息组件message
实现一个小小目标---极简版的messge消息组件- 支持多种调用方式 1. 组件内`this.$message`方式调用 2. 在`.js`文件中作为一个函数独立使用- 支持手动关闭message原创 2021-07-27 21:19:14 · 2784 阅读 · 0 评论 -
极简系列---vue2.x表单组件form
文章目录my-form框架my-form-item框架my-form-item组件校验my-form组件校验broadcast事件广播my-input组件dispatch事件派发毛坯房验收本文从零开始实现一个自定义的vue2.x表单组件my-form,组件使用体验类似element-ui实现过程涉及到的知识点自定义事件事件的广播与派发v-mode语法糖原理$attrs,参考https://cn.vuejs.org/v2/api/#vm-attrsprovide/inject传递数据,参考原创 2021-07-26 23:27:23 · 793 阅读 · 0 评论 -
Vue3响应式原理Proxy
Vue3响应式原理–ProxyVue3的响应式主要是基于ES6的新特性Proxy实现,Vue2的响应式可以参看我的另一篇文章极简系列—vue 响应式实现(2.x)对比Vue响应式原理相比于Proxy,Vue2的响应式实现具有如下缺陷:性能不好,需要递归处理嵌套对象,特别是处理大数据尤为明显对新添加的属性不支持,需要提供额外的方法如Vue.$set对数组支持行不好,数组的响应式通过覆盖数组的原型方法实现Vue3响应式处理Vue3响应式处理主要用到了ES6的Proxy,ReflectV原创 2021-07-20 22:17:53 · 294 阅读 · 0 评论 -
极简系列---vue 响应式实现(2.x)
用过vue的同学想必都知道它是基于Object.defineProperty实现的响应式,那么具体是怎么做到呢,下面我将用不到一百行代码逐步拆解响应式原理关于defineProperty可参考MDN拦截对象属性的存储行为新建一个文件my-vue.js,在内部定义一个方法defineReactive,在方法内通过Object.defineProperty拦截对象属性的操作// my-vue.jsfunction defineReactive(obj, key) { let value = o.原创 2021-07-17 15:28:26 · 140 阅读 · 0 评论