- 博客(24)
- 收藏
- 关注
原创 浏览器语音合成对象speechSynthesis和SpeechSynthesisUtterance实现语音播放
浏览器语音合成对象实现语音播放,speechSynthesis,speechSynthesis
2023-09-02 18:27:17
3974
原创 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关注的人