详解Vue.js3.0 组件是如何渲染为DOM的

本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的。对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起。所以,我们可以从应用的根组件为切入点。

主线思路:聚焦于一个组件是如何转变为 DOM 的。

辅助思路:

  • 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解
  • 思路每前进一步要能够得出结论
  • 尽量总结归纳出流程图

应用初始化

在 Vue.js 3.0 中,初始化一个应用的方式和 Vue.js 2.x 有差别但是差别不大(本质上都是把 App 组件挂载到 id 为 app 的 DOM 节点上),在 Vue.js 3.0 中用法如下:

import { createApp } from 'vue'
import App from './app'

const app = createApp(App)

app.mount('#app')

createApp 简化版源码

// packages/runtime-dom/src/index.ts
// 创建应用
const createApp = ((...args) => {
 // 1. 创建 app 对象
 const app = ensureRenderer().createApp(...args)

 const { mount } = app
 // 2. 重写 mount 方法
 app.mount = (containerOrSelector) => {
  // ...
 }

 return app
})

createApp 方法中主要做了两件事:

  • 创建 app 对象
  • 重写 app.mount 方法

接下来会分别看一下这两个过程都做了什么事情。

创建 app 对象

从 ensureRenderer() 着手。在 Vue.js 3.0 中有一个「渲染器」的概念,我们先对渲染器有一个初步的印象:**渲染器可以用于跨平台渲染,是一个包含了平台渲染核心逻辑的 JavaScript 对象。**接下来,我们通过简化版源码来验证这个结论:

// packages/runtime-dom/src/index.ts
// 定义渲染器变量
let renderer

// 创建一个渲染器对象
// 惰性创建渲染器(当用户只依赖响应式包的时候可以通过 tree-shaking 的方式移除核心渲染逻辑相关的代码)
function ensureRenderer() {
 return renderer || (renderer = createRenderer(rendererOptions))
}

// packages/runtime-core/src/renderer.ts
export function createRenderer(options) {
 return baseCreateRenderer(options)
}

// 创建不同平台渲染器的函数,在其内部都会调用 baseCreateRenderer
function baseCreateRenderer(options, createHydrationFns) {
 // 一系列内部函数
 const render = (vnode, container) => {
  // 组件渲染的核心逻辑
 }

 // 返回渲染器对象
 return {
  render,
  hydrate,
  createApp: createAppAPI(render, hydrate)
 }
}

可以看出渲染器最终由 baseCreateRenderer 函数生成,是一个包含 render 和createApp 函数的 JS 对象。其中 createApp 函数是由 createAppAPI 函数返回的。那 createApp 接收的参数有哪些呢?为了寻求答案,我们需要看一下 createAppAPI  做了什么事情。

// packages/runtime-core/src/apiCreateApp.ts
// 接收一个渲染器 render 作为参数,接收一个可选参数 hydrate,返回一个用于创建 app 的函数
export function createAppAPI(render, hydrate) {
 // createApp 接收两个参数:根组件对象和根组件的prop
 return function createApp(rootComponent, rootProps = null) {
  const context = createAppContext()
  const app: App = (context.app = {
   _uid: uid++,
   _component: rootComponent,
   _props: rootProps,
   _container: null,
   _context: context,
   version,
   get config() {},
   set config(v) {},
   use(plugin: Plugin, ...options: any[]) {},
   mixin(mixin: ComponentOptions) {},
   component(name: string, component?: Component): any {},
   directive(name: string, directive?: Directive) {},
   mount(rootContainer: HostElement, isHydrate?: boolean): any {
    // 创建根组件的 vnode
    const vnode = createVNode(rootComponent, rootProps)
    // 利用函数参数传入的渲染器渲染 vnode
    render(vnode, rootContainer)
    app._container = rootContainer
    return vnode.component.proxy
   },
   unmount() {},
   provide(key, value) {}
  }
 return app
 }
}

渲染器对象的 createApp 方法接收两个参数:根组件对象和根组件的prop。这和应用初始化 demo 中 createApp(App) 的使用方式是吻合的。还可以看到的是:createApp 返回的 app 对象在最初定义时包含了 _uid 、 use 、 mixin 、 component 、mount 等属性。

此时,我们可以得出结论:在应用层调用的 createApp 方法内部,首先会生成一个渲染器,然后调用渲染器的 createApp 方法创建 app 对象。app 对象中具有一系列我们在日常开发应用时已经很熟悉的属性。

在应用层调用的 createApp 方法内部创建好 app 对象后,接下来便是对 app.mount 方法重写。

重写 app.mount 方法

先看一下简化版的 app.mount  源码:

// packages/runtime-dom/src/index.ts
const { mount } = app
app.mount = (containerOrSelector): any => {
 // 1. 标准化容器(将传入的 DOM 对象或者节点选择器统一为 DOM 对象)
 const container = normalizeContainer(containerOrSelector)
 if (!container) return

 const component = app._component
 // 2. 标准化组件(如果根组件不是函数,并且没有 render 函数和 template 模板,则把根组件 innerHTML 作为 template)
 if (!isFunction(component) && !component.render && !component.template) {
  component.template = container.innerHTML
 }

 // 3. 挂载前清空容器的内容
 container.innerHTML = ''

 // 4. 执行渲染器创建 app 对象时定义的 mount 方法(在后文中称之为「标准 mount 函数」)来渲染根组件
 const proxy = mount(container)

 return proxy
}

浏览器平台 app.mount 方法重写主要做了 4 件事情:

  1. 标准化容器
  2. 标准化组件
  3. 挂载前清空容器的内容
  4. 执行标准 mount 函数渲染组件

此时可能会有人思考一个问题:为什么要重写app.mount 呢?答案是因为 Vue.js 需要支持跨平台渲染。
支持跨平台渲染的思路:不同的平台具有不同的渲染器,不同的渲染器中会调用标准的 baseCreateRenderer 来保证核心(标准)的渲染流程是一致的。

以浏览器端和服务端渲染的代码实现为例:

createApp 流程图

在分别了解了 创建 app 对象和重写 app.mount 过程后,我们来以整体的视角看一下 createApp 函数的实现:

目前为止,只是对应用的初始化有了一个初步的印象,但是还没有涉及到具体的组件渲染过程。可以看到根组件的渲染是在标准 mount 函数中进行的。所以接下来需要去深入了解标准 mount 函数。

标准 mount 函数

简化版源码

// packages/runtime-core/src/apiCreateApp.ts
// createAppAPI 函数内部返回的 createApp 函数中定义了 app 对象,mount 函数是 app 对象的方法之一
mount(rootContainer, isHydrate) {
 // 1. 创建根组件的 vnode
 const vnode = createVNode(rootComponent, rootProps)
 // 2. 利用函数参数传入的渲染器渲染 vnode
 render(vnode, rootContainer)

 app._container = rootContainer

 return vnode.component.proxy
},

createVNode 方法做了两件事:

  1. 基于根组件「创建 vnode」
  2. 在根组件容器中「渲染 vnode」

vnode 大致可以理解为 Virtual DOM(虚拟 DOM)概念的一个具体实现,是用普通的 JS 对象来描述 DOM 对象。因为不是真实的 DOM 对象,所以叫做 Virtual DOM。

我们来一起看一下创建 vnode 和渲染 vnode 的具体过程。

创建 vnode:createVNode(rootComponent, rootProps)

简化版源码(已经把分支逻辑拿掉)

// packages/runtime-core/src/vnode.ts
function _createVNode(type, props, children,
            patchFlag, dynamicProps, isBlockNode = false) {
 // 1. 对 VNodeTypes 或 ClassComponent 类型的 type 进行各种标准化处理:规范化 vnode、规范化 component、规范化 CSS 类和样式

 // 2. 将 vnode 类型信息编码为位图
 const shapeFlag = isString(type)
  ? ShapeFlags.ELEMENT
  : __FEATURE_SUSPENSE__ && isSuspense(type)
   ? ShapeFlags.SUSPENSE
   : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
     ? ShapeFlags.STATEFUL_COMPONENT
     : isFunction(type)
      ? ShapeFlags.FUNCTIONAL_COMPONENT
      : 0

 // 3. 创建 vnode 对象
 const vnode = {
  __v_isVNode: true,
  [ReactiveFlags.SKIP]: true,
  type, // 把函数入参 type 赋值给 vnode
  props,
  children: null,
  component: null,
  staticCount: 0,
  shapeFlag, // 把 vnode 类型信息赋值给 vnode
  // 还有很多属性
 }

 // 4. 标准化子节点 children
 normalizeChildren(vnode, children)

 return vnode
}

createVNode 做了 4 件事

  1. 对 VNodeTypes 或 ClassComponent 类型的 type 进行各种标准化处理
  2. 将 vnode 类型信息编码为位图
  3. 创建 vnode 对象
  4. 标准化子节点 children

细心的同学会发现:在标准 mount 函数中执行 createVNode(rootComponent, rootProps) 时,参数是根组件 rootComponent 和根组件属性 rootProps,但是在 _createVNode 在定义时函数签名的前两个参数确实 type 和 props。rootComponent 与 type 的关系是什么呢?函数名为什么差了一个 _ 呢?

首先函数名的差异,是由于在定义函数时,基于代码运行环境做了一个判断:

export const createVNode = (__DEV__
 ? createVNodeWithArgsTransform
 : _createVNode) as typeof _createVNode

其次,rootComponent 与 type 的关系我们可以从 type 的类型定义中得到答案:

function _createVNode(
 type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
 props: (Data & VNodeProps) | null = null
): VNode { }

当 createVNode把这 4 件事情做好后,会返回已经创建好 vnode,接下来做的事情是渲染 vnode。

渲染 vnode:render(vnode, rootContainer)

即使不看具体源码实现,我们其实大致可以用一句话总结出渲染 vnode 过程做了什么事情:把 vnode 转化为真实 DOM。

前文我们提过,**渲染器是一个包含了平台渲染核心逻辑的 JavaScript 对象。**渲染 vnode 正是通过调用渲染器的 render 方法做的。

// 返回渲染器对象
return {
 render,
 hydrate,
 createApp: createAppAPI(render, hydrate)
}

我们来看一下 render 函数的定义(简化版源码):**

// packages/runtime-core/src/renderer.ts
const render = (vnode, container) => {
 if (vnode == null) {
  // 如果 vnode 为 null,但是容器中有 vnode,则销毁组件
  if (container._vnode) {
   unmount(container._vnode, null, null, true)
  }
 } else {
  // 创建或更新组件
  patch(container._vnode || null, vnode, container)
 }

 // packages/runtime-core/src/scheduler.ts
 flushPostFlushCbs()

 // 缓存 vnode 节点(标识该 vnode 已经完成渲染)
 container._vnode = vnode
}

抽象来看, render 做的事情是:如果传入的 vnode 为空,则销毁组件,否则就创建或者更新组件。其中有两个关键函数:patch 和 unmount(patch、unmount 和 render 都是在baseCreateRenderer函数内部的方法)。

可以从 patch 着手,看一下是如何将 vnode 转化为 DOM 的。

patch

// packages/runtime-core/src/renderer.ts
const patch = (
 n1,
 n2,
 container,
 anchor = null,
 parentComponent = null,
 parentSuspense = null,
 isSVG = false,
 optimized = false
) => {
 // 1. 如果是更新 vnode 并且新旧 vnode 类型不一致,则销毁旧的 vnode
 if (n1 && !isSameVNodeType(n1, n2)) {
  anchor = getNextHostNode(n1)
  unmount(n1, parentComponent, parentSuspense, true)
  n1 = null
 }

 // 2. 处理不同类型节点的渲染
 const { type, ref, shapeFlag } = n2
 switch (type) {
  case Text:
   // 处理文本节点
   processText(n1, n2, container, anchor)
   break
  case Comment:
   // 处理注释节点
   break
  case Static:
   // 处理静态节点
   break
  case Fragment:
   // 处理 Fragment 元素(https://v3.vuejs.org/guide/migration/fragments.html#fragments)
   break
  default:
   if (shapeFlag & ShapeFlags.ELEMENT) {
    // 处理普通 DOM 元素
   } else if (shapeFlag & ShapeFlags.COMPONENT) {
    // 处理组件
   } else if (shapeFlag & ShapeFlags.TELEPORT) {
    // 处理 TELEPORT
   } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
    // 处理 SUSPENSE
   } else if (__DEV__) {
    warn('Invalid VNode type:', type, `(${typeof type})`)
   }
 }
}

patch 函数做了 2 件事情:

  1. 如果是更新 vnode 并且新旧 vnode 类型不一致,则销毁旧的 vnode
  2. 处理不同类型节点的渲染

在 patch 函数的多个参数中,我们优先关注前 3 个参数:

  1. n1 表示旧的 vnode,当 n1 为 null 的时候,表示是一次新建(挂载)的过程
  2. n2 表示新的 vnode 节点,后续会根据这个 vnode 类型执行不同的处理逻辑
  3. container 表示 DOM 容器,也就是 vnode 渲染生成 DOM 后,会挂载到 container 下面

以新建文本 DOM 节点为例,此时 n1 为 null,n2 类型为 Text,所以会走分支逻辑:processText(n1, n2, container, anchor)。processText 内部会去调用 hostCreateText 和 hostSetText。

hostCreateText 和 hostSetText 是从 baseCreateRenderer 函数入参 options 中解析出来的方法:

// packages/runtime-core/src/renderer.ts
const {
 insert: hostInsert,
 remove: hostRemove,
 patchProp: hostPatchProp,
 forcePatchProp: hostForcePatchProp,
 createElement: hostCreateElement,
 createText: hostCreateText,
 createComment: hostCreateComment,
 setText: hostSetText,
 setElementText: hostSetElementText,
 parentNode: hostParentNode,
 nextSibling: hostNextSibling,
 setScopeId: hostSetScopeId = NOOP,
 cloneNode: hostCloneNode,
 insertStaticContent: hostInsertStaticContent
} = options

来看看 options 是怎么来的:

// packages/runtime-core/src/renderer.ts
// 在调用 baseCreateRenderer 时,传入了渲染参数
function baseCreateRenderer(options: RendererOptions) { }

还记得前文提到的我们在哪里调用了 baseCreateRenderer 吗?

// packages/runtime-dom/src/index.ts
// 创建应用
const createApp = ((...args) => {
 // 1. 创建 app 对象
 const app = ensureRenderer().createApp(...args)

 return app
})

// packages/runtime-dom/src/index.ts
const rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps)

function ensureRenderer() {
 return renderer || (renderer = createRenderer<Node, Element>(rendererOptions))
}

// packages/runtime-core/src/renderer.ts
export function createRenderer<
 HostNode = RendererNode,
 HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
 return baseCreateRenderer<HostNode, HostElement>(options)
}

可以看到在创建渲染器时,我们调用了 baseCreateRenderer 并传入了 rendererOptions。rendererOptions 的值为extend({ patchProp, forcePatchProp }, nodeOps)。

我们如果知道了 nodeOps  中的 createText、setText 等方法做了什么事情,就清楚了某一个确定类型的 vnode 是如何转变为 DOM 的。先看一下 nodeOps 的定义:

// packages/runtime-dom/src/nodeOps.ts
export const nodeOps = {
 createText: text => doc.createTextNode(text),
 setText: (node, text) => {},
 // 其他方法
}

此时已经非常接近问题的答案了,关键是看一下 doc 变量是什么:

const doc = (typeof document !== 'undefined' ? document : null) as Document

至此,我们知道了答案:先把组件转化为 vnode,针对特定类型的 vnode 执行不同的渲染逻辑,最终调用 document 上的方法将 vnode 渲染成 DOM。**抽象一下,从组件到渲染生成 DOM 需要经历 3 个过程:创建 vnode - 渲染 vnode - 生成 DOM。

在渲染 vnode 部分,我们以一个简单的 Text 类型的 vnode 为例来找到了答案。其实在 baseCreateRenderer 中有 30+ 个函数来处理不同类型的 vnode 的渲染。 比如:用来处理组件类型的 processComponent 函数、用来处理普通 DOM 元素类型的processElement 函数等。由于 vnode 是一个树形数据结构,在处理过程中还应用到了递归思想。建议感兴趣的同学自行查看。

总结

最后,我们来做个总结:

  • 在 Vue.js 中, vnode 是对抽象事物的描述。
  • 从组件到渲染生成 DOM 需要经历 3 个过程:创建 vnode - 渲染 vnode - 生成 DOM。
  • 组件是如何转变为 DOM 的:先把组件转化为 vnode,针对特定类型的 vnode 执行不同的渲染逻辑,最终调用 document 上的方法将 vnode 渲染成 DOM。
  • 渲染器是一个包含了平台渲染核心逻辑的 JavaScript 对象,可以用于跨平台渲染。
  • 渲染器对象中的 createApp 方法,创建了一个具有 mount 方法的 app 实例。app.mount 方法中先是用根组件创建了 vnode,然后调用渲染器对象中的 render 方法去渲染 vnode,最终通过 DOM API 将 vnode 转化为 DOM。

附录

Vue.js 中使用了哪些 DOM 的方法:

  • createElement
  • createElementNS
  • createTextNode
  • createComment
  • querySelector
  • insertBefore
  • insert
  • removeChild
  • setAttribute
  • cloneNode

到此这篇关于详解Vue.js3.0 组件是如何渲染为DOM的 的文章就介绍到这了,更多相关Vue.js3.0 组件渲染为DOM 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 细说Vue组件的服务器端渲染的过程

    声明:需要读者对 NodeJs.Vue 服务器端渲染有一定的了解 现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React.Vue 等组件技术的发展,更是使这种方式深入人心. 但有一些应用,客户端渲染就会遇到一些问题了: 需要做 SEO(搜索引擎优化),但客户端渲染的 html 中几乎没有可用的信息 需要首屏快速加载,但客户端渲染一般是长时间的加载动画或者白屏 如果能把客户端渲染的组件化技术(React.Vue 等)与传统的后端渲染的

  • vue 强制组件重新渲染(重置)的两种方案

    数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

  • 解决vue同一slot在组件中渲染多次的问题

    Q:今天写公共组件的时候碰到一个奇葩的情况,slot内部需要再次调用slot,这就会导致同一slot在组件中渲染多次引发的bug A:把把父组件需要传入的dom结构作为props属性传递给slotRender,保证出来的dom结构不相同(尽管它们都是同一vnode渲染出来的) 定义一个渲染slot的组件 子公共组件调用 父公共组件调用 以上这篇解决vue同一slot在组件中渲染多次的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • Vue强制组件重新渲染的方法讨论

    有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

  • 加速vue组件渲染之性能优化

    背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { data(){ return { tableTitle:[ { label:'省份', prop:'prop' }, { label:'城市', prop:'prop' }, { label:'汇总', prop:'prop', colconfig:[ { label:'下级', prop:'prop'

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用

  • 详解Vue 单文件组件的三种写法

    JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @Component export default class Cpn extends Vue{ @Prop(Number) sum : number

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

  • 详解Vue之父子组件传值

    一.简要介绍 父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue <template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> <h2>{{msg}}</h2> </div> </template> <script> expo

  • 详解vue.js全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

  • 详解vue为什么要求组件模板只能有一个根元素

    我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解,如果有不对的地方欢迎指出. 我觉得这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一.当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm = new Vue({ el:'#ap

  • 详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 详解Vue 非父子组件通信方法(非Vuex)

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • 详解vue使用vue-layer-mobile组件实现toast,loading效果

    安装vue-layer-mobile // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0 此版本安装后启动会报错,报错提示将css里的display:box改成display:flex; 在main.js里面全局引用 import 'vue-layer-mobile/need/layer.css' import layer from 'vue-layer-

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

随机推荐