Part 3 · Vue.js 框架源码与进阶
关注
分享
扫一扫
vue 深度解析
没有什么时间是比现在合适的
欲穷千里目，更上一层楼。
展开
-
3-4-01-搭建自己的 Server Side Render
搭建自己的 SSRVue 实例的服务端渲染使用 vue-server-renderer 插件完成 vue 实例的服务端渲染使用 express 创建一个 node 服务器fs 模块读取 html 模板const Vue = require('vue')const express = require('express')const fs = require('fs')const renderer = require('vue-server-renderer').createRendere原创 2020-11-24 20:41:31 · 393 阅读 · 0 评论 -
3-3-07-nuxtjs案例realworld-nuxtjs
realworld-nuxtjs项目地址：https://gitee.com/dingxd9702/realworld-nuxtjs创建项目mkdir realworld-nuxtjsyarn init -yyarn add nuxt配置启动脚本创建pages目录，配置初始页面导入页面模板导入样式资源首先根目录下创建 app.html 定制 Nuxt.js 默认的应用模板，并通过 link 标签将样式资源引入。默认模板：<!DOCTYPE html><html原创 2020-11-24 20:27:59 · 462 阅读 · 0 评论 -
3-3-06-Nuxt.js 基本介绍
Nuxt.js 介绍Nuxt.js 是一个基于 Vue.js 生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用 Vue.js 技术栈构建同构应用Nuxt.js 的使用方式初始项目已有的 Node.js 服务端项目直接把 Nuxt 当作一个中间件集成到 Node WebServer 中现有的 Vue.js 项目非常熟悉 Nuxt.js至少百分之10 的代码改动Nuxt.js 异步数据——asyncData 方法基本用法它会将 asyncData 返回的数据原创 2020-11-24 20:24:14 · 200 阅读 · 0 评论 -
3-3-05-服务端渲染概述
服务端渲染概述spa 的优缺点优点：用户体验好，开发效率高，渲染性能好，可维护性好缺点：首屏渲染时间过长，与传统服务端渲染直接获取服务端渲染好的 html 不同，spa 使用 js 在客户端生成 html 来呈现网页内容，用户需要等待客户端 js 解析执行完才能够看到页面，这样就使得首屏加载时间过长影响用户体验。不利于 SEO，当搜索引擎爬取网站 html 文件的时候单页面的 html 是没有内容的，因为他需要通过客户端 js 解析执行完才能够生成完 html 内容，所以目前的主流的搜索引擎堆这原创 2020-11-24 20:22:51 · 175 阅读 · 0 评论 -
3-3-04-Vuex基本实现
Vuex 基本结构Vuex 是 Vue 的一个插件，需要使用 Vue.use 调用。Vue 的插件是一个函数或者是一个对象包含 install 方法，Vue.use 的作用就是去执行这个函数或者 install 方法给 Vue 实例添加这个插件。所以 Vuex 是一个包含 install 方法的对象。另外，Vuex 还会通过 new Vuex.store 的方式实例一个仓库，所以，Vuex 插件这个对象除了 install 方法之外应该还包含一个 store 构造函数或者类。所以 Vuex 的基本结构原创 2020-11-24 20:22:16 · 111 阅读 · 0 评论 -
3-3-03-Vuex 插件
Vuex 插件在学习购物车案例的时候，需要将购物车的信息存储到本地存储 localStorage 中，这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次，所以如果 mutations 太多，这种方法就显得不是很合理，所以这里可以使用 Vuex 中的插件去实现，这样会显得更加合理一些。Vuex 的插件就是一个函数。这个函数接收一个 store 的参数。在这个函数里面，我们可以定义一个函数，让它在所有的 mutations 执行结束之后再去执行。import Vue f原创 2020-10-26 09:51:59 · 133 阅读 · 0 评论 -
3-3-02-Vuex
Vuex概念什么是 VuexVuex 是专门为 Vue.js 设计的状态管理库Vuex 采用集中式的方式存储需要共享的状态Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享Vuex 继承到了 devtools 中，提供了 time-traval 时光旅行历史回滚功能。什么情况下使用 Vuex非必要的情况不要使用 Vuex大型的单页应用程序多个视图依赖于同一状态来自不同视图的行为需要变更同一状态核心概念、store每一个 Vuex 应用的核心就是 sto原创 2020-10-26 09:51:28 · 125 阅读 · 0 评论 -
3-3-01-Vue.js 组件状态管理
Vue.js 组件状态管理Vue 中最核心的两个功能分别是数据驱动和组件化。组件化可以提高开发效率和代码的可维护性。new Vue({ // state data () { return { count: 0 } }, //view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.c原创 2020-10-26 09:50:57 · 241 阅读 · 0 评论 -
3-2-27-Vue.js 源码阅读-模板编译-过程
Vue 模板编译-过程编译的入口文件是 src/compiler/create-compiler.js 中的 createCompilerCreator 生成的方法 complieToFunctions 。下面就简单介绍一下编译的过程吧。用于生成 render 函数的方法 compileToFunctions 是通过调用方法 createCompileToFunctionFn 生成的。export function createCompileToFunctionFn (compile: Funct原创 2020-10-26 09:46:43 · 196 阅读 · 1 评论 -
3-2-26-Vue.js 源码阅读-模板编译-概述
Vue 模板编译-概述模板编译的作用？Vue2.0 使用 vnode 描述视图以及各种交互，用户自己编写 vnode 比较复杂模板编译可以让用户只需要编写类似 HTML 的代码 - Vue.js 模板，通过编译器将模板转换为返回 vnode 的 render 函数.vue 文件会被 webpack 在构建的过程中转换为 render 函数运行时编译的前提必须是使用完整版的 Vue，它会再运行时把模板转换成 render 函数。因为多了编译器的代码，使得 Vue 的体积变大，运行的速度也原创 2020-10-26 09:45:27 · 211 阅读 · 1 评论 -
3-2-25-Vue.js 源码阅读-key
Vue 中的虚拟 DOM - keyhttps://blog.csdn.net/weixin_42695446/article/details/84680213原创 2020-10-26 09:44:54 · 137 阅读 · 0 评论 -
3-2-24-Vue.js 源码阅读-patch
Vue 中的虚拟 DOM - updateVue 中的 update 最终更新视图调用的方法是通过高阶函数 createPatchFunction 创建的一个 patch 函数，下面分析 patch 函数的执行过程。// 函数柯里化，让一个函数返回一个函数// createPatchFunction({ nodeOps, modules })传入平台相关的两个参数// core 中的 createPatchFunction (backend), const { modules, nodeOps }原创 2020-10-26 09:44:00 · 142 阅读 · 0 评论 -
3-2-23-Vue.js 源码阅读-update
Vue 中的虚拟 DOM - update通过上面的介绍知道了 vnode 的创建过程，下面分析 update 这个函数是如何将 vnode 转换成虚拟 DOM 的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DOM // _update 将生成的虚拟 DOM 转换成真实 DOM vm._upd原创 2020-10-26 09:43:14 · 135 阅读 · 0 评论 -
3-2-22-Vue.js 源码阅读-VNode的创建过程
Vue 中的虚拟 DOM - VNode 的创建过程通过前面 Vue 初始化过程的分析知道，Vue 的虚拟 DOM 的生成实在 lifecycle.js 中的 mountComponent 这个方法中定义的 updateComponent 这个方法完成的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DO原创 2020-10-26 09:40:23 · 188 阅读 · 1 评论 -
3-2-21-Vue.js 源码阅读-虚拟 DOM
Vue 中的虚拟 DOM什么是虚拟 DOM？虚拟 DOM 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制。为什么要使用虚拟 DOM ？避免直接操作 DOM，提高开发效率（因为不需要操作 DOM 不需要关心操作 DOM 的浏览器兼容问题）作为中间层可以跨平台（除了在 web 端使用外，还支持服务端渲染）虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视原创 2020-10-26 09:39:48 · 130 阅读 · 0 评论 -
3-2-20-Vue.js 源码阅读-nextTick
Vue 中的 vm.$nextTick 方法vm.$nextTick( [callback] )参数：{Function} [callback]返回值：{Function} unwatch用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。注意：2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Pro原创 2020-08-12 10:47:46 · 121 阅读 · 0 评论 -
3-2-19-Vue.js 源码阅读-watch
Vue 中的 vm.$watch 方法vm.$watch( expOrFn, callback, [options] )参数：{string | Function} expOrFn{Function | Object} callback{Object} [options]{boolean} deep{boolean} immediate返回值：{Function} unwatch用法：观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新原创 2020-08-11 17:47:05 · 167 阅读 · 0 评论 -
3-2-18-Vue.js 源码阅读-delete
Vue 中的 vm.$delete 方法Vue.delete( target, propertyName/index )参数：{Object | Array} target{string | number} propertyName/index仅在 2.2.0+ 版本中支持 Array + index 用法。用法：删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它原创 2020-08-11 17:46:34 · 174 阅读 · 0 评论 -
3-2-17-Vue.js 源码阅读-set
Vue 中的 $.set 方法Vue.set( target, propertyName/index, value )参数：{Object | Array} target{string | number} propertyName/index{any} value**返回值：**设置的值。用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的原创 2020-08-11 17:46:03 · 132 阅读 · 0 评论 -
3-2-16-Vue.js 源码阅读-响应式原理-Watcher
响应式原理-WatcherWatcher 分为三种类型，Computed Watcher、用户 Watcher（侦听器）、渲染 Watcher首次渲染的 Watcher首先是首次渲染的时候创建 Watcher 的时候。// we set this to vm._watcher inside the watcher's constructor// since the watcher's initial patch may call $forceUpdate (e.g. inside child//原创 2020-08-11 17:45:30 · 158 阅读 · 0 评论 -
3-2-15-Vue.js 源码阅读-响应式原理-数组
响应式原理-数组在看 observer 的时候，在它的 constructor 里面是对数组有特殊的响应式处理的，下面讲解 Vue 中有关数组的响应式处理。在 observer 中通过 Array.isArray 这个方法判断当前处理的数据是否是一个数组，如果是数组进行数组相关处理。constructor (value: any) { this.value = value this.dep = new Dep() // 初始化实例的 vmCount 为 0 this.vmCount =原创 2020-08-11 17:44:59 · 139 阅读 · 0 评论 -
3-2-14-Vue.js 源码阅读-响应式原理-依赖收集-总结
响应式原理-依赖收集-总结本篇将通过调试的过程讲解 Vue 响应式处理中收集依赖的整个过程。通过前面的了解，收集依赖其实就是通过data 中的属性对应的 dep 对象，收集当前对应的 Component 对象对应的 watcher。具体就是将组件对应的 watcher 对象添加到属性对应的 dep 的 subs 数组中。也就是说 watcher 是基于一个组件的，当一个组件中多次用到了某一个属性，那么也只需要收集一次依赖就够了，当属性发生变化的时候，去更新整个组件。Vue2.0 开始更改每一个组件作原创 2020-08-11 17:44:32 · 100 阅读 · 0 评论 -
3-2-13-Vue.js 源码阅读-响应式原理-依赖收集
响应式原理-依赖收集本篇将详细讲解，在 defineReactive 的 get 中是如何给当前属性收集依赖的。收集依赖的过程就是通过属性对应的 dep 对象，收集组件对应的 watcher ，把对应的 watcher 添加到属性对应的 subs 数组中。如果模板中对相同的属性使用了两次，在添加依赖的时候只需要添加一次，只要属性发生变化，就去通知对应的 watcher 对象，让 watcher 更新视图。get: function reactiveGetter () { // 如果预定义的 get原创 2020-08-11 17:43:52 · 130 阅读 · 0 评论 -
3-2-12-Vue.js 源码阅读-响应式原理-defineReaactive
响应式原理-Observer本篇将详细讲解，当在 observe 中 new Observer 创建 observer 实例的过程中是如何实现数据的响应式的。/** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collec原创 2020-08-11 17:42:47 · 266 阅读 · 0 评论 -
3-2-11-Vue.js 源码阅读-响应式原理-Observer
响应式原理-Observer本篇将详细讲解，当在 observe 中 new Observer 创建 observer 实例的过程中是如何实现数据的响应式的。/** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collec原创 2020-08-11 11:54:30 · 164 阅读 · 0 评论 -
3-2-10-Vue.js 源码阅读-响应式原理-入口文件
响应式原理-入口文件数据响应式和双向绑定机制是使用数据驱动开发的基石数据响应式指的是，当数据发生变化的时候自动更新视图，不需要手动操作 DOM 。几个问题：vm.msg = { count: 0 } , 重新给数据赋值，是否是响应式的？vm.arr[0] = 4 , 给数组元素赋值，视图是否会更新vm.arr.length = 0 , 修改数组的 length ，视图是否会更新vm.arr.push(4) , 视图是否会更新响应式处理的入口src/core/instance原创 2020-08-10 09:59:31 · 179 阅读 · 0 评论 -
3-2-09-Vue.js 源码阅读-首次渲染过程-调试
Vue 首次渲染的过程-调试初始化完成之后，本节，通过调试的方式查看 Vue 首次渲染的整个过程。Vue 实例的时候会调用 _init() 这个方法，在这个方法里面会通过调用 $mount() 方法完成 Vue 的首次渲染。$mount 方法的执行过程：获取模板：首先判断 options 中是否有 render 函数如果没有 render 函数，获取 options.template ，如果是一个元素节点，直接返回 innerHTML 作为模板；如果存在并且是一个字符串，判断字符串的第一原创 2020-08-10 09:58:54 · 159 阅读 · 0 评论 -
3-2-08-Vue.js 源码阅读-初始化过程-调试
Vue 初始化的过程-调试前面已经介绍了初始化过程中给 Vue 实例添加静态成员以及实例成员的过程，下面用调试的方式统筹整个流程。主要调试的文件有四个，分别是前面说过的四个导出 Vue 的文件。跟平台无关的两个导出 Vue 的文件src/core/instance/index.jssrc/core/index.js跟平台相关的两个导出 Vue 的文件src/platforms/web/runtime/index.jssrc/platforms/web/entry-runtime原创 2020-08-10 09:58:14 · 145 阅读 · 0 评论 -
3-2-07-Vue.js 源码阅读-初始化过程-实例成员-initState
Vue 初始化的过程-实例成员-initState这个方法中将实例中的 $options 中的 props、methods、data、computed、watch 通过对应的 init 方法进行初始化。initProps(vm, opts.props)在这个方法中通过遍历 opts.props 将所有的 prop 通过 defineReactive 将属性转换成 getter/setter 并注入到 vm._props 中，所有的成员最终都会存储在 _props 这个属性中。如果是在开发模式中去给原创 2020-08-10 09:57:47 · 132 阅读 · 0 评论 -
3-2-06-Vue.js 源码阅读-初始化过程-实例成员-init
Vue 初始化的过程-实例成员-init在 Vue 的构造函数中调用了 init 方法，这个方法是在 initMixin 中定义的。所以需要分析 initMixin 中的代码来分析 init。下面是 initMixin 的源代码，通过添加注释来记录阅读源码的过程。/* @flow */import config from '../config'import { initProxy } from './proxy'import { initState } from './state'impor原创 2020-08-10 09:57:13 · 129 阅读 · 0 评论 -
3-2-05-Vue.js 源码阅读-初始化过程-实例成员
Vue 初始化的过程-实例成员在 core/instance/index.js 中定义了 Vue 的构造函数，并且通过给 Vue 的原型挂载了一系列的成员的方式添加了一系列的实例成员。// core/instance/index.jsimport { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } fr原创 2020-08-10 09:56:37 · 127 阅读 · 0 评论 -
3-2-04-Vue.js 源码阅读-初始化过程-静态成员
Vue 初始化的过程-静态成员在 src/core/index.js 这个文件中调用 initGlobalAPI 这个函数中初始化了 vue 的大多数静态成员。initGlobalAPI首先在方法中通过 defineProperty 给 Vue 挂载一个 config 对象属性// configconst configDef = {}configDef.get = () => configif (process.env.NODE_ENV !== 'production') { c原创 2020-08-10 09:56:06 · 134 阅读 · 0 评论 -
3-2-03-Vue.js 源码阅读-初始化过程
Vue 初始化的过程四个导出 Vue 的模块src/platforms/web/entry-runtime-with-compiler.jsweb 平台相关的入口重写了平台相关的 $mount() 方法注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数src/platforms/web/runtime/index.jsweb 平台相关注册和平台相关的全局指令：v-model、v-show注册和平台相关的全局组件：v-transitio原创 2020-08-10 09:51:41 · 115 阅读 · 0 评论 -
3-2-02-Vue.js 源码阅读-寻找入口文件
Vue.js 源码阅读-入口文件入口文件的位置查看 dist/vue.js 的构建过程通过查看 dist/vue.js 的构建过程可以找到 vue.js 的入口文件的位置。执行构建npm run dev# rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev# --environment TARGET:web-full-dev 设置环境变量 TARGET当使用 webpack 或者 ro原创 2020-08-10 09:51:20 · 277 阅读 · 0 评论 -
3-2-01-Vue.js 源码阅读-准备工作
Vue.js 源码阅读-准备工作distdist 是打包之后的结果， vue 打包之后会生成很多不同的版本，在 README 中会有详细的介绍。examples示例，通过示例快速的体验 vue 的使用方式。src源码目录compilercompiler 的作用是将模板转换成 render 函数，render 会帮我们创建虚拟 DOM 。corecore 是 vue 的核心，与平台无关components定义了 vue 中自带的 keep-alive 组件global-api定义了原创 2020-08-10 09:34:57 · 164 阅读 · 0 评论 -
3-1-14-Snabbdom Modules源码
Snabbdom Modules 源码patch() -> patchVnode() -> updateChildren()patch() 函数中所作的任务就是，对比两个虚拟节点，找到差异进行 DOM 操作。patch() 中的所有 DOM 操作：创建 DOM 元素，移除 DOM 元素，更新 DOM 内的子节点以及文本内容。Snabbdom 为了保证核心库的精简，把处理元素的属性/事件/样式等工作，放置到模块中。模块可以按照需要引入模块的使用可以查看官方文档原创 2020-07-13 14:01:52 · 121 阅读 · 0 评论 -
3-1-13-Snabbdom 源码解析
Snabbdom 源码解析如何学习源码先宏观了解带着目标看源码看源码的过程不求甚解调试参考资料快捷键F12 切换到定义的位置ALT + 左箭头 返回到跳转到之前的代码位置Snabbdom 的核心使用 h() 函数创建 JavaScript 对象(VNode)描述真实 DOMinit() 设置模块，创建 patch()patch() 比较新旧两个 VNode把变化的内容更新到真实 DOM 树上Snabbdom 源码源码地址https://github.com原创 2020-07-13 14:01:08 · 217 阅读 · 0 评论 -
3-1-12-Snabbdom 之模块
模块snabbdom 的核心库并不能处理元素的属性/样式/事件等，如果处理需要使用模块。常用模块官方提供的 6 个模块attributes设置 DOM 元素的属性，使用 setattribute()处理布尔类型的属性props和 attributes 模块相似，设置 DOM 元素的属性 element[attr] = calue不处理布尔类型的属性class切换类样式注意：给元素设置样式是通过 sel 选择器dataset设置 data-* 的自定义原创 2020-07-13 14:00:33 · 209 阅读 · 0 评论 -
3-1-11-Snabbdom 的基本使用
Snabbdom 的基本使用创建项目打包工具为了方便使用 parcel创建项目，并安装 parcelmd snabbdom-democd snabbdom-demoyarn init -yyarn add parcel-bundler配置 package.json 的 scripts"scripts": { "dev": "parcel index.html --open", "build": "parcel build index.html"}创建目录结构├原创 2020-07-13 14:00:03 · 304 阅读 · 0 评论 -
3-1-10-Virtual DOM
Virtual DOM了解什么是虚拟 DOM ，以及虚拟 DOM 的作用Snabbdom 的基本使用Snabbdom 的源码解析什么是虚拟 DOM ？Virtual DOM （虚拟 DOM）是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM由于真实 DOM 的成员非常的多，所以创建一个 DOM 对象的成本是非常高的。如果用一个普通的 JS 对象来描述真实 DOM 就会节省大量的开销。为什么使用虚拟 DOM手动操作 DOM 比较原创 2020-07-13 13:59:37 · 230 阅读 · 0 评论