如何理解vue中的v-bind?

时间: 2020-01-24阅读: 16标签: vue

如果你写过vue,对v-bind这个指令一定不陌生。
下面我将从源码层面去带大家剖析一下v-bind背后的原理。

会从以下几个方面去探索:

  • v-bind关键源码分析

    • v-bind化的属性统一存储在哪里:attrsMap与attrsList
    • 绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr
  • v-bind如何处理不同的绑定属性

    • v-bind:key源码分析
    • v-bind:title源码分析
    • v-bind:class源码分析
    • v-bind:style源码分析
    • v-bind:text-content.prop源码分析
    • v-bind的修饰符.camel .sync源码分析


v-bind关键源码分析

v-bind化的属性统一存储在哪里:attrsMap与attrsList

<p v-bind:title="vBindTitle"></p>

假设为p标签v-bind化了title属性,我们来分析title属性在vue中是如何被处理的。

vue在拿到这个html标签之后,处理title属性,会做以下几步:

  • 解析HTML,解析出属性集合attrs,在start回调中返回
  • 在start回调中创建ASTElement,createASTElement(... ,attrs, ...)
  • 创建后ASTElement会生成attrsList和attrsMap

至于创建之后是如何处理v-bind:title这种普通的属性值的,可以在下文的v-bind:src源码分析中一探究竟。

解析HTML,解析出属性集合attrs,在start回调中返回
  function handleStartTag (match) {
    ...
    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      ...
      attrs[i] = {
        name: args[1],
        value: decodeAttr(value, shouldDecodeNewlines)
      }
    }
   ...
    if (options.start) {
      // 在这里上传到start函数
      options.start(tagName, attrs, unary, match.start, match.end)
    }
  }

在start回调中创建ASTElement,createASTElement(... ,attrs, ...)

// 解析HMTL
parseHTML(template, {
    ...
    start(tag, attrs, unary, start, end) {
        let element: ASTElement = createASTElement(tag, attrs, currentParent) // 注意此处的attrs
    }
})

创建后ASTElement会生成attrsList和attrsMap

// 创建AST元素
export function createASTElement (
  tag: string,
  attrs: Array<ASTAttr>, // 属性对象数组
  parent: ASTElement | void // 父元素也是ASTElement
): ASTElement { // 返回的也是ASTElement
  return {
    type: 1,
    tag,
    attrsList: attrs,
    attrsMap: makeAttrsMap(attrs),
    rawAttrsMap: {},
    parent,
    children: []
  }
}

attrs的数据类型定义

// 声明一个ASTAttr 属性抽象语法树对象 数据类型
declare type ASTAttr = {
  name: string; // 属性名
  value: any; // 属性值
  dynamic?: boolean; // 是否是动态属性
  start?: number;
  end?: number
};

绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr

getBindingAttr及其子函数getAndRemoveAttr在处理特定场景下的v-bind十分有用,也就是”v-bind如何处理不同的绑定属性“章节很有用。
这里将其列举出来供下文v-bind:key源码分析;v-bind:src源码分析;v-bind:class源码分析;v-bind:style源码分析;v-bind:dataset.prop源码分析源码分析参照。

export function getBindingAttr (
  el: ASTElement,
  name: string,
  getStatic?: boolean
): ?string {
  const dynamicValue =
    getAndRemoveAttr(el, ':' + name) ||
    getAndRemoveAttr(el, 'v-bind:' + name)
  if (dynamicValue != null) {
    return parseFilters(dynamicValue)
  } else if (getStatic !== false) {
    const staticValue = getAndRemoveAttr(el, name)
    if (staticValue != null) {
      return JSON.stringify(staticValue)
    }
  }
}
// note: this only removes the attr from the Array (attrsList) so that it
// doesn't get processed by processAttrs.
// By default it does NOT remove it from the map (attrsMap) because the map is
// needed during codegen.
export function getAndRemoveAttr (
  el: ASTElement,
  name: string,
  removeFromMap?: boolean
): ?string {
  let val
  if ((val = el.attrsMap[name]) != null) {
    const list = el.attrsList
    for (let i = 0, l = list.length; i < l; i++) {
      if (list[i].name === name) {
        list.splice(i, 1) // 从attrsList删除一个属性,不会从attrsMap删除
        break
      }
    }
  }
  if (removeFromMap) {
    delete el.attrsMap[name]
  }
  return val
}


如何获取v-bind的值

以下面代码为例从源码分析vue是如何获取v-bind的值。

会从记下几个场景去分析:

  • 常见的key属性
  • 绑定一个普通html attribute:title
  • 绑定class和style
  • 绑定一个html DOM property:textContent
vBind:{
    key: +new Date(),
    title: "This is a HTML attribute v-bind",
    class: "{ borderRadius: isBorderRadius }"
    style: "{ minHeight: 100 + 'px' , maxHeight}"
    text-content: "hello vue v-bind"
}
<div
   v-bind:key="vBind.key"
   v-bind:title="vBind.title"
   v-bind:class="vBind.class"
   v-bind:style="vBind.style"
   v-bind:text-content.prop="vBind.textContent"
 />
</div>

v-bind:key源码分析

function processKey (el) {
  const exp = getBindingAttr(el, 'key')
   if(exp){
      ...
      el.key = exp;
   }
}

processKey函数中用到了getBindingAttr函数,由于我们用的是v-bind,没有用:,所以const dynamicValue = getAndRemoveAttr(el, 'v-bind:'+'key');,getAndRemoveAttr(el, 'v-bind:key')函数到attrsMap中判断是否存在'v-bind:key',取这个属性的值赋为val并从从attrsList删除,但是不会从attrsMap删除,最后将'v-bind:key'的值,也就是val作为dynamicValue,之后再返回解析过滤后的结果,最后将结果set为processKey中将元素的key property。然后存储在segments中,至于segments是什么,在上面的源码中可以看到。

v-bind:title源码分析

title是一种“非vue特殊的”也就是普通的HTML attribute。

function processAttrs(el){
     const list = el.attrsList;
     ...
     if (bindRE.test(name)) { // v-bind
        name = name.replace(bindRE, '')
        value = parseFilters(value)
        ...
        addAttr(el, name, value, list[i], ...)
      }
}
export const bindRE = /^:|^\.|^v-bind:/
export function addAttr (el: ASTElement, name: string, value: any, range?: Range, dynamic?: boolean) {
  const attrs = dynamic
    ? (el.dynamicAttrs || (el.dynamicAttrs = []))
    : (el.attrs || (el.attrs = []))
  attrs.push(rangeSetItem({ name, value, dynamic }, range))
  el.plain = false
}

通过阅读源码我们看出:对于原生的属性,比如title这样的属性,vue会首先解析出name和value,然后再进行一系列的是否有modifiers的判断(modifier的部分在下文中会详细讲解),最终向更新ASTElement的attrs,从而attrsList和attrsMap也同步更新。

v-bind:class源码分析

css的class在前端开发的展现层面,是非常重要的一层。
因此vue在对于class属性也做了很多特殊的处理。

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'class')
  if (staticClass) {
    el.staticClass = JSON.stringify(staticClass)
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  if (classBinding) {
    el.classBinding = classBinding
  }
}

在transfromNode函数中,会通过getAndRemoveAttr得到静态class,也就是;在getBindingAttr得到绑定的class,也就是v-bind:即v-bind:,将ASTElement的classBinding赋值为我们绑定的属性供后续使用。

v-bind:style源码分析

style是直接操作样式的优先级仅次于important,比class更加直观的操作样式的一个HTML attribute。
vue对这个属性也做了特殊的处理。

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  if (staticStyle) {
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }
  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  }
}

在transfromNode函数中,会通过getAndRemoveAttr得到静态style,也就是12px'}";在getBindingAttr得到绑定的style,也就是v-bind:即v-bind:class={ minHeight: 100 + 'px' , maxHeight}",其中maxHeight是一个变量,将ASTElement的styleBinding赋值为我们绑定的属性供后续使用。

v-bind:text-content.prop源码分析

textContent是DOM对象的原生属性,所以可以通过prop进行标识。
如果我们想对某个DOM prop直接通过vue进行set,可以在DOM节点上做修改。

下面我们来看源码。

function processAttrs (el) {
  const list = el.attrsList
  ...
  if (bindRE.test(name)) { // v-bind
      if (modifiers) {
          if (modifiers.prop && !isDynamic) {
            name = camelize(name)
            if (name === 'innerHtml') name = 'innerHTML'
          }
       }
       if (modifiers && modifiers.prop) {
          addProp(el, name, value, list[i], isDynamic)
        }
   }
}
export function addProp (el: ASTElement, name: string, value: string, range?: Range, dynamic?: boolean) {
  (el.props || (el.props = [])).push(rangeSetItem({ name, value, dynamic }, range))
  el.plain = false
}
props?: Array<ASTAttr>;

通过上面的源码我们可以看出,v-bind:text-content.prop中的text-content首先被驼峰化为textContent(这是因为DOM property都是驼峰的格式),vue还对innerHtml错误写法做了兼容也是有心,之后再通过prop标识符,将textContent属性增加到ASTElement的props中,而这里的props本质上也是一个ASTAttr。

有一个很值得思考的问题:为什么要这么做?与HTML attribute有何异同?

  • 没有HTML attribute可以直接修改DOM的文本内容,所以需要单独去标识
  • 比通过js去手动更新DOM的文本节点更加快捷,省去了查询dom然后替换文本内容的步骤
  • 在标签上即可看到我们对哪个属性进行了v-bind,非常直观
  • 其实v-bind:title可以理解为v-bind:title.attr,v-bind:text-content.prop只不过vue默许不加修饰符的就是HTML attribute罢了

v-bind的修饰符.camel .sync源码分析

.camel仅仅是驼峰化,很简单。
但是.sync就不是这么简单了,它会扩展成一个更新父组件绑定值的v-on侦听器。

其实刚开始看到这个.sync修饰符我是一脸懵逼的,但是仔细阅读一下组件的.sync再结合实际工作,就会发现它的强大了。

<Parent
  v-bind:foo="parent.foo"
  v-on:updateFoo="parent.foo = $event"
></Parent>

在vue中,父组件向子组件传递的props是无法被子组件直接通过this.props.foo = newFoo去修改的。
除非我们在组件this.$emit("updateFoo", newFoo),然后在父组件使用v-on做事件监听updateFoo事件。若是想要可读性更好,可以在$emit的name上改为update:foo,然后v-on:update:foo。

有没有一种更加简洁的写法呢???
那就是我们这里的.sync操作符。
可以简写为:

<Parent v-bind:foo.sync="parent.foo"></Parent>

然后在子组件通过this.$emit("update:foo", newFoo);去触发,注意这里的事件名必须是update:xxx的格式,因为在vue的源码中,使用.sync修饰符的属性,会自定生成一个v-on:update:xxx的监听。

下面我们来看源码:

if (modifiers.camel && !isDynamic) {
  name = camelize(name)
}
if (modifiers.sync) {
  syncGen = genAssignmentCode(value, `$event`)
  if (!isDynamic) {
    addHandler(el,`update:${camelize(name)}`,syncGen,null,false,warn,list[i]) 
   // Hyphenate是连字符化函数,其中camelize是驼峰化函数
    if (hyphenate(name) !== camelize(name)) {
      addHandler(el,`update:${hyphenate(name)}`,syncGen,null,false,warn,list[i])
    }
  } else {
    // handler w/ dynamic event name
    addHandler(el,`"update:"+(${name})`,syncGen,null,false,warn,list[i],true)
  }
}

通过阅读源码我们可以看到:
对于v-bind:foo.sync的属性,vue会判断属性是否为动态属性。
若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。
若是动态属性,就不驼峰化也不连字符化了,通过addHandler(el, update:${name}, ...),老老实实监听那个动态属性的事件。

一句话概括.sync:.sync是一个语法糖,简化v-bind和v-on为v-bind.sync和this.$emit('update:xxx')。为我们提供了一种子组件快捷更新父组件数据的方式。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8338

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。

vue中is的作用和用法

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

一点 Vue.observable 想法

Vue 2.6.0 新增了 Vue.observable api,但最近才去尝试使用它。这东西说新也不新,因为他就是 vue 本身的功能,只是暴露出来,成为新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一样。

Vue中props知识点

如果你一直在阅读有关\\\"props\\\"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

vue有时候你不需要 $emit & $on

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广