跑快点跑快点-优快云博客

原创跨文件获取本地数据

方法第一行括号中的路径根据个人的需求进行修改，需要注意的是，?callback=data，这里callback后面等于的就是你在.data文件中定义的函数，名称保持一致即可。需要注意的是script.src后面的文件名字，也就是路径，需要自己对应好。在此可以直接复制代码，需要做的操作就是调用getData方法。应该看得懂吧，看不懂就直接复制，修改return中的数据即可。再看js中的访问方式（此时我引用了vue的外部依赖）在此，（‘’）中的内容可以为任何形式。...

2022-07-17 11:46:58 674

原创 Vuex状态管理器——vuex基本用法

Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。状态管理包含以下几部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。组件间通信方式回顾大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。在 Vue 中为不同的组件关系提供了不同的通信规则 VUEX介绍 Vuex

2021-11-28 10:51:08 584

原创 Vuex状态管理器——组件之间的通信

文章目录父传子：Props Down子传父：Event Up非父子组件：Event Bus父直接访问子组件：通过 ref 获取子组件简易的状态管理方案 Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。状态管理包含以下几部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。组件间通信方式回顾大多数

2021-11-27 23:31:05 629

原创 Vue 中模板编译的过程

1、缓存公共的 mount 函数，并重写浏览器平台的 mount 2、判断是否传入了 render 函数，没有则判断是否传入了 remplate,没有的话则获取 el 节点的 outerHTML 作为 template 3、调用 baseCompile 函数 4、解析器（parse）将模板字符串的模板编译转换成 AST 抽象语法树。parse 的核心就是 parseHTML 将HTML 转换为 AST 并返回，在处理 v-for,v-if,v-once 时先移除指令，然后将指令的值记录在树上 5、优化器（.

2021-11-13 17:33:44 1199 1

原创虚拟 DOM 中 Key 的作用和好处

在 v-for 的过程中，为给每一个节点设置 key 属性的作用：以便它能够每一个节点的身份，在进行比较的时候，会基于 key 的变化重新排列元素顺序。从而重用和重新排序现有元素，并且会移除 key 不存在的元素。方便让 vnode 在 diff 的过程中找到对应的节点，然后成功复用。设置 key 的好处可以减少 dom 的操作，减少 diff 和渲染所需要的时间，提升了性能。 ...

2021-11-13 17:30:33 422 1

原创 Vue 响应式原理

一，入口，initState() vm 状态的初始化，整个影响是从 init 方法中开始的，在 init 方法中，调用 initState 方法初始化状态，在 initState 方法中调用 initData(), 将 data 属性注入到 vue 实例上，并且调用 observe() 将其转化为响应式对象，observe 是响应式的入口。二，observe(value) 位于 src/core/observer/index.js，首先判断 value 是否是对象，如果不是对象直接返回，判断 val

2021-11-13 17:26:49 297 1

原创 Vue 首次渲染的过程

一，从入口文件开始定义在 src/platform/web/entry-runtime-with-compiler.js 二，Vue 初始化过程 1，首先取出 Vue 的 $mount 进行重写，给 $mount 增加新的功能 // src/platform/web/entry-runtime-with-compiler.js // 保留 Vue实例的 $mount 方法 const mount = Vue.prototype.$mount Vue.prototype.$mount = f

2021-11-13 17:24:31 1632 1

原创 Diff 算法的执行过程&&数据响应式&&模拟router&&Snabbdom

1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。 let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } } }) 不是响应式的 let vm = new Vue({

2021-10-31 11:10:08 285 1

原创 webpack 学习笔记

一、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程 1、初始化项目，初始化参数：根据用户配置的不同参数 2、初始化参数，根据用户在命令窗输入的参数，以及 webpack.config.js 的配置，得到最后的配置 3、开始编译，根据上一步得到的最后的配置参数，初始化得到一个 compiler 对象，注册所有的插件 plugin ,插件开始监听 webpack 的构建过程，不同的环节会对应相应的处理然后开始执行编译。 3、确定入口，根据 webp

2021-10-01 20:50:54 296 1

原创 JS 函数式编程

是

2021-08-28 18:13:50 2843

原创 JS 模块化开发

文章目录CommonJS规范ES Modules 的特性ESM 导入和导出ESM in Node.js CommonJS规范一个文件就是一个模块每个模块都有单独的作用域通过 module.exports 导出成员通过 require 函数载入模块 CommonJS 是以同步模式加载模块 node端： node的执行机制是在启动时加载模块。执行过程中不需要加载，只会使用到模块，因此node环境下使用commonjs没有问题浏览器端：必然导致效率低下，每次页面加载都会导致大量同步模式请求出现，

2021-08-28 18:01:45 1023

原创使用 Gulp 完成项目的自动化构建

首先 npm init 创建一个 package.json 在 package.json 里面添加一个配置项中添加 bin “bin”: { “pages-boilerplate”: “cli.js” }, 在根目录下创建一个cli.js文件，里面写下面的内容，顶格写注释(必写) #!/usr/bin/env node console.log(‘cli working!’) 在当前目录中运行npm link，会自动创建一个package-lock.json文件花括号里的name，...

2021-08-26 22:48:43 227

原创如何理解 JS异步编程、EventLoop、消息队列、宏任务、微任务

什么是JS异步编程同步编程（Synchronous）众所周知，js是运行在浏览器的脚本语言。它的作用就是用来完成页面的交互效果。也是就是 JS的DOM操作。为了防止有的在对DOM执行修改操作，有的对这个DOM执行删除操作，这时候浏览器不知道该听谁的了。为了避免这种冲突，javaScript就被设计成为了单线程工作。 javaScript中只有一个执行栈，就好比有很多人买鸿星尔克，但是只有一个收银台，所以只能一个一个的付钱，这样的好处是可以让浏览器有条不紊的运行，坏处是当遇到返回时较长的时候，后面的代码

2021-07-31 16:59:20 480

原创 vuex中的commit、dispatch于store中mutation和action的用法

建议先读文档再读次文vuex文档 computed: { ...mapState(['count']), ...mapState(['showNum']), }, methods: { ...mapMutations(['count']), ...mapActions(['subAsync']) } commit的作用，就是调用store中某个mutation的函数。 this.$store.commit('函数名'，入参) dispatch的作用，专门用来触发acti

2021-01-24 17:08:50 2599

原创 Vue-router安装及使用&切换

Vue-router安装及使用 1、安装：npminstallvue-router或cnpminstallvue-router或yarnaddvue-router 2、在新建router.js中引用如下代码（router.js建立在src文件夹下） importVuefrom'vue' importVueRouterfrom'vue-router' Vue.use(VueRouter) 3、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue <temp

2020-07-24 14:02:06 402 1

weixin_46261261的博客