qq_32090185的博客

Study Notes封装 Vue.js 组件库组件库介绍开源组件库Element-UIIViewVantCDD(组件设计文档)自下而上从组件级别开始，到页面级别结束CDD 的好处组件在最大程度上被重用并行开发可视化测试处理组件边界情况vue 中处理组件边界情况的 API$root当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。$parent父实例，如果当前实例有的话。$children当前实例的直接子组件。需要注意 $chil

Study NotesGridsome静态站点生成（SSG）GitHub 仓库官网介绍Gridsome 是什么Gridsome 是由 Vue.js 驱动的 Jamstack 框架，用于构建默认情况下快速生成的静态生成的网站和应用。Gridsome 是 Vue 提供支持的静态站点生成器，用于为任何无头 CMS，本地文件或 API 构建可用于 CDN 的网站使用 Vue.js，webpack 和 Node.js 等现代工具构建网站。通过 npm 进行热重载并访问任何软件包，并使

Study NotesVue SSR 介绍SSR 官方文档什么是服务器端渲染 (SSR)？官方文档Vue SSR（Vue.js Server-Side Rendering） 是 Vue.js 官方提供的一个服务端渲染（同构应用）解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈:::tip 官方介绍Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML

Study NotesNuxt.js介绍Nuxt.js 是什么？Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 V

Study Notes服务端渲染（SSR）概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷，其中主要涉及到以下两点：首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容，

Study NotesVuex 模拟实现实现思路实现 install 方法Vuex 是 Vue 的一个插件，所以和模拟 VueRouter 类似，先实现 Vue 插件约定的 install 方法实现 Store 类实现构造函数，接收 optionsstate 的响应化处理getter 的实现commit、dispatch 方法installlet _Vue = null;function install(Vue) { _Vue = Vue; // 混入

Study Notes案例-购物车购物车 Demo，带你理解并使用 vuex 状态管理目录结构效果展示功能介绍首页获取并展示商品列表添加商品到购物车展示购物车中商品总数购物车更新购物车中的商品数据更新商品选中状态计算选中商品数量、合计商品价格全选、单选删除购物车中的商品本地缓存 vuex 状态功能开发Vuex 中创建两个模块，分别用来记录商品列表和购物车的状态，store 的结构：└───store ├───modules │ └

Study NotesVuexVuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。Vuex 是专门为 Vue.js 设计的状态管理库它采用集中式的方式存储需要共享的数据从使用角度，它就是一个 JavaScrip

Vue状态管理组件内的状态管理流程Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0, }; }, // view template: `<div>{{ count }}</div>`, // actions methods:

Vue.js 源码剖析-组件化组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的，系统内可重用，组件之间可以嵌套有了组件可以像搭积木一样开发网页例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。下面我们将从源码的角度来分析 Vue 组件内部如何工作组件实例的创建过程是从上而下（先创建父组件再创建子组件）组件实例的挂载过程是从下而上（先挂载子组件再挂载父组件）组件定义注册 Vue.component()入口

Study NotesVue.js 源码剖析-模板编译Vue 模板编译为什么需要模板编译Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂模板编译的目的将模板(template)字符串转换为渲染函数(render)用户只需要编写类似 HTML 的代码 - Vue 模板，通过编译器将模板转换为返回 VNode 的 render 函数.vue 文件在 webpack 构建的过程中会被转换成 render 函数沙盒工具官方提供 Vue 2

Study NotesVue.js 源码剖析-虚拟 DOM什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如：指令和组件机制。Vue 1.x 中细粒度监测数据的变化，每一个属

Vue.js 源码剖析-响应式原理响应式处理的入口src/core/instance/init.jsinitState(vm) vm 状态的初始化初始化了 _data、_props、methods 等src/core/instance/state.js/* @flow */import ...;const sharedPropertyDefinition = {...};export function proxy(target: Object, sourceKey: str

Study Notes深入响应式原理数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图Vue2.x 响应式原理当你把一个普通的 JavaScript

Study Notes模拟 VueRouter前置的知识：插件slot 插槽混入render 函数运行时和完整版的 VueVue Router 的核心代码// 注册插件// Vue.use() 内部调用传入对象的 install 方法Vue.use(VueRouter);// 创建路由对象const router = new VueRouter({ routes: [{ name: 'home', path: '/', component: homeComponent }]

第一步：首先我们去npm官网注册一个账号。如果你的username一直不能注册成功，可以在你的username前面加一个~，就可以注册成功了。第二步：1.新建一个项目2.生成package.json文件npm initpackage name: (testpublish) //包名，可更改，也可以使用默认（直接回车）version: (1.0.0) 0..........

自定义指令自定义指令——第一种方法（传参）//自定义指令——第一种，可以注册在全局（main.js）里，也可以注册局部（需要使用的vue文件）Vue.directive('clickReport', { inserted(el, binding, vnode) { el.addEventListener('click', e => { console.l.........