<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_35469739的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_35469739</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_35469739]]></copyright><item><title><![CDATA[React hooks整理]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108847449</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108847449</guid><author>qq_35469739</author><pubDate>Mon, 28 Sep 2020 12:15:31 +0800</pubDate><description><![CDATA[React hooks整理:

会有 Capture Value 特性
推荐配合 eslint-plugin-react-hooks 使用
useEffect:

useEffect 依赖一个空数组的时候，会记住 state 的值

useEffect(()=&gt;{
  setInterval(() =&gt; {
    console.log(num)
    setNum(num+1)
  }, 500);
},[])
// 一直打印 0，依赖空数组时，这个 effect 会记住 num 的值，每]]></description><category></category></item><item><title><![CDATA[webpack 高级特性总结]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108847152</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108847152</guid><author>qq_35469739</author><pubDate>Mon, 28 Sep 2020 11:51:37 +0800</pubDate><description><![CDATA[webpack

plugins:

new webpack.DefinePlugin({
    // window.ENV = 'development'
    ENV: JSON.stringify('development')
})



自动补全 css 前缀
{
    test: /\.css$/,
    // loader 的执行顺序是：从后往前
    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 post]]></description><category></category></item><item><title><![CDATA[Vue.js 3.0 响应式系统的实现原理]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108755888</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108755888</guid><author>qq_35469739</author><pubDate>Wed, 23 Sep 2020 16:30:50 +0800</pubDate><description><![CDATA[Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：

1、reactive:

接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理
创建拦截器对象 handler, 设置 get/set/deleteProperty

get

收集依赖（track）
返回当前 key 的值。

如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty
如果当前的 key 的值不是]]></description><category></category></item><item><title><![CDATA[Vue 3.0 介绍]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108626448</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108626448</guid><author>qq_35469739</author><pubDate>Wed, 16 Sep 2020 17:39:23 +0800</pubDate><description><![CDATA[Vue 3.0 介绍
1、Vue 3.0 源码组织方式

源码组织方式：

源码采用 ts 重写
使用 Monorepo 管理项目结构
packages 目录结构





compiler-core: 和平台无关的编译器代码


compiler-dom: 浏览器平台下的编译器代码(依赖于 compiler-core)


compiler-sfc: 编译单文件组件的代码(依赖于 compiler-core 和 compiler-dom)


compiler-ssr: 服务端渲染的编译器（依赖于 com]]></description><category></category></item><item><title><![CDATA[2020前端面试题整理]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108348086</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108348086</guid><author>qq_35469739</author><pubDate>Tue, 01 Sep 2020 18:19:05 +0800</pubDate><description><![CDATA[1、已知如下对象，请基于 es6 的 proxy 方法设计一个属性拦截读取操作的例子，要求实现去访问目标对象 example 中不存在的属性时，抛出错误：Property “$(property)” does not exist
// 案例代码
const man = {
  name: 'jscoder',
  age: 22
}
//补全代码
const proxy = new Proxy(...)
proxy.name // "jscoder"
proxy.age // 22
proxy.locati]]></description><category></category></item><item><title><![CDATA[typeScript整理笔记]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108282937</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108282937</guid><author>qq_35469739</author><pubDate>Fri, 28 Aug 2020 16:56:41 +0800</pubDate><description><![CDATA[typeScript

TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并最终将代码编译为纯粹的 JavaScript 代码。

TypeScript 简介

TypeScript 由 Microsoft(算上 Angular 2 的话加上 Google)开发和维护的一种开源编程语言。 它支持 JavaScript 的所有语法和语义，同时通过作为 ECMAScript 的超集来提供一些额外的功能，如类型检测和更丰富的语法。
]]></description><category></category></item><item><title><![CDATA[从输入URL到页面展示，这中间发生了什么？]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108263997</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108263997</guid><author>qq_35469739</author><pubDate>Thu, 27 Aug 2020 16:42:50 +0800</pubDate><description><![CDATA[从输入URL到页面展示，这中间发生了什么？

用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL
用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得
浏览器进程浏览器构建请求行信息，会通过进程间通信（IPC）将URL请求发送给网络进程
GET /index.html H]]></description><category></category></item><item><title><![CDATA[js继承的几种方式及优缺点]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108261273</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108261273</guid><author>qq_35469739</author><pubDate>Thu, 27 Aug 2020 15:12:09 +0800</pubDate><description><![CDATA[1、原型链继承
function Parent () {
    this.name = 'kevin';
}

Parent.prototype.getName = function () {
    console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin 


问]]></description><category></category></item><item><title><![CDATA[dva 使用手册]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/108243689</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/108243689</guid><author>qq_35469739</author><pubDate>Wed, 26 Aug 2020 17:14:43 +0800</pubDate><description><![CDATA[dva
app = dva(opts)

创建应用，返回 dva 实例(注：dva 支持多实例)
opts 包含如下配置：

history：指定给路由用的 history，默认是 hashHistory
initialState：指定初始数据，优先级高于 model 中的 state，默认是 {}


如果配置history 为 browserHistory，则创建dva对象可以写成如下写法

import createHistory from 'history/createBrowserHistory']]></description><category></category></item><item><title><![CDATA[Vuex 数据流管理及Vue.js 服务端渲染（SSR）]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107895154</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107895154</guid><author>qq_35469739</author><pubDate>Sun, 09 Aug 2020 16:00:22 +0800</pubDate><description><![CDATA[Vuex 数据流管理及Vue.js 服务端渲染（SSR）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-03
任务一：Vuex 状态管理
1、课程目标

Vue 组件间通信方式回顾
Vuex 核心概念和基本使用回顾
购物车案例
模拟实现 Vuex

2、组件内的状态管理流程

状态管理：

state：驱动应用的数据源
view：以声明方式将 state 映射到视图
actions：响应在 vie]]></description><category></category></item><item><title><![CDATA[vue.js源码剖析——虚拟 DOM]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107752995</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107752995</guid><author>qq_35469739</author><pubDate>Sun, 02 Aug 2020 22:40:01 +0800</pubDate><description><![CDATA[任务二：vue.js源码剖析——虚拟 DOM
1、虚拟 DOM 概念回顾

什么是虚拟 DOM

虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOM
Vue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。

例如：指令和组件机制




为什么要使用虚拟 DOM

避免直接操作 DOM，提高开发效率
作为一个中间层可以跨平台
虚拟 DOM 不一定可以提高性能

首次渲染的时候会增加开销
复杂视图情况下提升渲染性能





2、代码]]></description><category></category></item><item><title><![CDATA[Vue.js 源码剖析-响应式原理 学习的心得体会+学习笔记（青铜到铂金）]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107740951</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107740951</guid><author>qq_35469739</author><pubDate>Sun, 02 Aug 2020 09:55:07 +0800</pubDate><description><![CDATA[拉勾教育大前端高薪训练营 心得体会+学习笔记
心得体会
不知不觉在拉钩教育大前端高薪训练营已经学习2个多月了，在这两个多月的学习中，自己收获了很多，不仅养成了每次学习时都保证高质量的记好学习笔记的习惯，而且对自己整个的前端基础知识进行了巩固，对基础知识有了更深的理解，勉强做到了知其然，更知其所以然。
接下来我想谈下拉钩教育大前端高薪训练营的课程体系：这门课的内容非常的好，为什么这么说呢？原因有以下几点：

1.课程的深度做的足够好：课程不仅会教同学们怎么使用前端经常使用的框架（vue、react 和 ang]]></description><category></category></item><item><title><![CDATA[vue.js源码剖析——虚拟 DOM（更新中）]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107739076</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107739076</guid><author>qq_35469739</author><pubDate>Sun, 02 Aug 2020 00:08:46 +0800</pubDate><description><![CDATA[Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02
任务二：vue.js源码剖析——虚拟 DOM
1、虚拟 DOM 概念回顾

什么是虚拟 DOM

虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOM
Vue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。
]]></description><category></category></item><item><title><![CDATA[Vue.js 源码分析-响应式原理]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107716092</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107716092</guid><author>qq_35469739</author><pubDate>Fri, 31 Jul 2020 16:22:31 +0800</pubDate><description><![CDATA[Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02
任务一：Vue.js 源码剖析-响应式原理
1、Vue 的不同构建版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BgywtCl9-1596183666518)(…/images/vueAllJs.png)]
Full：包含编译器和运行时的构建]]></description><category></category></item><item><title><![CDATA[tensorflow.js 训练模型和可视化训练时用到的高频API详解]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107493804</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107493804</guid><author>qq_35469739</author><pubDate>Tue, 21 Jul 2020 17:25:42 +0800</pubDate><description><![CDATA[tf.js 实战学习笔记
tfvis.render.scatterplot （container，data，opts？）


绘制散点图(文档见 https://js.tensorflow.org/api_vis/1.4.3/#render.scatterplot)
const series1 = Array(100).fill(0)
.map(y =&gt; Math.random() * 100 - (Math.random() * 50))
.map((y, x) =&gt; ({ x, y, }))]]></description><category></category></item><item><title><![CDATA[TensorFlow.js 学习笔记(持续更新)]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107311414</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107311414</guid><author>qq_35469739</author><pubDate>Mon, 13 Jul 2020 10:11:44 +0800</pubDate><description><![CDATA[六子 TensorFlow.js 学习笔记
part一、Tensors
1、Creation:我们具有用于标量，1D，2D，3D和4D张量的常见情况的实用程序功能，以及许多用于以对机器学习有用的方式初始化张量的功能。

tf.tensor(values, shape?, dtype?)

参数：

values （TypedArray| Array） 张量的值。可以是数字的嵌套数组，平面数组或 TypedArray。如果值为字符串，则将其编码为 utf-8 并保留为 Uint8Array[]。
shape ]]></description><category></category></item><item><title><![CDATA[简易版 vue-router的 hash 模式实现]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107279881</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107279881</guid><author>qq_35469739</author><pubDate>Sat, 11 Jul 2020 09:21:59 +0800</pubDate><description><![CDATA[1、模拟 VueRouter 的 hash 模式的实现，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。

答：自己实现的 vue-router 的代码如下(完整代码见https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-01/code/liuzi-hash-router)：

router/index.jsimport Vue from "vue";
i]]></description><category></category></item><item><title><![CDATA[简易版 vue 指令解析]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107279851</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107279851</guid><author>qq_35469739</author><pubDate>Sat, 11 Jul 2020 09:19:27 +0800</pubDate><description><![CDATA[2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令

答：指令解析的代码如下(完整代码见 https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-01/code/liuzi-minVue )：

vue/vue.js  class Vue {
    constructor(options) {
        // 1、通过属性保存选项的数据
        this.$]]></description><category></category></item><item><title><![CDATA[vue Diff 算法的执行过程]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107225591</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107225591</guid><author>qq_35469739</author><pubDate>Thu, 09 Jul 2020 12:09:40 +0800</pubDate><description><![CDATA[简述 Diff 算法的执行过程

答：

diff 的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。
patch 函数接收两个参数 oldVnode 和 Vnode 分别代表新的节点和之前的旧节点,这个函数会比较 oldVnode 和 vnode 是否是相同的, 即函数 sameVnode(oldVnode, vnode), 根据这个函数的返回结果分如下两种情况：

true：则执行 patchVnode
false：则用 vnode 替换 oldVnode


]]></description><category></category></item><item><title><![CDATA[vue动态给 data 增加的成员是否是响应式数据]]></title><link>https://blog.youkuaiyun.com/qq_35469739/article/details/107225425</link><guid>https://blog.youkuaiyun.com/qq_35469739/article/details/107225425</guid><author>qq_35469739</author><pubDate>Thu, 09 Jul 2020 12:07:00 +0800</pubDate><description><![CDATA[我们点击按钮的时候动态给 data 增加的成员是否是响应式数据(代码如下)，如果不是的话，如果把新增成员设置成响应式数据，它的内部原理是什么。
let vm = new Vue({
 el: '#el'
 data: {
  o: 'object',
  dog: {}
 },
 method: {
  clickHandler () {
   // 该 name 属性是否是响应式的
   this.dog.name = 'Trump'
  }
 }
})


答：不是响应式数据。响应式对象和响应式数组是指]]></description><category></category></item></channel></rss>