![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 74
业火之理
这个作者很懒,什么都没留下…
展开
-
【vue】vue2原理总结
前言总结下vue2原理。初始化初始化过程主要就是将配置项写入$options,然后初始化data,computed watch等。属性劫持这个用Object.defineProperty地球人都知道。数组的处理是重写数组的7种方法,所以通过索引修改值不会被监听到。另外对象上直接添加属性不会响应式,需要使用set或者传入对象来触发他劫持对象使其响应式。对象上__ob__是其做的已代理标识,不可枚举,否则会导致无限递归。为什么除了根的data,其他都只能配置函数?因为使用vue.exten原创 2021-08-26 15:53:57 · 1271 阅读 · 0 评论 -
【javascrpt】vue源码中的/*#__PURE__*/是什么意思
前言浏览的时候看见源码里居然手动写/*#__PURE__*/,一般这个是没人写,倒是经过polyfill转换之后,很多代码会自然带上这个标记。既然这玩意开始有点用处,就稍微总结一下。其实除了这个标记,还有inline ,noinline之类的注释,这个就是给terser使用的。terser我们知道terser是个很强大的压缩工具,而为啥react没写pure呢,因为react使用的是googleclosure压缩工具,是个自己整的java压缩工具,跟一般的压缩方式并不相同,是一种破坏性压缩,在原创 2021-06-21 10:45:29 · 5816 阅读 · 1 评论 -
【vue】vue3原理学习总结
前言记录下学到的思路和原理reactive这个就是众所周知用proxy,然后就是几种配置项shallow,readonly什么的,对应几种配置项。其实没啥说的。依赖收集很有意思的是,如何在effect中去收集依赖,包在effect里看起来好像没做啥事,就能收集到reactive的依赖。并且,不是effect里依赖的还不会去执行。这里用了个技巧,proxy中代理的话必然会去访问属性,从而触发拦截函数,比如,我们在effect中用了 xxx.xx,那么就会在执行.xx时执行对应的拦截函数。原创 2021-06-20 15:08:24 · 153 阅读 · 1 评论 -
【vue】vue3学习笔记(三)
接上篇面包屑安装path-to-regexpcomponent/breadcrumb/index<template> <el-breadcrumb class="app-breadcrumb breadcrumb-container" separator="/"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> <span v-if=原创 2021-06-02 00:06:33 · 620 阅读 · 2 评论 -
【vue】vue3学习笔记(二)
接上篇左侧导航上一篇变量声明的d.ts文件前面的文件名需要和variables.scss的文件名一样,也就是叫variables.scss.d.ts,才可以不报错。原创 2021-05-31 23:00:39 · 893 阅读 · 1 评论 -
【vue】vue3学习笔记(一)
前言通过制作管理系统学习vue3流程需要4.5以上npm i -g @vue/cli#查看版本vue -Vvue create vue3-element-admin选手动配置除了pwa和下面2个测试,其他都选上。Vue版本选3.x关于TypeScript两个选项 都选no路由模式 使用Hash模式选择 dart-sass 预处理器选择 eslint配置 Standard选择lint to save生独立配置文件最后一项不保存为preset 选择n回车创建原创 2021-05-25 23:08:11 · 2526 阅读 · 0 评论 -
【vue】taro-vue+ts开发小程序快速上手
前言最近有个小程序项目需要用taro-vue+ts来开发,用的是vue2,正好总结一下。项目入口微信开发者工具里的编译旁边可以选择入口,要能出现在那需要配置project.config.json和project.priviate.config.json字段:"miniprogram": { "list": [ { "name": "pages/testhello/index", "pathName": "pages/test原创 2021-04-20 17:59:36 · 1194 阅读 · 4 评论 -
【vue】vue-element-admin快速上手
前言最近被逼去搞vue了,这玩意早忘光了,看了下是要搞个类似后台管理项目,看看vue-elemnt-admin学学。它还有个简易版vue-element-template,看了下缺的东西蛮多,权限路由也没写判断。Mockvue-element-admin里的mock是nodejs整的服务,甩到了dev-server里。需要关闭就把before: require('./mock/mock-server.js')这玩意给注释了就行。如果调用是mock接口,那么启动控制台会显示invoke xx原创 2021-01-26 00:22:42 · 992 阅读 · 1 评论 -
【VUE】手写个VUEX(二)
接上篇上篇实现了一个store的4个属性,本篇实现module,plugins。首先看一下module功能。store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name:'yehuo' }, mod...原创 2019-11-03 08:38:26 · 221 阅读 · 0 评论 -
【VUE】手写一个VUEX(一)
背景上一篇写了vue组件通信的各种方式,可以发现在兄弟间传递比较方便的方式就是bus了,但是得考虑组件到底谁先谁后挂载或者谁监听了之类的问题,这篇来通过手写来学习vuex怎么解决bus痛点的。准备工作...原创 2019-10-31 08:03:41 · 855 阅读 · 0 评论 -
【VUE】VUE组件间数据传递的总结与思考
背景vue组件数据通信是比较重要的,理清楚方法后基本使用起来没啥问题了。由于方法特别多,所以需要好好整理一下,再合适的场景采取合适的方法才是最重要的。准备工作迅速测试父子组件就弄个App.vue和child.vueApp.vue<template> <div> <mychild></mychild> ...原创 2019-10-29 09:04:17 · 341 阅读 · 0 评论 -
【VUE】用vue写一个轮播图组件(二)
接上篇先总结下上篇技巧:提供一个v-model进行父子组件间数据交换。使用vue内置动画实现移动的动画效果。另外用watch监控value的变动来显示子组件变化。这次要实现的功能:完成可以正序播放和逆序播放功能。完成鼠标移入停止,移出继续轮播功能。加入轮播图小点功能,点击小点可以切换轮播页面。建立index.html支持手机端大小。加入轮播图左右按钮,可左右切换轮播。代码...原创 2019-10-28 04:18:36 · 842 阅读 · 0 评论 -
【VUE】用vue写一个轮播图组件(一)
背景手写个组件算是基础操作,懂得原理后可以自己手写或者拿别人的组件进行修改。思路用vue写轮播图主要就是靠vue动画。轮播效果靠v-if与设置下一个div的位置。流程先建立基本的框架,swiper.vue swiperItem.vue App.vueApp.vue中写用户自己的内容,swiperItem为swiper.vue的子组件,用来放轮播项。App.vue<...原创 2019-10-27 05:06:33 · 6508 阅读 · 1 评论 -
【VUE】安装笔记
为了防止以后哪天忘记了记的笔记。CDN引入和标签引入就不写了。主要是npm安装如果不需要cli那就npm i vue即可。需要cli就npm install -g @vue/cli(最新是4)(安装npm install -g @vue/cli@33版本。)需要用快速原型开发的server就安装npm install -g @vue/cli-service-global(npm insta...原创 2019-10-25 00:30:01 · 110 阅读 · 1 评论 -
【VUE】手写一个VUE虚拟dom diff算法
背景这个写起来有点麻烦,难度还行,一步步总结一下。流程一、 准备工作先建个html和一个js文件。让html引入这个js文件。二、渲染vnode到页面const root = document.querySelector('#root');const vnode = h('ul', { id: 'container' },h('li', { style: { backg...原创 2019-10-23 03:28:25 · 775 阅读 · 3 评论 -
【VUE】手写vue对数据监控原理
背景前面有篇文章写了个对所有对象增加get与set操作,这个只是在那基础上加几行代码。代码let arrayProto = Array.prototype//改写let proto = Object.create(arrayProto)//相当于沿着这个对象__proto__可以找到Array上的方法。;['push','split','unshift'].forEach(met...原创 2019-10-20 04:19:48 · 357 阅读 · 0 评论