vue系列
文章平均质量分 88
vue3的一些学习笔记
coderlin_
幸运=99%的努力+1%的运气
展开
-
深入Vue3学习(4),vue源码学习,实现miniVue
真实DOM渲染以前写html的时候都是直接编写Html代码然后浏览器解析成dom树,再渲染到页面虚拟DOM的优势很多框架都会引入虚拟dom对真实的dom进行抽象,有很多好处其一: 可以对真实的元素节点进行抽象,抽象成vNode,方便后续进行各种操作,因为直接操作DOM是有很多限制的,比如diff算法,clone的,而vnode是一个虚拟节点,也就是一个对象,在虚拟节点上可以使用js来操作这些,非常方便,比如对虚拟节点进行diff算法就比dom上方便很多。(虚拟节点可以通过js进行很多方便的操作)跨原创 2021-08-08 13:13:57 · 375 阅读 · 0 评论 -
vue3项目起步之代码规范,element-plus axios集成
.editorconfig文件这个可以在多人协作的情况下保持一些规范vscode的话需要借助这个插件2 prettier借助这个插件可以快速地让你的代码变好看(默认)我们想借助命令行的格式化就得安装包了npm install prettier -D如果我们想搭配自己的格式,就得创建一个文件这个就是我们配置的prettier的风格。执行npm run preitter就会所有文件都格式化。eslinteslint的配置文件但是这些规范根preitter不兼容,所以要np原创 2021-08-13 08:35:49 · 327 阅读 · 0 评论 -
vue3.0
vue3更快1表示动态文本变化。2表示clss变化等等。创建环境或者通过vue-ui去创建项目建议安装两个插件 eslint(格式) vetur(引导)原创 2020-11-18 15:19:50 · 2370 阅读 · 0 评论 -
vue2.x音乐P项目实战
小试牛刀先通过搜索获取歌单,在点击将id传过去获取哥源。赋给src双向绑定到video。实现播放。快速原型开发在node.js环境下运行 vue serve 文件名.vue就可。element在对element-ui框架加事件的时候,要在事件后面加上.native,因为element里面也算组件。不然不成功的。封装axios在任何vue文件都可以通过this.$request来发送网络请求。...原创 2020-11-22 00:21:03 · 258 阅读 · 3 评论 -
深入学习vue3(8) 自定义插件指令
自定义插件我们可以借助Moment转化成对应的格式原创 2021-08-28 11:33:17 · 443 阅读 · 0 评论 -
vue 修改删除重新渲染数据问题
一般删除修改是一个异步操作,当我们修改数据的时候希望修改完再从数据库取出渲染,这其中就会出现一些异步操作,导致效果往往跟我们想像不同,比如,这是添加成功后需要重新获取数据并且重新分配页面,重新获取数据这是异步操作,我们将他设为异步A,分页这是同步操作,我们设为同步B。如果按照我们所想,先去调用getinfo函数,获取数据,然后通过调用handPageChenk来设置分页,理论上是没错的。但是,发送请求是异步操作,也就是说,它会先执行同步B,在执行异步A,就是先分页了,再重新获取数据,那这样分页的数原创 2020-12-08 11:07:12 · 2517 阅读 · 0 评论 -
邂逅vue3(1) composition api基本使用
初识vue3本来想一头埋进react不回头了,后面被安排到负责一个vue2的项目,又做回老本行,趁这个时机,顺便好好学习vue3,也可以发现vue2与vue3的区别。vue3的变化1 源码变化首先就是vue3已经全面支持ts了,并且源码是使用ts进行了重构。2 性能变化学过vue2的同学应该知道vue2使用的是object.defineProperty来劫持数据的getter和setter方法。这种方式存在一个致命缺陷就是当给对象添加或者删除属性的时候是无法劫持和监听的,相信这点大家深有体会,给原创 2021-07-06 13:39:57 · 863 阅读 · 3 评论 -
Vue 源码 模拟Vue2 实现数据劫持Observer 以及数据修改更新视图
定义一个Observer类,将数据传进去监听一个个取出来,给data里面的每个之进行监听创建一个Wathcer类,用来创建监听者每个watcher都有一个update方法,方便调用取修改数据。创建一个Dep类 收集所有依赖者,创建Observer与Watcher的联系。一开始Complie更新视图的时候,我们就必须相对应的创建一个watcher,接着,通过watcher里面调用data的值,去调用了get函数,这时候我们在get函数里面,通过Dep.target去获取这个watc原创 2020-12-06 15:40:58 · 326 阅读 · 0 评论 -
深入vue3学习(2)
setupsetup有两个参数 props: { data: String, }, setup(props, context) { console.log(props); },第一个参数是props,顾名思义就是获取外界传进的值,因为setup里面不能用this,因为setup的调用是在组件创建之前的,这时候组件实例还没创建生成,故不存在this。而第二个则是context参数,有三个属性attrs: 所有非props的attribute,比如父亲调用子组件时传入的属原创 2021-08-04 23:00:25 · 500 阅读 · 1 评论 -
深入vue3学习(7)+ts 封装useForm+封装useTable
nexttick官方的解释就是:将回调推迟到下一个DOM更新周期之后执行,在更改了一些数据后等待dom更新后立即使用。比如有个需求,点击按钮后修改h2的message, 在修改h2后要获取其高度。一般有三种做法:1 点击按钮后立即获取到h2的高度(X)2 在updated获取 (其他数据更改也会影响)3 在nexttick中获取。nextTick只有在这个方法里面用才有效。别的state更新的时候不会触发这个函数。只有changeMessage执行了nextTick才会执行。nextTi原创 2021-08-18 22:27:05 · 3417 阅读 · 1 评论 -
Vue 虚拟DOM,diff算法源泉 sanbbdom
1 sanbbdom是一个专注于简单性、模块化、强大特性和性能的虚拟DOM库。官网: https://github.com/snabbdom/snabbdom虚拟DOM是真实DOM转换出来的js层级对象,用来表示真实DOM得信息,diff算法是再新老虚拟DOM进行比较,以此算出更改的最小量更新,并渲染到真实DOM去。sanbbdom核心就是一个h函数,和一个patch函数,前者可以返回一个虚拟DOM节点,后者可以将虚拟DOM节点插入DOM中,这里得源码可以npm i -S snabbdom然后在n原创 2021-03-09 00:08:35 · 282 阅读 · 0 评论 -
Vue源码 模拟Vue 3 实现数据的双向绑定
主要是输入框,这时候我们需要创建于给setVal方法实时修改数据。这里如果我们绑定的是一个对象,那我们需要遍历到最底层去修改这个数据,所以取数组长度并且做一个判断,就是遍历到底的时候我给他赋值。这样就实现数据双向绑定了,数据双向绑定总结 主要是v-model,当数据影响视图可以直接利用watcher的回调函数来更新视图,当视图影响数据时,定义一个setVal方法,将最新的值与keys传进去,在里面通过修改vm.$data来修改数据,从而达到视图影响数据效果。实现代理,就是每次不用写this.$原创 2020-12-06 16:56:03 · 1040 阅读 · 0 评论 -
Vue源码 模拟Vue1(模板编译Complie的完成)
双向数据绑定个人笔记,如有错误请见谅。Vue.js的做法是采用数据劫持加发布者订阅模式,通过object.defineproperty()来劫持各个属性的getter与setter方法,setter监听值改变,getter返回改变后的值,在数据变动的时候,object.property()的set方法监听数据,通过get方法返回修改后的数据,通过Dep.notify方法通知订阅者(watcher),让订阅者去攻击视图更新数据。模拟vue代码主要实现三件事实现一个指令解析器Complie实现一个数原创 2020-12-05 19:47:20 · 164 阅读 · 0 评论 -
vue3 项目封装vuex的mapxxx, 以及封装请求库
vuex mapxxx在vue3的setup中是没有this的,所以我们可以通过vuex提供的useStore来获取store,那辅助函数mapState这些呢?应该其返回的都是函数,且在setup总并没有绑定this,自然也没有store对象,所以我们如果像vue2一样直接使用会报错。封装 mapActions我按照vue2的方式使用mapActions,会出现,$store $dispatch不存在的报错,因为setup中没有帮我们绑定this,自然拿不到this. $ store,所以才会报错,原创 2021-08-15 00:04:41 · 940 阅读 · 1 评论 -
深入Vue3学习(6)vue-router vuex
vue-routermeta属性meta属性,后续可以通过route.meta拿到里面的值。router hooks这两个就是在setup中拿到的,相当于this.$route this. $router匹配未找到路由当输入的路由在配置中没有的时候会匹配到这个component中。router-link的tagvue2的router-link可以通过tag属性,决定router-link渲染成什么形式。而vue3通过插槽:甚至可以放一个组件。router-view的作用域原创 2021-08-10 08:51:39 · 363 阅读 · 0 评论 -
vue总结
1 setupvue3的特色就是compostion api,而setup就是一个使用compostion api的地方,setup函数只会被调用一次,可以相当于beforecreated 和created生命周期,但其实setup调用时组件实例已经生成。setup(props, context),setup中不能通过this绑定实例,故只能通过第一个参数porps来接受外部组件传入的值,另一个是context,它是一个对象,最常用的属性是 emit, 用来代替this.$emit,还有attrs,用来原创 2021-08-30 22:54:49 · 195 阅读 · 0 评论 -
深入vue3学习(3)
生命周期onX onMounted(()=>{ console.log('123'); })setup没有create和beforeCreated这两个声明周期,因为这两个做的事情可以在setup中做,而其他生命周期就是onX的i形式出现。自定义hooks我们知道vue2的痛点就是逻辑都写一起了,只要业务一复杂,代码量大。vue3的好处就是能将功能拆分出来,形成每个文件,这样就将代码逻辑抽离出来,一个功能一块代码。比如我们现在做一个计数器,那么我们可以impor原创 2021-08-07 22:44:04 · 578 阅读 · 0 评论 -
全栈项目(react+ts改造b站全栈vue项目) 王者荣耀app端web管理端+node后台 上传图片问题,react富文本问题
技术: react+ts+node+express+mongodb1 上传图片问题借用antd库的upload组件,action参数是图片传去的后台地址,逻辑就是,上传图片到后台,后台暴露静态资源,然后返回url给前端即可。这里使用了express的中间件,然后引用multer这个库做处理,当我们点击上传后接着第二个中间件就可以通过req.file拿到信息接着将静态资源接口开放,然后返回url地址。这样前台就能拿到url的地址了。...原创 2021-05-20 00:20:50 · 246 阅读 · 1 评论