vue
dongceha
一枚小鲜肉。努力成长为老腊肉
展开
-
Vue3.0 源码学习之静态提升
在 vue3.0 中,让人津津乐道的功能之一,就是静态提升功能了,这里就来简单学习一下这方面的源码1、表现测试地址首先来一个表面结论:那就是 带有for、if 本身节点不会被静态提升 静态提升的不仅仅是节点,还有prop属性2、源码分析一切的入口 function hoistStatic(root, context) { walk(root.children, context, new Map(), // Root node is unfortu.原创 2020-09-16 18:50:54 · 1190 阅读 · 0 评论 -
vue3.0 中的 diff 过程
简单的学习一下 vue3.0 中的 diff 过程1、patchChildren,diff 函数的入口const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => { const c1 = n1 && n1.children; const prevShapeFlag =.原创 2020-07-18 16:20:12 · 1845 阅读 · 0 评论 -
Vue2.0 响应式的执行过程 以及首次渲染的过程
vue2.0 的响应式原理网络上有很多的资源,这里就学习一下 源码中响应式的执行过程(这里还包括了 vue 首次渲染的过程)如果实在没基础的话,可以先看这一篇:实现乞丐版的 vue data + method + computed需要注意的是,defineProperty 的 get set 是这一棵大树的基石,如果在 某个步骤不理解的话,想一想这个也许你就能想明白1、vue 的 入口import { initMixin } from './init'import { st..原创 2020-07-12 20:41:23 · 1037 阅读 · 0 评论 -
Vue2.0 中模板编译的过程学习
要说vue 和 react 最大的不同之一,我肯定会说 vue 是开箱即用的,也就是有的情况下,不需要 babel 转义就能直接运行,就好像是一个高级的 jquery 包一样1、入口 $mount光光看目录的名称就可以知道,这里是和平台有关的代码,也就是运行在 浏览器的代码,这里主要是 改造 $mount 函数/* @flow */import config from 'core/config'import { warn, cached } from 'core/util/i.原创 2020-07-12 16:33:02 · 487 阅读 · 1 评论 -
vue keep-alive 内置组件与 LRU缓存机制
export default { name: 'keep-alive', abstract: true, props: { include: patternTypes, exclude: patternTypes, max: [String, Number] }, created () { this.cache = Object.create(null) this.keys = [] }, destroyed () { fo.原创 2020-06-30 22:41:49 · 1118 阅读 · 3 评论 -
vue3.0 api 的简单学习
vue3.0 出来了一段时间了,但是直到这一段时间,才想着要认真学一学,真是惭愧Vue 组合式 API1、上手下载 官方的 vue3.0 的一个包git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3cd vue3yarnyarn dev2、API 学习1、setup函数这个函数完全就是 vue3.0 的核心了,也是所有函数的入口export default {...原创 2020-06-28 21:02:41 · 1875 阅读 · 0 评论 -
vue 中 patch、patchVnode 函数(更新节点)createElm 函数 的学习
在前面的博客中,我浅薄的学习了Vue 源码中 的 diff 以及 对 key 的使用,现在 再来学习一下更加难以理解的 patch 的过程vue 在 虚拟 dom 这一块,是参照了snabbdom.js 然后在上面进行了部分的修改的,所以如果有不理解的,推荐先去学习这一个东西1、patch 函数在这一系列的函数里面,有很多的钩子函数,类似于 destory 和 create 、insert 的 钩子函数,事实上 这些 钩子函数 用户使用的时候是无知觉的,因为 这个是虚拟 dom ..原创 2020-06-27 21:52:49 · 4537 阅读 · 0 评论 -
vue-router 的学习以及实现
这里记录一下关于 vue-router 的学习,以及自己实现一个类似的东西vue-router 分为 hash 模式和 history 模式,众所周知的是,hash 模式 是利用 监听hashchange 事件来实现的,而 history 则是通过监听 popstate 事件 实现的,那么 到底是在什么时候实现监听的呢?1、创建一个 VueRouter 类,并实现内部的 事件注册let _Vueexport default class VueRouter { // 使用静态..原创 2020-06-27 20:50:03 · 344 阅读 · 0 评论 -
Vue2.x 源码中 的 diff 以及 对 key 的使用,以及和 react 之间的区别
一直不想写 vue diff 的过程,因为 这一块网络上讲的人实在是太多了,这里写了也只不过是拾人牙慧罢了,但是不写吧,又觉得心痒痒的,毕竟前面写了一篇 react 的export function isDef (v: any): boolean %checks { return v !== undefined && v !== null}function sameVnode (a, b) { return ( a.key === b.ke...原创 2020-05-29 15:32:21 · 615 阅读 · 0 评论 -
vue $emit 接收不到子组件的数据
最近碰到个问题,搞了老半天发现问题所在哭笑不得,在这里记录一下。父组件: father.vue 1 <template> 2 <child @toFather="fromChild(arr)"></child> 3 <template> 4 <script> 5 import child from 'child...原创 2018-04-17 10:56:46 · 6719 阅读 · 4 评论 -
在 vuex 中使用 vux 的 popup 数据双向绑定
在下新手,写这个只是因为 被这个搞死了好多次,记录一下store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export const store = new Vuex.Store({ state: { changeAppOpened: false }, getters: { changeApp: stat...原创 2018-03-27 13:48:15 · 4072 阅读 · 0 评论 -
v-model 处理 中文 输入法时 和 @input :value 的区别
你或许会说 没什么区别,就是@input :value 的 语法糖,最多就是 处理的逻辑多了一点但是 看一下截图中 箭头 所指的地方 // 看一下指令插入的地方 inserted (el, binding, vnode, oldVnode) { if (vnode.tag === 'select') { // #6903 if (oldVnod...原创 2020-04-07 09:48:36 · 1277 阅读 · 0 评论 -
vue $nextTick 与 MutationObserver
网络上 其实讲 nextTick 的文章五花八门,我看了也获益匪浅,但是我这段时间 看了源码之后,发现 vue 的nextTick 又有了 较大的改动/* @flow *//* globals MutationObserver */import { noop } from 'shared/util'import { handleError } from './error'impor...原创 2020-04-07 09:29:32 · 1126 阅读 · 0 评论 -
实现乞丐版的 vue data + method + computed
最近有了点空,就想着 把 vue 给搞定了,看了一遍之后,决定自己写一个乞丐版的 vue,上班的时候划水一个早上也算是 结束了index.html <div id="app"> {{age}} <p>{{name}}</p> <p>{{name}}</p> <div> ...原创 2020-03-18 14:46:26 · 276 阅读 · 0 评论 -
Vue 使用 函数调用组件 的方法
之前写过一篇react 方法组件构造 Loading 的使用,现在这篇就是 Vue 版本的 方法调用组件了组件还是 vue 组件,这个和之前是一样的Toast/Toast.vue<template> <div class="toast" v-if="show"> <div class="mask" v-if="showMask">...原创 2020-03-11 15:47:30 · 5142 阅读 · 2 评论 -
vue 初试 typescript
vue 里使用 ts 需要另外装两个包 "dependencies": { "vue-class-component": "^7.2.2", // 这个是 写 vue 的官方库 "vue-property-decorator": "^8.3.0", // 这个对vue-class-component 做了一层封装 "vuex-class": "^0.3...原创 2020-03-10 17:00:34 · 277 阅读 · 0 评论