JY BLOG
  • Home
  • Archives
  • Categories
  • Tags
  • About
  •   
  •   

7.Hook Event

Hook Event什么是 Hook EventHook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。 原理callHookVue 的生命周期函数是通过一个叫 callHook 的方法来执行的 1234567891011121314151617181920212223242526272829/** * callHook(vm, &#x2
2022-10-25
Vue > Vue源码解读

6.实例方法

入口文件/src/core/instance/index.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344import { initMixin, ... } from './init'// Vue 的构造
2022-10-25
Vue > Vue源码解读

5.全局API

入口文件/src/core/global-api/index.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172/** * 初始化 V
2022-10-24
Vue > Vue源码解读

4.异步更新

dep.notify()1234567891011/** * 通知 dep 中的所有 watcher,执行 watcher.update() 方法 */notify () { // stabilize the subscriber list first const subs = this.subs.slice() // 遍历 dep 中存储的 watcher,执行 watcher.
2022-10-23
Vue > Vue源码解读

pnpm的优势

npm2npm2 的 node_modules 是嵌套的,包自己的依赖就在包自己的 node_modules 中。 两个问题: 1.如果多个包之间有公共依赖,那这个依赖就会复制很多次,多次占用空间。 2.windows 的文件路径最长是 260 多个字符,这样嵌套是会超过 windows 路径的长度限制的。 yarn所有的依赖不再一层层嵌套了,而是全部在同一层,这样也就没有依赖重复多次的问题了,
2022-10-23
包管理工具

3.响应式原理

vue 在初始化时会调用 initState(vm) 使当前 vue 实例具有响应式 initState/src/core/instance/state.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/** * 两件事: *
2022-10-21
Vue > Vue源码解读

2.Vue初始化过程

Vue/src/core/instance/index.js 123456789101112import { initMixin } from './init'// Vue 构造函数function Vue (options) { // 调用 Vue.prototype._init 方法,该方法是在 ini
2022-10-21
Vue > Vue源码解读

1.如何调试源码

记录一下步骤 下载源码 https://github.com/vuejs/vue/tree/dev 安装依赖 使用 npm 会报错,使用 yarn 不会 12npm i -g yarnyarn install 添加 sourcemap package.json 中添加 –sourcemap 12345{ "scripts": { &quo
2022-10-20
Vue > Vue源码解读

nextTick

nextTick作用nextTick 接收一个回调函数作为参数,并将这个回调函数延迟到DOM更新后才执行; 使用场景:想要操作 基于最新数据生成的DOM 时,就将这个操作放在 nextTick 的回调中; 为什么需要nextTick因为 vue 采用的异步更新策略,当监听到数据发生变化的时候不会立即去更新DOM,而是开启一个任务队列,并缓存在同一事件循环中发生的所有数据变更。 这种做法带来的好处就
2022-10-19
Vue > Vue源码解读

DOM事件级别

DOM 事件级别DOM 级别:0 1 2 3 DOM 事件级别:0 2 3 DOM1 标准并没有定义事件相关的内容 DOM0绑定事件 1234<button type="button" onclick="showFn()"></button>function showFn() &#123; alert(&#x27;Hello W
2022-10-16
JS > DOM
1…34567…9

Search

Hexo Fluid