Node和浏览器环境下的全局thisNode和浏览器环境下的全局this在浏览器环境里，使用const和let都不会把变量添加到windows全局对象里，但是使用var会。浏览器环境里，在最外层定义一个函数，其内部的this就是windows对象function fn(){ this.num = 10 } fn(); console.log(this); // windows console.log(this 2020-11-27 前端学习笔记 javascript Node
Nuxt服务端渲染项目部署到阿里云Nuxt服务端渲染项目部署到阿里云asyncData方法1. 基本使用官方文档：https://zh.nuxtjs.org/guide/async-dataasyncData方法是Nuxt自带的一个异步数据获取方法，是Nuxt实现服务端渲染最重要的api它会将返回的数据合并到Vue组件的data里面。调用时机：服务端渲染期间和客户端路由更新之前。注意事项只能在页面组件（pages）中使用，普遍组件 2020-09-29 前端学习笔记 javascript Vue Nuxt
Vuex 数据流心法Vuex 数据流心法1. 父子组件传递数据的传统方法自从组件化模式成为前端主流后，开发中的一大问题就是如何在父子组件之间传递数据。1.1 PropsVue本身提供的props是最简单，也是最常用的父子组件通讯方式父组件可以在html模板里直接把数据传递给子组件。父组件：调用子组件时传递props<template> <div> <h1>Props D 2020-08-30 前端学习笔记 javascript Vue
Vue核心原理 - 自己实现一个VueVue核心实现原理1. 观察者模式和发布订阅模式观察者模式和发布订阅模式是最为常用的事件响应设计模式。与观察者模式相比，发布订阅模式多了一层事件中心，隔离了发布者和订阅者，使其不需要相互依赖。既然我们希望当数据改变的时候视图也自动更新，那么就需要一个发布者来跟踪数据，当数据改变的时候这个发布者能够通知所有订阅自己的观察者，观察者再负责改变视图。所以简单来说：发布者 - 跟踪数据变化，有变化发生时通 2020-08-28 前端学习笔记 javascript Vue
Vue源码理解心得Vue源码理解心得1. 响应式原理先上一张图作为总纲心法：里面有很多实现细节，但大概的原理都和自己实现的简化版的Vue类似。其中比较有意思的几个地方，也是面试里面常常考察的点，通过理解源码之后就再无任何疑问了，一通百通。1.1 数组响应式劫持众所周知，Vue对于数组的响应式处理是一个被经常讨论的话题，比较关键的源码如下：源码位置：vue\src\core\observer\index.js 是响应 2020-08-13 前端学习笔记 javascript Vue
VueRouter的原理和实现Vue Router先来看看VueRouter的使用方式// router/index.js // 注册VueRouter插件 Vue.use(VueRouter) const router = new VueRouter({ route: [ {name: 'home', path: '/', component: homeComponent} ] 2020-07-30 前端学习笔记 javascript Vue
Webpack进阶Webpack进阶1. Dev-Serverwebpack-dev-server是使用率最高的webpack插件之一，其主要特点就是集成了打包和浏览器加载以及热更新这一套组合拳，特别是其打包后的文件是在内存中的，并不会真正生成到dist目录，避免了大量的重复磁盘读写。安装：yarn add webpack-dev-server --dev启动方式：yarn webpack-dev-server / 2020-07-17 前端学习笔记 自动化工具 javascript webpack
Webpack基础Webpack基础1. 安装很简单，主要就是webpack和webpack-cli两个模块yarn add webpack webpack-cli --dev然后就可以使用命令打包了yarn webpack默认情况下webpack会把src/index.html作为打包入口，打包结果存放在dist文件夹下2. 配置在项目根目录下添加webpack.config.js，注意这个文件默认是在node环 2020-07-17 前端学习笔记 自动化工具 javascript webpack
JS模块化模块化开发1. ES Module基本特性自动采用严格模式，忽略use strict每个ESM模块都是单独的私有作用域ESM是通过CORS去请求外部JS模块的（所以使用链接请求远程JS时要注意对方是否支持）ESM的script标签会延迟执行脚本（类似html的defer属性）如下就是在html里使用ES Module，就是把type定义为module<script type="module" 2020-07-17 前端学习笔记 javascript
自动化构建工具Gulp自动化构建工具GulpGulp作为当下最流行的前端自动化构建工具，功能强大，插件丰富而且简单易上手。虽然最近Gulp的功能被全能的Webpack蚕食了不少，很多项目已经完全依赖Webpack构建了，但Gulp本身还是非常好用的，值得一学。1. 基本使用通过yarn/npm安装gulp之后，需要配置的有两个地方，一个是gulp的入口文件gulpfile.js，另一个则是安装gulp的一系列插件gul 2020-07-09 前端学习笔记 自动化工具 javascript gulp
