Vue 学习笔记
Vue小计,等3再认真学吧
eswang
这个作者很懒,什么都没留下…
展开
-
简单看看很好用的Vite
前言Vite对于前端到底需不需要打包提出了自己的观点,在某些情况下他做的确实更好。打包首先回顾一下什么是打包,从结果导向来看,打包使得开发人员所写的代码和最终运行的代码是不甚相同的两个样子,这样做有什么好处呢?在HTTP2普及之前,浏览器对于多路复用是没有啥概念的,因此我们可以选择打包成一个bundle,目的是减少大量文件并行请求支持不足的问题。在ES6普及之前,为了兼容性,可能仍然需要编译乘ES5的代码保证run everywhere。vue和react这种JS库或者MVVM框架,我们总不能原创 2020-08-13 15:08:07 · 1430 阅读 · 1 评论 -
Vue.js源码分析(六)--component vnode
Ctor前面讲vnode生成都是通过判断tag是否为string类型时的过程,当我们使用组件时情况就不一样了,这里主要是通过createComponent方法实现的。首先照常先看函数签名,由以下五个: Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Compon...原创 2020-05-04 10:23:40 · 477 阅读 · 0 评论 -
Vue.js源码分析(五)--update
_update这个方法是干什么的呢,前面我们生成了vnode,下一步就是把vnode映射到真实的DOM节点上,这里包含了初次渲染和后面的更新渲染,拿首次渲染为例,整理参数之后会去调用vm.__patch__方法,接着会去判断浏览器环境或node.js上,前者转到patch函数的调用,后者返回一个空函数,因为在服务端是不存在DOM的。让我们把目光转到patch函数上,他是createPatchF...原创 2020-05-03 23:59:45 · 316 阅读 · 0 评论 -
Vue.js源码分析(四)--createElement
前言今天开始看VNode了。原创 2020-05-02 12:20:09 · 504 阅读 · 0 评论 -
Vue.js源码分析(三)--render
render在instance的render.js里面可以找到renderMixin方法,里面定义了_render方法: const { render, _parentVnode } = vm.$options_parentVnode可以先暂时方瞎下,着重看render方法,其实就这一句: vnode = render.call(vm._renderProxy, vm.$...原创 2020-05-01 10:19:45 · 582 阅读 · 0 评论 -
Vue.js源码分析(二)--mount整体流程
$mount这一节看挂载,从有编译的运行时触发的$mount方法出发,这个函数里面只有一句话:el = el && query(el)这是用来保证el的类型的,我们来看query方法,实现的很直接,如果el是个字符串,使用querySelector拿到DOM节点,没有这个节点的话,生产环境会报错;否则返回createElement创建的DOM节点。如果不是字符串,直接返回...原创 2020-04-30 23:48:35 · 615 阅读 · 0 评论 -
Vue.js源码分析(一)--init
前言vue源码相对于React还是要简单一些的,今天开始踩这个坑,帮助我更好的去理解Vue深层的东西,也能更好的看懂Vue3吧。init首先,当我们new Vue时,会调用this._init方法,而这个方法是在initMixin里面定义的:export function initMixin (Vue: Class<Component>) { Vue.prototype._...原创 2020-04-27 08:52:10 · 416 阅读 · 0 评论 -
Vue3.0+vuex4.0尝鲜
前言做题3.0出了beta版,这一段时间使用VCA的过程中,也接触了不少3.0的特性,除了些生态相关的东西,别的体验已经很好了,今天就基于vue-cli-plugin-vue-next搭建一个工程化的Vue3.0样例。安装注意,这个插件的TS的支持还没有做好,这里我们基于JS做。yarn global add @vue/clivue create vue3-beta-js-all同...原创 2020-04-19 12:18:01 · 8165 阅读 · 1 评论 -
走一遍Vue渲染更新的流程
前言这个图估计大家都看烂了,这篇文章就从这幅图讲起。概览首先new Vue()之后会进入初始化阶段,初始化的东西有很多,如我们的常见的生命周期,事件,属性与状态,计算属性与watch,并实现数据的响应式。初始化完成之后就是挂载阶段,如果是使用template模板并且处于运行时编译的状态,那么会进行编译阶段。编译阶段由parse, optimize, generate组成,分别用来解析模...原创 2020-04-16 14:46:22 · 1417 阅读 · 0 评论 -
崎岖探索之VCA和Vuex到底怎么结合
前言最近在用VCA写个应用,收React思维的影响,有些东西写起来着实觉得不是很顺手,但是Vuex一直是我觉得比Redux要清晰的状态管理工具,直到今天用起来发现,并没有想象中那么简单。执行过程这是写的一段代码:export default { setup(_, { root }) { const store = root.$store; const router = ...原创 2020-04-14 23:38:09 · 379 阅读 · 0 评论 -
使用VCA过程中出现的几个问题(2)
前言最近在用VCA去写一些项目,出现的一些问题有的也挺烦人的,这里记录一下。setup的函数签名没了this的约束,没有见过风格良好的VCA编码规范,感觉自己的代码很松散,同时对于VCA的一些坑也是狠狠踩了。setup作为VCA最重要的入口,接收props和context两个参数,后者经常用结构的方式拿出来,最常见的有on,emit,root.$nextTick,我们可以直接如下拿到:s...原创 2020-04-13 21:07:25 · 720 阅读 · 0 评论 -
基于Vue Composition API开发一个音乐App遇到的一些问题
前言最近一直在学习如何使用Vue Composition Api,事实是自己的Vue Options Api掌握的也不是很熟练,因此开发过程中还是出现了很多问题,在此记录一下。Better-Scroll首先是和Vue关系不大的移动端滚动神器,原理很简单,我们让父容器宽高小一点,子容器宽高大一点,这样子容器就能在父容器内滚动了。对于VCA,我们往往需要拿到Ref,并在nextTick中处理,...原创 2020-04-10 10:58:04 · 504 阅读 · 0 评论 -
重学Vue(六)--VCA
前言VCA是Vue3中最重要的特性之一,和Hooks一样的函数式编程思想使得VCA可以很好的支持类型系统,更好的性能,以及更方便的开发。使用很简单,在2.x中直接作为插件即可:import Vue from 'vue';import VueCompositionApi from '@vue/composition-api';Vue.use(VueCompositionApi);使...原创 2020-04-06 12:27:18 · 1614 阅读 · 0 评论 -
重学Vue(五)--typescript
前言在vue中使用typescript是有些缺憾的,首先Vue2的类型系统并没有为Typescript做兼容,因为最开始选择的就是flow而不是TS,因此在Vue2中使用TS需要vue-property-decorator的帮助,从名字也看得出来,这里我们需要大量借助装饰器。基本使用基于TS的Vue开发是需要vue-property-decorator的辅助的,因此编程方式与JS的开发也有很...原创 2020-04-05 23:55:52 · 693 阅读 · 0 评论 -
重学Vue(四)--全家桶
前言前面裹过了下基础,响应式和一点点高级特性,下面捋一下全家桶。Vuex首先Vue-router和Vuex都是作为Vue的专属插件存在的,尤其是Vuex,和Vue的响应式原理息息相关,这也使得Vuex的上手难度远远小于Redux。首先要做的就是在main.js里面引入注册的插件,这里我们使用上面提到的两个:new Vue({ router, store, render: h ...原创 2020-04-04 22:44:30 · 178 阅读 · 0 评论 -
重学Vue(三)--一点点高级特性
前言之前走过一遍Vue基础,和React的对比去学,上手也还可以,也着实感觉到Vue在某些方面是很方便的。这篇文章主要介绍一下Vue的高级特性。slot说slot是高级特性,但是感觉平时的使用中也会带来很大的方便。slot主要分为普通的slot使用,就是在调用的子组件中插点东西,同时把插入的东西在子组件合适的位置显示出来。接着还有些别的使用,如我们想在父组件中使用子组件的数据当作插槽,如下...原创 2020-04-04 12:46:00 · 189 阅读 · 0 评论 -
重学Vue(二)--响应式
前言不同于React的不可变数据,Vue的一套响应式机制成为Vue的一套核心原则,从2.x基于Object.defineproperty到3.0即将推出的proxy和reflect,弄懂这一套还是很有必要的。2.x首先,对于2.x中的响应式原理,官网已经有很详细的解释了,这里我们抛开整个响应式流程,只从JS的角度去研究一下。let a = 2, obj = {}Object.define...原创 2020-04-03 22:40:16 · 156 阅读 · 0 评论 -
重学Vue(一)
前言因为种种原因,时隔半年,再次开始了Vue的系统学习,作为现在最火的类MVVM框架,之前前端基础一塌糊涂时就可以做出来些东西了,如今经过了各种查漏补缺各种洗礼,也更加期待通过学习这个框架进一步巩固自己的前端知识体系。模板语法当初放弃Vue的一个原因就是想用JSX更加深入到JS的编程中,中间拾起来Vue也是用JSX写点东西,在这个角度说来模板语法也是个人不是很喜欢的东西。不过所谓熟能生巧,归...原创 2020-04-03 00:49:46 · 174 阅读 · 0 评论 -
在Vue中使用jsx
前言前排警告,这不是玩具!那、还能是啥呢起因最近看到好多在Vue中使用JSX的文章,我虽然是Vue入门的,但是我对Vue的熟悉程度也只有几个V-指令和简单的传值传事件了。作为目前最受欢迎的MVVM框架,其实不学习还是有些对不住自己的。但是无奈太喜欢React,所以在Vue中能使用JSX还是能勾起很多人的好奇心的。我就是,还有么简单Demo对于vue-cli3和4创建的Vue工程,是可...原创 2020-02-10 23:15:20 · 1524 阅读 · 0 评论 -
SSR与Nuxt.js
SSR(Server Side Rendering),即服务端渲染,是前端性能优化内容的一小部分,SSR作为一项十分重要的技术,已经和我们平时的网络生活息息相关。很早以前我就看过这么一篇文章:“服务端渲染”吊打“客户端渲染”的那些事(The Benefits of Server Side Rendering Over Client Side Rendering)这篇文章是我第一次知道SSR...原创 2019-09-10 22:10:15 · 1623 阅读 · 0 评论 -
Nuxt.js学习笔记 --后端和axios
上篇文章我们简单学习了SSR和基础的Nuxt.js语法,以及一些关于Nuxt.js的路由知识,东西不多,确实让我们感受到了Nuxt.js的方便配置。也不知道为什么,虽然我个人很喜欢一些小而美的框架,比如Flask, Koa, Gin之类的,但是对于Vue和Koa基础上得以封装的Nuxt.js也感觉到不错的样子。路由和切换效果Nuxt.js的路由封装的办法挺有意思的,上文我们讲过一些简单的路...原创 2019-09-11 07:00:47 · 888 阅读 · 0 评论 -
关于Nuxt.js中axios获取后端数据会报错的巨坑分析
搞了一个上午彷佛才弄懂是哪里的原因。先说一下问题,很简单,就是axios得不到数据,各种各样的报错。开始我以为是因为第一次使用类似"async""await"等异步获取数据的方法的原因,但是一时又想不到怎么使用同步获取数据的办法验证,所以一直在查关于"asyncData"的使用方法,故而误入歧途。看一下各种修改时报错的声明,美轮美奂_nuxt_axios__WEBPACK_IMPOR...原创 2019-09-11 17:00:37 · 5102 阅读 · 2 评论 -
Nuxt.js学习笔记 --Graphql尝鲜与MongoDB连接的简单使用
众所周知,restful还是我们使用最多的api规范,也是目前业界最为流行的,随着多年的发展,这种设计模式已经非常成熟,但也有着自己的一些局限性,最容易理解的就是字段冗余。为了解决Restful设计风格的问题,facebook推出的graphql已经引起了很好的反向。就目前的情形来说,graphql其实更适合做一些大型服务,或者多端的服务,但是因为技术还没有restful一样成熟,因此本文也是...原创 2019-09-12 03:29:12 · 838 阅读 · 0 评论 -
Vue学习笔记(1)--那些年Vue遇到的BUG
入门Vue阶段常见问题原创 2019-06-13 14:30:41 · 1082 阅读 · 0 评论 -
Vue学习笔记(3) --生命周期及疑惑
Vue生命周期以及关于beforeMount()中el undefined,以至于无法获取innerHTML的问题原创 2019-07-30 23:15:03 · 290 阅读 · 0 评论 -
Vue学习笔记(4) --传值与传引用
组件,传值,传引用(父=>子),传事件(子=>父)原创 2019-08-01 11:56:40 · 945 阅读 · 0 评论 -
Vue学习笔记(2) --写一个简单的评分栏
简单的评分栏,仅特效原创 2019-07-28 10:02:06 · 259 阅读 · 0 评论 -
Vue学习笔记(5) --跨域
axios, vue, 跨域, proxytable原创 2019-08-07 15:28:36 · 200 阅读 · 0 评论 -
Vue-router and Vuex
Vue-router and vuex原创 2019-09-06 00:38:03 · 179 阅读 · 0 评论 -
一个使用auth0和vue做的登陆demo
写在前面本文主要介绍了一个demo,使用vue.js+vue-router+vuex+auth0+vuetify做的简单的登陆认证的网页。起因很简单,就是在medium看到了国外很多人都是用auth0来简化认证的过程,说实话国内很多框架的登陆插件已经十分好用了,我主要是想试一下这样做有多方便。总体来说还是可以尝试一下的,因为auth0作为一个第三方的登陆插件,对一些诸如google,fb,...原创 2019-10-09 19:36:44 · 1507 阅读 · 0 评论 -
Vue基本语句
重复字符的框图: <input v-model="greeting"> Vue的if else-if else: <div v-if="count===1"> Green </div> <div v-else-if="count===2"> Red </div> <div v-els...原创 2019-06-12 21:36:12 · 1430 阅读 · 0 评论