<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[w1fl1w的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/w1fl1w</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; w1fl1w]]></copyright><item><title><![CDATA[8.4.1 搭建自己的SSR]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109851327</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109851327</guid><author>w1fl1w</author><pubDate>Sat, 21 Nov 2020 00:05:21 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

心得体会
SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。
3-4-1 搭建自己的SSR
Vue SSR 介绍
是什么

官方文档:https://ssr.vuejs.org/
Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案
使用它可以构建同构应用
还是基于原有的 Vue.js 技术栈


官方文档的解释:Vue.js 是构建客户端应]]></description><category></category></item><item><title><![CDATA[8.5.4 Vite实现原理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109852056</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109852056</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:54:42 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

Vite概念
Vite是一个面向现代浏览器的一个更轻、更快的web应用开发工具
基于ECMAScript标准原生模块系统(ES Modules)实现
Vite项目依赖

Vite
@vue/compiler-sfc

vite指令
vite serve
vite build
HMR
Vite HMR: 立即编译当前所修改的文件
Webpack HMR: 会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍
build
内部是rollup，最后]]></description><category></category></item><item><title><![CDATA[8.5.3 Vue.js 3.0响应式系统原理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109852023</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109852023</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:54:00 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

Vue.js响应式

Proxy对象实现属性监听
多层属性嵌套， 在访问属性过程中处理下一级属性
默认监听动态添加的属性
默认监听属性的删除操作
默认监听数组索引和length属性
可以作为单独的模块使用

Proxy注意事项
&lt;script&gt;
    'use strict'
    // 问题1： set 和 deleteProperty 中需要返回布尔类型的值
    //        在严格模式下，如果返回 false 的话会出现 Type E]]></description><category></category></item><item><title><![CDATA[8.5.2 Composition API]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109851866</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109851866</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:53:10 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

心得体会
Vue3.0的重要变动就是composition API，在查看代码方面比之前真的好太多了，感觉起来和React.js的Hook很类似。
composition api举例
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width]]></description><category></category></item><item><title><![CDATA[8.5.1 Vue3.0介绍]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109851779</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109851779</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:49:26 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

Vue.js 3.0

源码组织方式的变化

采用TypeScript重写
使用Monorepo管理项目结构


Composition API
性能提升
Vite

packages目录结构

compiler-core

平台无关的编译器


compiler-dom

浏览器平台下的编译器，依赖于compiler-core


compiler-sfc

single file component，用来编译单文件组件，依赖于compiler-core和comp]]></description><category></category></item><item><title><![CDATA[8.4.3 封装Vue.js组件库]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109851703</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109851703</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:47:20 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记
CDD
（Component-Driven Development)

自下而上
从组件级别开始，到页面级别结束

CDC的好处

组件在最大程度被复用
并行开发
可视化测试

组件的边界情况
root: 获取根组件
parent: 获取父组件
children: 获取所有子组件
ref：拿到组件或者dom
provide&amp;inject: 类似于react的context provider，上层定义一个provide的一些变量，下层任意一层都能inject获取]]></description><category></category></item><item><title><![CDATA[8.4.2 静态站点生成]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/109851566</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/109851566</guid><author>w1fl1w</author><pubDate>Fri, 20 Nov 2020 15:43:51 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记
什么是静态网站生成器

静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具
这个功能也叫预渲染
生成的网站不需要类似PHP这样的服务器
只需要放到支持静态资源的Web Server或CDN上即可运行

好处

省钱

不需要专业服务器，只要能托管静态文件的空间即可


快速

不经过后端服务器的处理，只传输内容


安全

没有后端程序的执行，自然会更安全



常见的静态网站生成器

Jekyll (Ruby)
Hexo (Node)]]></description><category></category></item><item><title><![CDATA[8.3.4 NuxtJS综合案例]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/108769555</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/108769555</guid><author>w1fl1w</author><pubDate>Thu, 24 Sep 2020 13:35:27 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

心得体会
本章节花了很多时间看和学，主要是我对Vue.js和Nuxt.js并不是特别熟悉，之前写React.js比较多，这次真的是用一个非常实战的例子来学和实践，老师在视频里基本上只是把重点给做了，还有很多页面需要自己补全功能，经过这次作业有了一次全方位的理解，硕果累累，真的推荐学的人都自己实践一下。
实现的过程会遇到很多奇奇怪怪的问题，具体的问题和解决办法在本文最后，nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。
还有个意外收获就是因为这次作业是需要部署到]]></description><category></category></item><item><title><![CDATA[8.3.3 NuxtJS基础]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/108769482</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/108769482</guid><author>w1fl1w</author><pubDate>Thu, 24 Sep 2020 11:02:33 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

Nuxt.js 介绍
官网:https://zh.nuxtjs.org/
GitHub 仓库:https://github.com/nuxt/nuxt.js
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js 项目中使用 Nuxt.j]]></description><category></category></item><item><title><![CDATA[8.3.2 服务器端渲染基础]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/108769374</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/108769374</guid><author>w1fl1w</author><pubDate>Thu, 24 Sep 2020 11:00:25 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

在今天看来，这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下，这种模式存在很多明显的不足:
应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力;
前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案;
由于内容都是在服务端动态生成的，所以服务端的压力较大;
相比目前流行的 SPA 应用来说，用户体验一般;
但是不得不说，在网页应用并不复杂的情况下，这种方式也是可取的。
SPA单页面应用
概述
随着前端技术栈和]]></description><category></category></item><item><title><![CDATA[8.3.1 Vuex 状态管理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/108769288</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/108769288</guid><author>w1fl1w</author><pubDate>Thu, 24 Sep 2020 10:57:48 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

组件内的状态管理流程
Vue 最核心的两个功能:数据驱动和组件化。
组件化开发给我们带来了:
更快的开发效率
更好的可维护性
每个组件都有自己的状态、视图和行为等组成部分。
new Vue({
  // state
  data() {
    return {
      count: 0
    }
  },
  // view
  template: `
	  &lt;div&gt;{{ count }}&lt;/div&gt;
	`,
  // action]]></description><category></category></item><item><title><![CDATA[8.2.3 Vue.js 源码剖析-模板编译和组件化]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861934</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861934</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:40:19 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.2.3 Vue.js 源码剖析-模板编译和组件化
模板编译

模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)

&lt;div&gt;
  &lt;h1 @click="handler"&gt;title&lt;/h1&gt;
  &lt;p&gt;some content&lt;/p&gt;
&lt;/div&gt;


渲染函数 render

render (h) {
  return h('div', [
		h('h]]></description><category></category></item><item><title><![CDATA[8.2.2 Vue.js 源码剖析-虚拟 DOM]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861786</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861786</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:37:48 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.2.2 Vue.js 源码剖析-虚拟 DOM
虚拟 DOM 回顾
什么是虚拟 DOM
虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对
象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射
到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如:指令和组
件]]></description><category></category></item><item><title><![CDATA[8.2.1 Vue.js 源码剖析-响应式原理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861318</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861318</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:31:21 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.2.1 Vue.js 源码剖析-响应式原理
Vuejs 2.6 https://github.com/vuejs/vue
Vuejs 3.0 https://github.com/vuejs/vue-next
Vue.js使用flow进行静态类型检查
Vue.js源码的打包工具是Rollup

Vue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量
Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js ]]></description><category></category></item><item><title><![CDATA[8.1.4 Virtual DOM 的实现原理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861247</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861247</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:13:30 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.1.4 Virtual DOM 的实现原理
虚拟DOM
虚拟DOM就是js对象描述dom对象，成本比真实DOM低很多，因为真实DOM的属性特别多
以snabbdom为例，导入时需要这样写
import {init, h, thunk} from 'snabbdom'

创建脚手架
md snabbdom-demo
cd snabbdom-demo
yarn init -y
yarn add parcel-bundler
//package.json
script]]></description><category></category></item><item><title><![CDATA[8.1.3 模拟Vue.js响应式原理]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861208</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861208</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:09:58 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.1.3 模拟 Vue.js 响应式原理
Vue数据驱动

数据响应式

数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率


双向绑定

数据改变，视图改变；视图改变，数据也随之改变
我们可以使用v-model在表单元素上创建双向数据绑定


数据驱动是Vue最独特的特性之一

开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图



Vue2.x数据响应式实现原理是Object.d]]></description><category></category></item><item><title><![CDATA[8.1.2 Vue Router原理实现]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861142</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861142</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:07:58 +0800</pubDate><description><![CDATA[本文为拉勾网大前端高薪训练营第一期笔记

8.1.2 Vue Router原理实现
Vue router
初始化vue的时候选择router，会自动生成router相关代码
Vue.use(VueRouter)
use传参如果是函数，会调用函数注册组件，如果是对象的话会调用对象的install方法
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
// 1. 注册路由]]></description><category></category></item><item><title><![CDATA[8.1.1 Vue.js基础]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107861043</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107861043</guid><author>w1fl1w</author><pubDate>Fri, 07 Aug 2020 14:03:42 +0800</pubDate><description><![CDATA[Vuejs基础
本文大部分Vuejs介绍来自Vuejs官方文档
Vue生命周期图示

单文件页面建议提前编译template，优化性能
Vue.js语法和概念
建议https://cn.vuejs.org/v2/guide/查看官方文档

插值表达式

&lt;span&gt;Message: {{ msg }}&lt;/span&gt;


指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute
跟angular的ng-if很接近
&lt;p v-if="seen"&gt;现]]></description><category></category></item><item><title><![CDATA[7.模块化开发笔记（主要webpack）]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/107162409</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/107162409</guid><author>w1fl1w</author><pubDate>Mon, 06 Jul 2020 16:55:12 +0800</pubDate><description><![CDATA[script type=‘module’
自动严格模式
单独私有作用域
通过CORS的方式请求外部JS模块，且必须http这种形式，不能通过文件
等同于defer，延迟执行脚本
import export
es module import和export都可以用as重命名
import和export是传引用（变量地址），而不是传值
import的不能改，是const的
import a from 'a.js’不能省略.js
import b from ‘./b/index.js’ 不能省略index.js
i]]></description><category></category></item><item><title><![CDATA[6.前端工程化笔记]]></title><link>https://blog.youkuaiyun.com/w1fl1w/article/details/106581749</link><guid>https://blog.youkuaiyun.com/w1fl1w/article/details/106581749</guid><author>w1fl1w</author><pubDate>Sat, 06 Jun 2020 02:46:32 +0800</pubDate><description><![CDATA[自动化步骤

创建项目
编码

格式化代码
校验代码风格
编译/构建/打包


预览/测试

Web Server/Mock
Live Reloading/HMR
Source Map


提交

Git Hooks
Lint-staged
持续集成


部署

CI/CD
自动发布



5个维度讲解前端工程化

脚手架工具开发
自动化构建系统
模块化打包
项目代码规范化
自动化部署

常见创建脚手架
create-react-app
vue-cli
angular-cli
yeoman
Install ]]></description><category></category></item></channel></rss>