- 博客(10)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 3-3-03-Vuex 插件
Vuex 插件在学习购物车案例的时候，需要将购物车的信息存储到本地存储 localStorage 中，这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次，所以如果 mutations 太多，这种方法就显得不是很合理，所以这里可以使用 Vuex 中的插件去实现，这样会显得更加合理一些。Vuex 的插件就是一个函数。这个函数接收一个 store 的参数。在这个函数里面，我们可以定义一个函数，让它在所有的 mutations 执行结束之后再去执行。import Vue f
2020-10-26 09:51:59
97
原创 3-3-02-Vuex
Vuex概念什么是 VuexVuex 是专门为 Vue.js 设计的状态管理库Vuex 采用集中式的方式存储需要共享的状态Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享Vuex 继承到了 devtools 中，提供了 time-traval 时光旅行历史回滚功能。什么情况下使用 Vuex非必要的情况不要使用 Vuex大型的单页应用程序多个视图依赖于同一状态来自不同视图的行为需要变更同一状态核心概念、store每一个 Vuex 应用的核心就是 sto
2020-10-26 09:51:28
102
原创 3-3-01-Vue.js 组件状态管理
Vue.js 组件状态管理Vue 中最核心的两个功能分别是数据驱动和组件化。组件化可以提高开发效率和代码的可维护性。new Vue({ // state data () { return { count: 0 } }, //view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.c
2020-10-26 09:50:57
206
原创 3-2-27-Vue.js 源码阅读-模板编译-过程
Vue 模板编译-过程编译的入口文件是 src/compiler/create-compiler.js 中的 createCompilerCreator 生成的方法 complieToFunctions 。下面就简单介绍一下编译的过程吧。用于生成 render 函数的方法 compileToFunctions 是通过调用方法 createCompileToFunctionFn 生成的。export function createCompileToFunctionFn (compile: Funct
2020-10-26 09:46:43
170
1
原创 3-2-26-Vue.js 源码阅读-模板编译-概述
Vue 模板编译-概述模板编译的作用？Vue2.0 使用 vnode 描述视图以及各种交互，用户自己编写 vnode 比较复杂模板编译可以让用户只需要编写类似 HTML 的代码 - Vue.js 模板，通过编译器将模板转换为返回 vnode 的 render 函数.vue 文件会被 webpack 在构建的过程中转换为 render 函数运行时编译的前提必须是使用完整版的 Vue，它会再运行时把模板转换成 render 函数。因为多了编译器的代码，使得 Vue 的体积变大，运行的速度也
2020-10-26 09:45:27
177
1
原创 3-2-25-Vue.js 源码阅读-key
Vue 中的虚拟 DOM - keyhttps://blog.csdn.net/weixin_42695446/article/details/84680213
2020-10-26 09:44:54
96
原创 3-2-24-Vue.js 源码阅读-patch
Vue 中的虚拟 DOM - updateVue 中的 update 最终更新视图调用的方法是通过高阶函数 createPatchFunction 创建的一个 patch 函数，下面分析 patch 函数的执行过程。// 函数柯里化，让一个函数返回一个函数// createPatchFunction({ nodeOps, modules })传入平台相关的两个参数// core 中的 createPatchFunction (backend), const { modules, nodeOps }
2020-10-26 09:44:00
98
原创 3-2-23-Vue.js 源码阅读-update
Vue 中的虚拟 DOM - update通过上面的介绍知道了 vnode 的创建过程，下面分析 update 这个函数是如何将 vnode 转换成虚拟 DOM 的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DOM // _update 将生成的虚拟 DOM 转换成真实 DOM vm._upd
2020-10-26 09:43:14
100
原创 3-2-22-Vue.js 源码阅读-VNode的创建过程
Vue 中的虚拟 DOM - VNode 的创建过程通过前面 Vue 初始化过程的分析知道，Vue 的虚拟 DOM 的生成实在 lifecycle.js 中的 mountComponent 这个方法中定义的 updateComponent 这个方法完成的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DO
2020-10-26 09:40:23
150
1
原创 3-2-21-Vue.js 源码阅读-虚拟 DOM
Vue 中的虚拟 DOM什么是虚拟 DOM？虚拟 DOM 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制。为什么要使用虚拟 DOM ？避免直接操作 DOM，提高开发效率（因为不需要操作 DOM 不需要关心操作 DOM 的浏览器兼容问题）作为中间层可以跨平台（除了在 web 端使用外，还支持服务端渲染）虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视
2020-10-26 09:39:48
94
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人