Ljwen_-优快云博客

1、refref接受一个内部值并返回一个响应式且可变的 ref 对象，ref 对象仅有一个 .value 属性，指向该内部值；<script setup> const refValue = ref('refValue') console.log(refValue) // ref 对象 console.log(refValue.value) // refValue</script>ref声明的变量，我们可以在 html代码中直接使用变量，但在 js

2022-05-26 16:51:29 1445

原创 Vue SSR 学习

简单实现 Vue SSR

2022-05-21 22:59:32 1341

原创 Vue 源码之 mixin 原理

mixin的意思是混入，是指将事先配置的选项混入到组件中，然后与组件中的对象和方法进行合并，也就是对组件进行了扩展，也可以理解为是将一段重复的代码进行抽离，然后通过混入的形式达到复用的效果，它有两种混入形式，分别是 Vue.mixin({})全局注册和组件的 mixins选项，那么在 Vue 中，他们是怎么进行合并，具体实现是怎么样呢，这篇文章将进行讲解，相信你一定会有所收获；首先是入口文件，在全局 api 的初始化文件中，通过调用 initMixin进行注册：// src/core/global-ap

2022-05-18 16:52:02 1640

原创 Vue 源码学习之渲染原理

在前面的模板编译学习笔记中，我们知道 $mount会将模板编译生成 render函数，然后调用 mount.call(this, el, hydrating)；// src/platforms/web/entry-runtime-with-compiler.jsconst mount = Vue.prototype.$mount// 重新定义 $mountVue.prototype.$mount = function ( el?: string | Element, hydratin

2022-05-16 16:17:12 325

原创 Vue 源码学习之模板编译

编译入口// src/core/instance/init.jsexport function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // ... 其他代码 if (vm.$options.el) { vm.$mount(v

2022-05-15 20:55:37 361

原创 Vue 源码学习之异步更新 nextTick

从平常的开发中，我们可以得知 Vue 更新 DOM 是异步执行的，也就是当数据发生变化时，Vue 内部会开启一个异步更新队列，将更新的数据推入队列，待队列中所有数据变化完成之后，视图再统一进行更新；在前面的学习中，我们知道 Watcher类在执行 update时，会调用 queueWatcher，它的作用就是 watcher更新时将他们缓存起来，之后数据完成更新之后再一起调用，为什么要这么做呢？试想一下，每次改变数据都会触发相应的 watcher更新，这也意味着每改变一次就渲染一次，这样会很耗费性能，不是

2022-05-13 15:43:57 321

原创 Vue 源码学习之计算属性

前面讲了依赖收集和侦听属性，在 Watcher类里面还有一些属性和方法是计算属性的时候使用，计算属性是依赖其他的值来进行计算，它的特性是依赖的值如果没有变化，则页面更新的时候不会重新计算，它的计算结果会被缓存下来，达到一定的性能优化；在 initState里面会执行 initComputed，对 computed属性进行初始化：// src/core/instance/state.jsconst computedWatcherOptions = { lazy: true }function init

2022-05-12 16:10:23 368

原创 Vue 源码学习之依赖收集和侦听属性

上个学习笔记讲到 Vue 的响应式数据原理，我们知道 vue 通过 Object.defineProperty对数据进行 get和 set来完成数据的响应式，而从源码中我们得知，每个对象进行响应式处理时会有各自的 dep实例，在 get的时候，会调用 dep.depend来收集依赖，在 set的时候执行 dep.notify来更新依赖，这期学习笔记将介绍收集依赖的主要过程；一、依赖收集我们可以先看看 Dep 的主要内容// src/core/observer/dep.jsexport default

2022-05-11 15:57:14 440

原创 Vue 源码学习之数据响应式

我们都知道 Vue 的一个核心特点是数据驱动，Vue 的内部实现了一个机制，该机制能监听到数据的变化然后触发更新，本文主要是对 Vue 的数据响应式进行一个介绍，同时也是笔者学习源码的一个笔记，如有错误的地方，欢迎评论区进行指正。我们都知道 Vue2 是采用 Object.defineProperty来实现数据的监听，具体怎么实现我们可以往下看；一、入口文件我们可以从源码中得知实例化一个 Vue 时，需要传入一个 options，这个 options就是我们 new Vue()时传入的一个对象，实例化

2022-05-10 15:32:12 451

原创 Vue 源码学习之 diff 算法

Vue 的 diff 算法学习diff 算法是一种同层的树节点进行比较的高效算法，有两个特点：只比较同层级的节点，不会跨层级比较；diff 比较过程中，循环从两边向中间靠拢；原理分析当数据发生变化时，set会调用 dep.notify通知所有的 watcher，订阅者会调用 patch给真实 DOM 打补丁，更新相应的视图；patch 函数：oldVnode 和 vnode 分别代表旧节点和新节点，主要做了四个判断：没有新节点，则直接调用 destory 销毁节点；没有旧节点，代表新建

2022-05-09 15:50:19 506

Ljwen_的博客

原创 clip-path + background-clip 绘制一个图片文字重叠的效果

原创 webpack 打包构建优化实践

原创浏览器语音合成对象speechSynthesis和SpeechSynthesisUtterance实现语音播放

原创 Tif 格式转 JPG、PNG

原创自定义指令实现大屏数字滚动效果

原创 Vue3 中 echarts 不显示 tooltip 的问题

原创实现在线预览 pdf 以及添加水印

原创 Vue2 和 Vue3 过滤器的使用

原创 base64 编码和解码

原创在 Vue3 中使用 Vuex

原创配置 cnpm 及可能出现的问题

原创 Vuex3.x 源码学习

原创 Vue2--v-model 的语法糖

原创 React -- useState 的使用及注意事项

原创 Vue3 中路由的使用

原创 Vue3 新特性之响应式 API