Vue
文章平均质量分 93
Vue相关问题
leelxp
前端码农,算法差。。。
展开
-
前端主流技术栈:vue和react、angular的区别是什么
前端技术发展很快,近几年出现了很多前端技术栈,但是主流技术栈,还是以react、vue、angular为主。各有各自的优势,又有自己的不同,我们就来对比一下这三大技术栈。 react vue angular 历史 由facebook团队发布并且维护当前已经更新到16.8或者更新版本,与之前版本有来较大的区别,增加了新的功能,但是开发者无感知。react被描述为是一个构建用户界面的javascript库。被一些大公司所青睐,例如:arbin等 由尤雨溪团队维护。当前vu.原创 2020-07-21 15:36:34 · 1796 阅读 · 0 评论 -
VueRouter: VueRouter的实现原理
vue的路由,既熟悉又陌生,堪称是最熟悉的陌生人,我们在平时的开发中一直在用,但是对其原理却知道的非常少,那么他到底是如何实现切换更新视图,却又不去请求页面的呢?我们来揭晓答案。我们知道在我们配置路由的时候,我们会写这样的一行代码:const router = new Router({ mode: 'history, routes: routes // routes没有引入})所以想要了解vue-router的原理一切都要从这个new Router()创建实例开始。很明原创 2020-08-14 11:15:06 · 352 阅读 · 0 评论 -
vue源码解析:vue过滤器的点点滴滴
vue的过滤器我们并不陌生,是vue开发中最为常见的工具之一。它经常会被用来格式化模板中的文本。过滤器可以单个使用,也可以多个串联一起使用,还可以传参数使用。现在我们来谈谈vue过滤器的实现原理。用法:在双花括号插值中和在 v-bind 表达式中(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“|”符号指示。<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中.原创 2020-07-18 23:18:45 · 276 阅读 · 0 评论 -
vue源码解析:vue自定义指令的来龙去脉
我们之前说过,vue除了其内置的一些指令外,还允许自定义一些指令,自定义指令调用Vue.directive方法即可。并且被保存在vue.options中或者是组件的vm.$options中。无论是那种定义方式,都会被保存在特定的地方。那么这些自定义指令是如何生效的呢?这将是我们的重点。何时生效我们知道指令是被作为标签的属性写在模版HTML中的。所以,指令的生效必然是会在模版编译的阶段。其实,在虚拟dom渲染更新的时候,他在执行相关操作的同时,还会在每个阶段触发相应的钩子函数。下面就是虚拟dom在渲染原创 2020-07-20 17:15:42 · 507 阅读 · 0 评论 -
vue源码解析:vue内置组件keep-alive的实现原理
我们知道,keep-alive是vue中抽象的内置的组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。也就是说把一些不常变动的组件或者需要缓存的组件用<keep-alive>包裹起来,这样<keep-alive>就会帮我们把组件保存在内存中,而不是直接的销毁,这样做可以保留组件的状态或避免多次重新渲染,以提高页面性能。举个例子来说,当我们在切换一个页签的时候,希望切换的内容不会发生变化,这也就是意味着组件并..原创 2020-07-19 19:00:59 · 1086 阅读 · 0 评论 -
vue源码解析:vue全局方法之Vue.version实现原理
Vue.version看到这几个子就能明白,这个方法是干什么用的,对,你想的没有错,他就是让你获取当前使用的vue版本号,在平时的开放中我们几乎不会用到这个方法。那么vue为什么还要设计这个方法呢?那就是因为,在我们去npm等寻找安装的一些依赖包的时候,需要知道支持的vue版本是什么,所以这个时候就会用到version的方法,其原理就是读取package.json中的version字段。用法:var version = Number(Vue.version.split('.')[0])if (原创 2020-07-17 11:07:31 · 1119 阅读 · 0 评论 -
vue源码解析:vue全局方法之Vue.mixin实现原理
提到vue全局方法mixin,可能我们比较陌生,因为在平时的开发中也不建议我们去使用他。但是我们还是有必要了解一下其实现的原理。Vue.mixin( mixin )参数:{Object} mixin作用:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。原理:src/core/global-api/mixin.jsVue.mixin = function (mixin: Object) {原创 2020-07-17 17:09:00 · 659 阅读 · 0 评论 -
vue源码解析:vue全局方法之Vue.use实现原理
讲到vue的use方法这是我们再熟悉不过的了,当我们安装一些插件的时候,我们总要在vue的mine.js文件中使用Vue.use()方法。这就是use的常规操作。那么Vue.use()方法的实现原理是什么呢?Vue.use( plugin )参数:{Object | Function} plugin作用:该方法是用来安装vue插件,该方法内部会调用插件提供的install方法,并将vue实例传install方法。但是我们知道,同一个插件只会在项目中安装一次,所以,其内部还有的作用就是..原创 2020-07-17 17:44:58 · 1408 阅读 · 0 评论 -
vue源码解析:vue全局方法之Vue.directive、Vue.filter、Vue.component实现原理
之所以将directive、filter、component三个方法放到一起,是因为这三个方法实现的原理是一模一样的,在vue的源码中,也是一起实现的。Vue.directive( id, [definition] )Vue.component( id, [definition] )Vue.filter( id, [definition] )参数:{string} id {Function} [definition]作用:注册或者获取全局的指令、组件、过滤器。原理:src.原创 2020-07-17 20:04:34 · 657 阅读 · 0 评论 -
vue源码解析:vue全局方法之Vue.extend实现原理
学习vue不得不学习vue实例上得方法,extend是一个组件继承vue实例得函数,我们就来看看Vue.extend函数得实现原理是什么?用法:Vue.extend( options )参数:{Object} options作用:使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象。data选项是特例,需要注意 - 在Vue.extend()中它必须是函数。<div id="mount-point"></div>// ...原创 2020-07-17 16:12:01 · 2126 阅读 · 1 评论 -
vue源码解析:vue生命周期方法$forceUpdate方法的实现原理
在vue的内部封装了大量的api和方法供开发者调用,$forceUpdate方法是其中之一:用法:vm.$forceUpdate()作用:迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。内部原理:Vue.prototype.$forceUpdate = function () { const vm: Component = this if (vm._watcher) { vm._watcher.upda..原创 2020-07-12 15:07:53 · 2215 阅读 · 0 评论 -
vue源码解析:vue生命周期方法$destory方法的实现原理
我们知道vue生命周期的最后一个阶段是销毁阶段,那么vue会调用自己的destory函数,那么$destory函数的实现原理是什么?且往下看。用法:vm.$destroy()作用:完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发beforeDestroy和destroyed的钩子。源码:Vue.prototype.$destroy = function () { const vm: Component = this if (vm._is...原创 2020-07-12 00:24:31 · 7941 阅读 · 0 评论 -
vue源码解析:vue生命周期方法$nextTick方法的实现原理
在vue的内部封装了大量的api和方法供开发者调用,nextTick方法是其中之一:用法:vm.$nextTick( [callback] )参数:{Function} [callback]作用:将回掉延迟到下一次dom更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新。如何理解这句话呢?先看个例子:<template> <div id="example">{{message}}</div></template.原创 2020-07-10 15:39:35 · 580 阅读 · 0 评论 -
vue源码解析:vue生命周期方法$mount方法的实现原理
在vue的内部封装了大量的api和方法供开发者调用,nextTick方法是其中之一:用法:vm.$mount( [elementOrSelector] )参数:{Element | string} [elementOrSelector] {boolean} [hydrating]作用:如果Vue实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。 如果没有提供elementO...原创 2020-07-12 15:52:34 · 589 阅读 · 0 评论 -
vue源码解析:vue事件方法之$once方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$once用来监听某个自定义事件,通常会用到,那么$once的内部实现原理是什么呢?下面我们来详细说下$once:参数:{string} event {Function} callback作用:监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。原理:Vue.prototype.$once = function (event, fn) { const vm: Component = this funct原创 2020-07-13 11:11:13 · 3243 阅读 · 1 评论 -
vue源码解析:vue事件方法之$off方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$off移除事件中心里面某个事件的回调函数,通常会用到,那么$off的内部实现原理是什么呢?下面我们来详细说下$off:vm.$off( [event, callback] )参数:{string | Array<string>} event(只在 2.2.2+ 支持数组) {Function} [callback]作用:移除自定义事件监听器。如果没有提供参数,则移除所有的事件监听器; 如果只提供了事件,则移除该事件..原创 2020-07-12 23:41:02 · 4076 阅读 · 0 评论 -
vue源码解析:vue事件方法之$on方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$on用来监听自定义事件时,通常会用到,那么$on的内部实现原理是什么呢?下面我们来详细说下$on:vm.$on( event, callback )参数:{string | Array<string>} event(数组只在 2.2.0+ 中支持) {Function} callback作用:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。事例:vm.$o.原创 2020-07-12 23:28:51 · 6876 阅读 · 1 评论 -
vue源码解析:vue事件方法之$emit方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$emit在我们做子组件向父组件传值时,通常会用到,那么$emit的内部实现原理是什么呢?下面我们来详细说下$emit:vm.$emit( eventName, […args] )参数: {string} eventName 触发的事件名 [...args] 传递给事件的参数 作用: 触发当前实例上的事件。附加参数都会传给监听器回调。 内部原理:$emit也是采用了发布订阅者设计模式。Vue.prototype.$emit .原创 2020-07-12 23:01:55 · 7860 阅读 · 1 评论 -
vue源码解析:vue实例方法delete方法的实现原理
vue的响应式中,Object.defineProperty()并不能观测到对象属性的删除,所以,作者在vue的实例上添加了一个delete方法。那么就来讲讲delete方法的实现原理:vm.$delete( target, propertyName/index )参数:{Object | Array} target {string | number} propertyName/index用法:删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开Vue不..原创 2020-07-15 20:30:31 · 1377 阅读 · 0 评论 -
vue源码解析:vue实例方法之set方法的实现原理
还记得,我们在将vue响应式原理的时候说过,Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听,数组通过索引去 修改数组都是不能被检测?所以vue实现了set方法,那么实现的set方法的原理是什么呢?vm.$set( target, propertyName/index, value )参数:{Object | Array} target {string | number} propertyName/index {any} value用原创 2020-07-15 19:02:19 · 4016 阅读 · 0 评论 -
vue源码解析:vue实例方法watch方法的实现原理
vue实例方法用来监听vue实例变化的方法,我们自然会想到使用watch方法,那么watch方法如何实现呢?vm.$watch( expOrFn, callback, [options] )参数:{string | Function} expOrFn {Function | Object} callback {Object} [options] {boolean} deep {boolean} immediate 返回值:{Function} unwatch用法:观察V.原创 2020-07-16 15:16:35 · 596 阅读 · 0 评论 -
Vue源码解析:Vue生命周期之从生到死(五)
讲过了生命周期的初始化阶段(出生阶段),现在也是该走向成长了,也就是vue该进入到下一个阶段——模版编译阶段,也就是这个时候要调用vm.$mount()函数了,这个函数的调用标志着初始化的结束,下一个阶段的开始。所以,我们来讲讲vue的模版编译,其实,vue存在俩个版本,完整版和运行时版本,其区别就是有没有模版编译这一部分内容,完整版本是包含了模版编译这一部分。完整版本:vue完整版本包含了编译器,会根据template模版编译生成渲染函数的代码,源码中就是render函数。运行时版本.原创 2020-07-08 14:41:08 · 163 阅读 · 0 评论 -
Vue源码解析:Vue生命周期之从生到死(四)
之前讲到实例的事件初始化,inject等的初始化,那么接下来,我们就说说,state的初始化,也就是我们平时的state,props,methods等等的初始化。接下来就讲讲initState这个函数。// src/core/instance/state.jsexport function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(原创 2020-07-06 20:07:01 · 1237 阅读 · 0 评论 -
Vue源码解析:Vue生命周期之从生到死(三)
上俩片文章我们讲到了initLifecycle和initEvents函数,本篇是时候讲讲initInjections初始化函数了。该函数就是用来去实例化inject选项。说到inject,那就必然离不开provide,这俩是成对出现的,它们的作用是:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide:是一个对象,或者是一个返回对象的函数。inject:是一个字符串数组,或者是一个多层对象。这俩个东西,在组件中用的比较多。总结来说原创 2020-07-06 11:17:55 · 1863 阅读 · 0 评论 -
Vue源码解析:Vue生命周期之从生到死(二)
我们知道在实例初始化的时候,会调用一些初始化函数。对Vue的实例属性,数据等进行初始化操作。第一个初始化函数:initLifecycle。// src/core/instance/lifecycle.jsexport function initLifecycle (vm: Component) { const options = vm.$options // locate first non-abstract parent let parent = options.paren原创 2020-07-03 14:58:23 · 3225 阅读 · 0 评论 -
Vue源码解析:Vue生命周期之从生到死(一)
Vue的生命周期,就是在讲Vue从开始的创建,到最终的销毁,都经历了什么。从这个图中可以看到,Vue从出生到死亡,一共要经历四个阶段:初始化阶段:为Vue实例上初始化一些属性,事件以及响应式数据; 模板编译阶段:将模板编译成渲染函数; 挂载阶段:将实例挂载到指定的DOM上,即将模板渲染到真实DOM中; 销毁阶段:将实例自身从父组件中删除,并取消依赖追踪及事件监听器;vue生命周期之初始化阶段(new Vue)初始化阶段做的第一件事儿就是初始化实例,new Vue(),所以相当于创建.原创 2020-07-02 18:14:25 · 283 阅读 · 0 评论 -
Vue源码解析:模版编译之来龙去脉(三)
本篇主要讲解,vue文本的解析。话不多说,先上源码:// 源码位于 src/compiler/parser/text-parsre.jsconst defaultTagRE = /\{\{((?:.|\n)+?)\}\}/gconst buildRegex = cached(delimiters => { const open = delimiters[0].replace(regexEscapeRE, '\\$&') const close = delimiters[原创 2020-06-30 16:55:23 · 8016 阅读 · 0 评论 -
Vue源码解析:模版编译之来龙去脉(二)
上一节,我们讲了vue模版解析的大致流程,这一节,我们将细说一下模版编的具体内容是什么样子的?其实模版编译主要是html解析和文本解析。// 代码位置:/src/complier/parser/index.js/** * Convert HTML string to AST. * 将HTML模板字符串转化为AST */export function parse(template, options) { // ... parseHTML(template, { warn,原创 2020-06-30 11:24:27 · 6354 阅读 · 0 评论 -
Vue源码解析:模版编译之来龙去脉(一)
模版编译,Vue的有一大特点。我们在开发中常常会将看似html的代码都写在<template></template>标签中。说看似html代码,是因为在原生html中没有类似与v-if,v-for的一些指令。那么写在<template></template>中的代码片段为什么能被浏览器解析?说到底,还是要归功于Vue的模版编译。什么是模版编译?模版编译,就是把用户编写的类html代码将非原生代码和原生代码分离出来,经过一系列的逻辑处理,最终生成rend原创 2020-06-29 18:28:18 · 8424 阅读 · 2 评论 -
Vue源码解析:虚拟DOM加Differ算法之一锤定音(二)
上一章,我们讲过了虚拟DOM和diff算法,但是当新旧VNode中如果还有子节点的时候,就是一个比较繁琐的过程,所以我们还是拿出来单说一下。我们说过,如果新的VNode中有某个节点,而旧的VNode中没有,那么我们旧新增,如果新的VNode中没有,而旧的VNode中有,那么就将旧的VNode删除,如果新VNode中有,旧的VNode中也有,但是位置不同,那么就要移动VNode,如果新旧Vnode的位置也相同,那么旧更新。// 源码位置: /src/core/vdom/patch.jsif (i原创 2020-06-26 22:53:32 · 309 阅读 · 0 评论 -
Vue源码解析:虚拟DOM加Differ算法之一锤定音(一)
之前我们讲过,Vue的特点之一是数据驱动视图,那么今天我们来讲讲Vue的另一特点虚拟dom。虚拟Dom基础1、Vue的虚拟dom是什么?简单来讲,Vue的虚拟dom就是一个JavaScript对象,用对象的方式去描述dom的结构。<div class="a" id="b">我是内容</div>{ tag:'div', // 元素标签 attrs:{ // 属性 class:'a',原创 2020-06-25 22:49:28 · 710 阅读 · 0 评论 -
Vue源码解析:数据双向绑定(响应式)原理之别再说发布者-订阅者模式
每当去找工作面试的时候,当面试官问到vue的双向数据绑定或者响应式原理的时候,面试者总是不加思索的张口就来:采用发布者-订阅者模式。。。。。一顿神侃。真不知道是梁静茹给了你们多少勇气说出的这句话。这么说一定会被面试官认为是背过题的。那么vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起:我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢?数据:可以理解为state;驱动:这里应该是一个动词,就是操作的意思,就是render函数;视图:就是页面的UI原创 2020-06-24 15:51:13 · 1810 阅读 · 2 评论