养肥胖虎

摘要： 好家伙, 0.完整代码已开源 https://github.com/Fattiger4399/analytic-vue.git 1.思路 1.1.什么是组件化? Vue 组件化是指将复杂的应用程序拆分成多个独立的、可复用的组件，这些组件可以实现特定的功能或局部功能。组件化有助于提高开发效率、方便重复 阅读全文

摘要： 好家伙，本章我们尝试实现computed属性 0.完整代码已开源 https://github.com/Fattiger4399/analytic-vue.git 1.分析 1.1computed的常见使用方法 1. 计算依赖数据：当某个数据发生变化时，computed属性可以自动更新，并返回计算结 阅读全文

摘要： 好家伙， 0.代码已开源 Fattiger4399/lowcode-demo: 一个简单的低代码编辑器 技术栈:Vue3 element-plus jsx (github.com) 本篇实现效果如下： 1.分析 这玩意的思路很好理解 本质上就是给组件绑个拖拽方法 拽到哪里，就把位置更新给组件就好了， 阅读全文

摘要： 好家伙, 0.代码已开源 Fattiger4399/lowcode-demo: 一个简单的低代码编辑器 技术栈:Vue3 element-plus jsx (github.com) 该章实现的效果:组件从物料区到画布的拖拽 1.分析 先来分析,鼠标点击物料区的某个组件,再将其拖拽到画布这个过程 我们 阅读全文

摘要： 好家伙, 项目目录如下: 该项目使用Vue3, Element-plus 效果图如下: 开搞: 1.写出简单界面 App.vue <template> <div class="app"> <Editor v-model="state"></Editor> </div> </template> <sc 阅读全文

摘要： 好家伙，这是diff的最后一节了 0.暴力比对的使用场景 没有可复用的节点：当新旧虚拟 DOM 的结构完全不同，或者某个节点不能被复用时，需要通过暴力比对来创建新的节点，并在真实 DOM 上进行相应的插入操作。 0.1.例子一： // 创建vnode let vm1 = new Vue({ data 阅读全文

摘要： 好家伙, 本节来解决我们上一章留下来的问题, 新旧节点同时有儿子的情况本章继续解决 1.要做什么? 本章将解决, 1.在相同tag下子元素的替换问题 2.使用双指针进行元素替换, 实现效果如下: let vm1 = new Vue({data:{name:'张三'}}) let render1 = 阅读全文

摘要： 好家伙， 本篇将会解释要以下效果的实现 1.目标 我们要实现以下元素替换的效果 gif: 以上例子的代码: //创建vnode let vm1 = new Vue({data:{name:'张三'}}) let render1 = compileToFunction(`<a>{{name}}</a> 阅读全文

摘要： 好家伙， 代码出了点bug,暂时只能实现这两种形式 完整代码已开源https://github.com/Fattiger4399/analytic-vue.git Vue:watch的多种使用方法 watch有非常多种使用方式,我们要对其进行分类讨论处理 1.初始化: //initState.js 阅读全文

摘要： 好家伙, 补了一下watch的多种用法 1.属性: 方法(最常用) 使用最广泛的方式是将watch选项设置为一个对象，对象的属性是要观测的数据属性，值是一个回调函数，该回调函数会在属性变化时触发。例如： watch: { firstName: function(newVal, oldVal) { c 阅读全文