vue
vues
这个作者很懒,什么都没留下…
展开
-
vite项目中如何使用require的语法的问题
vite中使用reqiure语法报错的问题原创 2022-12-29 09:55:54 · 4295 阅读 · 5 评论 -
一张表搞懂js常用的18种数组方法
js的数组的常用方法原创 2022-10-28 13:41:14 · 453 阅读 · 0 评论 -
Vue3中ref与reactive的区别
ref和reactive的都是创建响应式对象原创 2022-10-28 09:59:10 · 689 阅读 · 0 评论 -
js的深拷贝
js的深拷贝原创 2022-10-23 17:49:55 · 97 阅读 · 0 评论 -
vue中的 patch的方法
vue中diff比较的方法原创 2022-10-23 16:55:58 · 757 阅读 · 0 评论 -
拷贝构造函数什么时候用到?
拷贝构造函数原创 2022-09-06 21:35:39 · 640 阅读 · 0 评论 -
vue中的provide和inject
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项是成对使用的。子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是这对选项要干的事情。...原创 2022-06-26 09:42:04 · 705 阅读 · 1 评论 -
图片懒加载的指令 vue-lazyload
v-lazyVueLazyload 懒加载的库。原创 2021-12-18 21:21:02 · 401 阅读 · 0 评论 -
vue中的指令
编译以后没有directive,v-if编译之后就是一个三元表达式。原创 2021-12-18 19:36:46 · 234 阅读 · 0 评论 -
mergeOptions 这可是vue中常用的合并对象方法
Vue中常用合并对象的方法// {a:1} {b:2} Object.assisn()function isObject(val){ return typeof val=='object' && val !==null;}function mergeOptions(parent,child){ const options={}; for(let key in parent){ mergeField(key); } fu.原创 2021-08-16 21:24:20 · 1245 阅读 · 1 评论 -
vue3的computed.ts
vue3的computed.tsimport { effect } from './effect';class ComputedRefImpl { public _dirty = true; public _value; public effect; constructor(getter, public setter) { //ts中默认不会挂在this上 this.effect = effect(() => { //计算属性 默认会产.原创 2021-03-15 00:37:29 · 2055 阅读 · 0 评论 -
vue中的compiler
1、generate.jsconst defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; //{{aaa}}export function generate(el) { console.log("-----------", el); //遍历树 将树拼接成字符串 let children = genChildren(el); let code = `_c("${el.tag}",${ el.attrs.length ? genPro.原创 2021-03-07 13:45:58 · 877 阅读 · 0 评论 -
vue-compiler-render.js
export function renderMixin(Vue) { Vue.prototype._c = function (tag, data, ...children) { //createElement return createElement(this, ...arguments); console.log(tag, data, ...children); }; Vue.prototype._v = function (text) { //creat.原创 2021-03-06 22:49:25 · 101 阅读 · 0 评论 -
vue源码的模板编译
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`; //标签名const qnameCaptrue = `((?:${ncname}\\:)?${ncname})`; //用来获取标签名 match后的索引为1的 <aa:xxx></aa:xxx>const startTagOpen = new RegExp(`^<${qnameCapture}`); // 匹配开始标签const endTag = new RegExp(`^.原创 2021-03-06 18:49:32 · 202 阅读 · 0 评论 -
vue 3.0的components.ts
export function createComponentInstance(vnode){ const instance={ vnode, type:vnode.type, props:{}, attrs:{}, slots:{}, setupState:{}, //如果setup返回一个对象,这个对象会作为setUpstate ctx:{}, isMounte.原创 2021-03-04 02:17:44 · 3754 阅读 · 1 评论 -
vue的init.js
1、initMixin(Vue)2、把模板转化成对应的渲染函数=>虚拟domimport { compileToFunction } from "./compiler/index";export function initMixin(Vue){ Vue.prototype._init=function(options){ const vm=this; vm.$options=options; initState(vm);...原创 2021-02-18 01:21:21 · 728 阅读 · 0 评论 -
vue中的计算属性computed的实现原理
1、计算属性默认不执行 Object.defineProperty =>getter只有在取值的时候才执行多次取值如果依赖的值不变化就只执行一次,是缓存的原因依赖的值变化了,需要重新执行dirty 表示这个值是不是脏的,默认是true (取值后变为false),依赖的值变化了。 dirty:true2、只能有get和set,或者只有get 不能没有setconst vm = new Vue({ computed: { ...原创 2021-02-07 11:10:31 · 708 阅读 · 0 评论 -
vue的面试题
1、请说一下响应式数据的原理//默认vue在初始化数据时,会给data中的属性使用Object.defineProperty重新定义所有属性,//当页面取到对应属性时,会进行依赖收集(收集当前组件的watcher)//如果属性发生变化会通知相关依赖进行更新操作//dep.notify()触发数据对应的依赖进行更新Object.defineProperty();2、Vue中是如何监测数组变化?//使用函数劫持的方式,重写了数组的方法//Vu...原创 2021-01-20 01:22:49 · 202 阅读 · 4 评论 -
vue中的模板编译 {{}}
1、util.js// 正则,?:匹配不捕获 不捕获当前的分组// + 至少一个// ?尽可能少匹配// 源码里的模板编译 也是基于正则的const defaultRE = /\{\{((?:.|\r?\n))+?\}\}/g;export const util = { getValue(vm,expr){ //school.name let keys=expr.split('.'); return keys.reduce((memo,current)=>原创 2021-01-07 21:57:14 · 373 阅读 · 0 评论 -
vue数组的劫持
1、array.js// 监控数组的变化// 主要要做的就是拦截用户调用的push、shift、unshift、pop、reverse、sort、splice 导致原数组发生变化// concat ...// 先获取老的数组的方法,只改写这7个方法let oldArrayProtoMethods = Array.prototype;// 拷贝的一个新的对象,可以查找到老的方法export let arrayMethods = Object.create(oldArrayProt原创 2021-01-07 20:42:19 · 760 阅读 · 0 评论 -
vue中的$attrs 和 $listeners
1、$attrs 获取组件的所有属性//$prarent$children可以直接触发儿子的事件或者父亲的事件(尽量不要使用因为你不知道父亲和儿子)防止代码不好维护//$attrs$listeners表示的是所有的属性和方法的合集//如果在props里用了,attrs里就会减少attrs是响应式的父亲变了数据也会更新//将所有属性都传递给儿子v-bind="$attrs"把这个对象分开的传递出去//v-bind="$attrs"像对象...原创 2020-12-20 11:46:59 · 820 阅读 · 1 评论 -
vue中render实现的my-menu菜单
vue中render实现的my-menu菜单export default { props:{ data:{ type:Array, default:()=>[] } }, render(){ let renderChildren=()=>{ return data.map(child=>{ return c.原创 2020-12-20 11:44:36 · 561 阅读 · 1 评论 -
Vue中的$dispatch 和 $broadcast
1、$dispatchVue.prototype.$dispatch=function (eventName,componentName,value){ let parent=this.$parent; while(parent){ if(parent.$options.name===componentName){ parent.$emit(eventName,value); return } .原创 2020-12-20 10:21:05 · 531 阅读 · 1 评论 -
vuex 上的install方法
1、mixin.jsconst applyMixin=(Vue)=>{ Vue.mixin({ beforeCreate:vuexInit })}// 组件的创建过程 是先父后子function vuexInit(){ const options=this.$options; if(options.store){ // 根实例 this.$store=options.store; }else if(op原创 2020-09-25 02:53:25 · 1582 阅读 · 0 评论 -
vuex的基本用法
1、store.jsimport Vue from "vue";import Vuex from "vuex"Vue.use(Vuex);// 跨组件通信export default new Vuex.Store({ //内部会创造一个vue实例,通信用的 state:{ // 组件的状态 new Vue(data) age:10 }, getters:{ //获取数据 计算属性 new Vue(computed).原创 2020-09-25 02:27:19 · 194 阅读 · 0 评论 -
nextTick
let queue = [];let has = {};let pending = false;function queueWatcher(watcher) { const id = watcher.id; //对watcher进行去重 if (has[id] == null) { queue.push(watcher); //并且将watcher存在队列中 has[id] = true; // 等待所有同步代码执行完毕后在...原创 2020-09-22 21:26:44 · 196 阅读 · 0 评论 -
Vue中的发布订阅模式和数据传递
1、发布订阅模式 (1)Vue中观察者模式和发布/订阅模式的区别和场景 (2)Vue中响应式数据变化就是典型的观察者模式 (3)Vue中的事件绑定就是发布订阅模式 (4) 观察者模式中观察者和被观察者是存在关联的。发布订阅模式中订阅者和发布者没有关联,所以观察者模式中包含了发布订阅模式(watcher和deep)2、数据传递/***1.vue是单向数据流*2.Vue组件间传值的方式及之间的区别*3.props和emit父组件向子...原创 2020-09-19 01:01:57 · 1466 阅读 · 0 评论 -
computed和watcher的区别
1、渲染watcher 默认是true2、用户watcher 默认是user true3、计算属性watcher 默认lazy true deps []4.watch和computed的区别? 4.1 在内部会对变量取值,computed默认不会的 4.2 computed 依赖的值不变 就不会重新执行 4.3 变量可以用于模板的渲染 watch 一般是监听数据 不会用于模板的渲染内部原理 都是通过watcher来实现的/** * 1、...原创 2020-09-19 00:09:30 · 1249 阅读 · 0 评论 -
Vue的父组件 调用子组件
1、$attrs 是为了解决什么问题出现的?应用场景有哪些? provide/inject 不能解决它能解决的问题嘛? $attrs 主要作用就是实现批量传递数据。provide/inject更适合应用在插件中,主要是实现跨级数据传递父子组件渲染的先后顺序v-bind来传递attrs的属性 v-on="$listeners"v-bind="$attrs"2、创建的时候,先创建父组件,卸载的时候,先卸载子组件调用子节点的过程:Vue.extend({}).$mount.$el...原创 2020-09-08 20:19:20 · 176 阅读 · 0 评论 -
基于vue的购物车 transition 动画效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>html,body{...原创 2020-08-28 00:50:39 · 341 阅读 · 0 评论 -
vue-router
import Vue from "vue";import VueRouter from 'vue-router';Vue.use(VueRouter);export default ()=>{ const router=new VueRouter({ mode:'history', routes:[ {path:'/',component:Foo}, {path:'/bar',component:Bar.原创 2020-08-14 00:59:25 · 131 阅读 · 0 评论 -
Vue的面试题
//1、$on和$emit实现原理/******<my-component@my-event='fb'></my-component>=>ast=>vnode**this.$emit('my-event');**//*Vue.prototype.$on=function(event:string|Array<string>,fn:Function):Component{const...原创 2020-08-11 01:05:17 · 269 阅读 · 0 评论 -
Vue中的filter过滤器的使用
/****过滤器:是将原数据进行格式化显示,而不改变原数据*方法计算属性*做一些时间格式化,加一些货币符号*全局过滤器局部过滤器*一般格式化时间会使用moment插件*/importVuefrom"vue";importmomentfrom"moment";Vue.filter('format',function(timer,formatter){//filter中没有thisreturnmo...原创 2020-07-25 01:04:03 · 274 阅读 · 0 评论 -
Vue的源码解析(二)
1、initUse(Vue):插件的使用 插件,是个函数或者对象。如果这个安装和上次是同一个,就不在安装。做了一个防止重复安装的操作 toArray 转数组。 unshift 在参数中增加构造函数,this指的肯定是Vue。 插件中就不需要让插件强依赖于Vue。2、initMixin 默认就是一个对象,把mixin和空对象进行了合并。 Vue的options和当前mixins和extends 就行合并。extends是一个,mixins是多个,一般用的...原创 2020-07-22 01:43:35 · 150 阅读 · 0 评论 -
vue的源码解析(一)
1、util对象是Vue的api,但是不建议用户使用,但是有这个api(1)warn(2)extends 合并操作,这里是util里面的extend和Vue.extends 不一样。 (3)mergeOptions 合并选项的(4)defineReactive 响应式原理2、面试常用,对象只会拦截已经存在的属性,{a:1,b:2} 不会触发视图的更新 Vue.set=set ------> observer/index.js Vue...原创 2020-07-22 00:46:22 · 4322 阅读 · 1 评论 -
Vue2.0+组件库总结
目录1、UI组件开发框架2、实用库服务端3、辅助工具4、应用实例5、Demo示例1、UI组件element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...原创 2020-06-18 01:28:31 · 2351 阅读 · 0 评论 -
vue的源码解析
一、目录结构1、src├──compiler#编译相关├──core#核心代码├──platforms#不同平台的支持├──server#服务端渲染├──sfc#.vue文件解析├──shared#共享代码core目录:包含了Vue.js的核心代码,包括内置组件、全局API封装,Vue实例化、观察者、虚拟...原创 2020-06-18 01:16:24 · 1328 阅读 · 0 评论 -
vue 实现全选和反选
1、vue实现全选和反选,使用vue的computed的set方法实现双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&.原创 2020-06-09 01:36:26 · 1497 阅读 · 0 评论 -
vue.js上传文件到后端
本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下:1、上传文件前端代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" /><...原创 2020-05-30 20:14:42 · 8206 阅读 · 0 评论 -
Vue 中使用 less 报错 Module build failed: TypeError: loaderContext.getResolve is not a function
一、less的报错1重述一下使用步骤1、安装npm install less less-loader --save2、配置,在webpack.base.conf.js 的rules 节点下新增:{ test: /\.less$/, loader: "style-loader!css-loader!less-loader"}3、使用,在 style 标签中使用 lang="less"4、编译运行,此时可能会报错:Module build failed: Ty...原创 2020-05-30 00:27:13 · 978 阅读 · 0 评论