- 博客(24)
- 收藏
- 关注
RSS订阅原创 浏览器语音合成对象speechSynthesis和SpeechSynthesisUtterance实现语音播放
浏览器语音合成对象实现语音播放，speechSynthesis，speechSynthesis
2023-09-02 18:27:17
3974
2原创 Vue3 新特性之响应式 API
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
1370
原创 Vue 源码之 mixin 原理
mixin的意思是混入，是指将事先配置的选项混入到组件中，然后与组件中的对象和方法进行合并，也就是对组件进行了扩展，也可以理解为是将一段重复的代码进行抽离，然后通过混入的形式达到复用的效果，它有两种混入形式，分别是 Vue.mixin({})全局注册和组件的 mixins选项，那么在 Vue 中，他们是怎么进行合并，具体实现是怎么样呢，这篇文章将进行讲解，相信你一定会有所收获；首先是入口文件，在全局 api 的初始化文件中，通过调用 initMixin进行注册：// src/core/global-ap
2022-05-18 16:52:02
1578
原创 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
287
原创 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
329
原创 Vue 源码学习之异步更新 nextTick
从平常的开发中，我们可以得知 Vue 更新 DOM 是异步执行的，也就是当数据发生变化时，Vue 内部会开启一个异步更新队列，将更新的数据推入队列，待队列中所有数据变化完成之后，视图再统一进行更新；在前面的学习中，我们知道 Watcher类在执行 update时，会调用 queueWatcher，它的作用就是 watcher更新时将他们缓存起来，之后数据完成更新之后再一起调用，为什么要这么做呢？试想一下，每次改变数据都会触发相应的 watcher更新，这也意味着每改变一次就渲染一次，这样会很耗费性能，不是
2022-05-13 15:43:57
280
原创 Vue 源码学习之计算属性
前面讲了依赖收集和侦听属性，在 Watcher类里面还有一些属性和方法是计算属性的时候使用，计算属性是依赖其他的值来进行计算，它的特性是依赖的值如果没有变化，则页面更新的时候不会重新计算，它的计算结果会被缓存下来，达到一定的性能优化；在 initState里面会执行 initComputed，对 computed属性进行初始化：// src/core/instance/state.jsconst computedWatcherOptions = { lazy: true }function init
2022-05-12 16:10:23
339
原创 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
408
原创 Vue 源码学习之数据响应式
我们都知道 Vue 的一个核心特点是数据驱动，Vue 的内部实现了一个机制，该机制能监听到数据的变化然后触发更新，本文主要是对 Vue 的数据响应式进行一个介绍，同时也是笔者学习源码的一个笔记，如有错误的地方，欢迎评论区进行指正。我们都知道 Vue2 是采用 Object.defineProperty来实现数据的监听，具体怎么实现我们可以往下看；一、入口文件我们可以从源码中得知实例化一个 Vue 时，需要传入一个 options，这个 options就是我们 new Vue()时传入的一个对象，实例化
2022-05-10 15:32:12
434
原创 Vue 源码学习之 diff 算法
Vue 的 diff 算法学习diff 算法是一种同层的树节点进行比较的高效算法，有两个特点：只比较同层级的节点，不会跨层级比较；diff 比较过程中，循环从两边向中间靠拢；原理分析当数据发生变化时，set会调用 dep.notify通知所有的 watcher，订阅者会调用 patch给真实 DOM 打补丁，更新相应的视图；patch 函数：oldVnode 和 vnode 分别代表旧节点和新节点，主要做了四个判断：没有新节点，则直接调用 destory 销毁节点；没有旧节点，代表新建
2022-05-09 15:50:19
454
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人