Vue3 中的 v-bind 指令:你不知道的那些工作原理

  • Vue3 中的 v-bind 指令:你不知道的那些工作原理已关闭评论
  • 16 次浏览
  • A+
所属分类:Web前端
摘要

v-bind指令想必大家都不陌生,并且都知道他支持各种写法,比如<div v-bind:title=”title”>、<div :title=”title”>、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的,将title变量绑定到div标签的title属性上。本文将通过debug源码的方式带你搞清楚,v-bind指令是如何实现这么多种方式将title变量绑定到div标签的title属性上的。注:本文中使用的vue版本为3.4.19。


前言

v-bind指令想必大家都不陌生,并且都知道他支持各种写法,比如<div v-bind:title="title"><div :title="title"><div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的,将title变量绑定到div标签的title属性上。本文将通过debug源码的方式带你搞清楚,v-bind指令是如何实现这么多种方式将title变量绑定到div标签的title属性上的。注:本文中使用的vue版本为3.4.19

关注