高级前端-Vue源码分析

news/2024/7/19 13:28:21 标签: js, javascript, 高级前端

1. Vue的响应式原理

javascript">let nextTick = (cb) => Promise.resolve().then(cb)
let flushJobs = []
function queueJob(dep) {
    flushJobs.push(dep)
    // 微任务,最后执行,真正执行数据操作函数
    nextTick(flushJobs)
}
function flushJobs(job) {
    // 拿出队列中的所有job,从第一个开始往后执行
    job.update()
}

Class Dep {
    deps = new Set()
    depend() {
        this.deps.add(window.target) // window.target就是当前数据的一个watcher
    },
    notify() {
        this.deps.forEach(dep => {
            dep()
            // queueJob(dep) 通知更新的时候,把所有依赖(watcher)放入到更新队列
        })
    }
}

let ref = initValue => {
let value = initValue
let dep = new Dep
Object.defineProperty({}, 'prop', {
    set: (newValue) => {
        this.value = newValue
        dep.notify()
    },
    get: () => {
        return this.value
        dep.depend()
    }
})
}

2. Vue异步更新原理

为了解决每次修改一个数据,都要重新渲染页面影响性能的一种解决方案

3. nextTick

4. Virtual Dom (js虚拟的dom,是个js对象,为了更好的操作html的dom对象)

5. Diff算法 (通过diff算法,最精力度的找到需要修改的dom节点,首先层级对比,然后组件类型对比,一个列表比对的时候通过key,可以更快的找到dom)

6. Object.defineProperty的局限性,不能监听到添加和删除新属性的变化,所以vue3.0提供了proxy

7. Vue3.0 提供了composition API

8. Computed和watch的源码分析


http://www.niftyadmin.cn/n/861115.html

相关文章

高级前端-vue的主流插件

1. Vuex Mutations是修改数据的唯一方法 2. Vue Router hash history

高级前端-Babel

Babel是什么?是个编译器,把高版本js代码变成低版本js代码 编译过程,把原代码通过词法分析变成一个个token,举例:ab则拆成了a,,b三个token 语法分析器把这些token根据对应的语法生成抽象语法🌲 语义分析器…

高级前端-webpack

什么是webpack:webpack is a module bundler Tapable是webpack的底层依赖 loader让webpack可以处理除了js和json文件以外的别的类型的文件 module.rules.{use: , test: } 目前用的是chainWebpack可以链式调用loader和plugin,并且可以修改对应loader或者插…

高级前端-axios

Axios源码分析 简单源码实现参考:https://jframesea.coding.net/public/interview/Interview/git/files/master/javascript/axios.js 请求API化 1. api不要出现在视图层,不然的话修改起来会很麻烦 2. 建立一个api目录,然后根据业务模块划分ap…

高级前端-页面性能优化

JS和CSS的压缩与混乱 1. 无效字符删除 2. 剔除注释 3. 代码语义缩减和优化 4. 代码优化(代码不易看懂) 图片相关优化 雪碧图svg > webp > png > jpg图片压缩inline-image浏览器对同一个域名的并发加载数量有限制,所以通常静态资源需…

POST请求数据过大,nginx服务器报500的问题

参考:https://blog.csdn.net/feifeixiang2835/article/details/84964036 把对应nginx里面的client_body_buffer_size值调大即可

vscode + js 跨文件go to definition

You need to create a jsconfig.json file at the root of your project. {"compilerOptions": {"target": "ES6"},"exclude": ["node_modules","**/node_modules/*"] }

axios封装 防止重复请求

// 正在进行中的请求列表 let reqList []/*** 阻止重复请求* param {array} reqList - 请求缓存列表* param {string} url - 当前请求地址* param {function} cancel - 请求中断函数* param {string} errorMessage - 请求中断时需要显示的错误信息*/ const stopRepeatRequest …