没有什么时间是比现在合适的-CSDN博客

转载 css实现超出部分显示省略号

显示一行，省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;显示两行，省略号text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2

2021-03-03 19:59:25 238 1

原创 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 347

原创 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 393

原创 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 161

原创 3-3-05-服务端渲染概述

服务端渲染概述spa 的优缺点优点：用户体验好，开发效率高，渲染性能好，可维护性好缺点：首屏渲染时间过长，与传统服务端渲染直接获取服务端渲染好的 html 不同，spa 使用 js 在客户端生成 html 来呈现网页内容，用户需要等待客户端 js 解析执行完才能够看到页面，这样就使得首屏加载时间过长影响用户体验。不利于 SEO，当搜索引擎爬取网站 html 文件的时候单页面的 html 是没有内容的，因为他需要通过客户端 js 解析执行完才能够生成完 html 内容，所以目前的主流的搜索引擎堆这

2020-11-24 20:22:51 147

原创 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 79

原创 path.resolve() 和 path.join() 的区别

path.resolve()相对于当前路径，将传入的参数解析为一个绝对路径。解析的过程是从右往左，遇到 / 表示跳转到根目录， …/ 表示跳转到上一层目录。前提：执行命令的路径为 D:\platform\testconsole.log(path.resolve('a', 'b', 'c')) // D:\platform\test\a\b\cconsole.log(path.resolve('a', 'b', '/c')) // D:\cconsole.log(path.resolve('a',

2020-11-20 10:59:58 150

原创 3-3-03-Vuex 插件

Vuex 插件在学习购物车案例的时候，需要将购物车的信息存储到本地存储 localStorage 中，这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次，所以如果 mutations 太多，这种方法就显得不是很合理，所以这里可以使用 Vuex 中的插件去实现，这样会显得更加合理一些。Vuex 的插件就是一个函数。这个函数接收一个 store 的参数。在这个函数里面，我们可以定义一个函数，让它在所有的 mutations 执行结束之后再去执行。import Vue f

2020-10-26 09:51:59 97

原创 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 102

原创 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 206

原创 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 170 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 178 1

原创 3-2-25-Vue.js 源码阅读-key

Vue 中的虚拟 DOM - keyhttps://blog.csdn.net/weixin_42695446/article/details/84680213

2020-10-26 09:44:54 97

原创 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 99

原创 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 100

原创 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 150 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 94

原创浏览器 event loop 解读

2020-08-26 14:00:39 105

原创 JavaScript 执行上下文解读

概念理解执行上下文其实是函数调用的一个抽象环境，环境中包括了函数内部和外部所关联的所有的引用关系，这些引用关系会在函数执行的时候用到。执行上下文包括三种类型：分为全局执行上下文函数执行上下文eval执行上下文每个执行上下文都有三个属性变量对象作用域链this变量对象函数的形参（如果是在函数作用域中）函数声明变量声明作用域链局部变量 scope，用于存放当前执行上下文的父级执行上下文的引用this默认绑定非严格模式下，默认绑定的 this 指向全局对象， wi

2020-08-24 14:52:02 106

原创原生 js 实现鼠标拖拽绘制矩形区域

业务开发中遇到一个场景，视频监控播放的时候，需要在视频区域画一个矩形，然后将这个矩形包括的范围放大的功能。所以首先就需要一个可以在 video 标签上绘制矩形的方法。思路：鼠标按下，记录鼠标按下的位置，及绘制矩形的起点。鼠标移动的时候，以起点为原点建立直角坐标系，然后分别讨论移动之后的鼠标点在四个坐标象限的情况。鼠标弹起，清空鼠标移动个鼠标弹起事件，调用矩形绘制方法的回调函数。在鼠标移动的过程中还要考虑到鼠标越界的情况。代码如下：<!DOCTYPE html><html

2020-08-21 15:19:14 2056

原创 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 90

原创 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 121

原创 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 132

原创 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 100

原创 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 128

原创 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 108

原创 3-2-14-Vue.js 源码阅读-响应式原理-依赖收集-总结

响应式原理-依赖收集-总结本篇将通过调试的过程讲解 Vue 响应式处理中收集依赖的整个过程。通过前面的了解，收集依赖其实就是通过data 中的属性对应的 dep 对象，收集当前对应的 Component 对象对应的 watcher。具体就是将组件对应的 watcher 对象添加到属性对应的 dep 的 subs 数组中。也就是说 watcher 是基于一个组件的，当一个组件中多次用到了某一个属性，那么也只需要收集一次依赖就够了，当属性发生变化的时候，去更新整个组件。Vue2.0 开始更改每一个组件作

2020-08-11 17:44:32 72

原创 3-2-13-Vue.js 源码阅读-响应式原理-依赖收集

响应式原理-依赖收集本篇将详细讲解，在 defineReactive 的 get 中是如何给当前属性收集依赖的。收集依赖的过程就是通过属性对应的 dep 对象，收集组件对应的 watcher ，把对应的 watcher 添加到属性对应的 subs 数组中。如果模板中对相同的属性使用了两次，在添加依赖的时候只需要添加一次，只要属性发生变化，就去通知对应的 watcher 对象，让 watcher 更新视图。get: function reactiveGetter () { // 如果预定义的 get

2020-08-11 17:43:52 104

原创 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 224

原创 js在for循环中延时打印索引的两种方法

闭包利用闭包将每一次循环中的 i 保存起来，等待延时器回调函数获取。for(var i = 0; i < 6; i++){ setTimeout(function generatorFunc (i) { return function sonFunc () { console.log(i) } }(i), 1000)}generatorFunc 是一个立即执行函数，接受一个参数并返回一个函数 sonFunc 。sonFunc 作为延时器的回调函数。在每

2020-08-11 12:02:05 549

原创 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 127

原创 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 146

原创 3-2-09-Vue.js 源码阅读-首次渲染过程-调试

Vue 首次渲染的过程-调试初始化完成之后，本节，通过调试的方式查看 Vue 首次渲染的整个过程。Vue 实例的时候会调用 _init() 这个方法，在这个方法里面会通过调用 $mount() 方法完成 Vue 的首次渲染。$mount 方法的执行过程：获取模板：首先判断 options 中是否有 render 函数如果没有 render 函数，获取 options.template ，如果是一个元素节点，直接返回 innerHTML 作为模板；如果存在并且是一个字符串，判断字符串的第一

2020-08-10 09:58:54 126

原创 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 109

原创 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 103

git思维导图.pdf

空空如也