JZTXT

vue的扫盲笔记

发布时间 2023-09-28 09:08:37作者: 小那

1.模板语法

○ Attribute

属性动态绑定多个值
  const objectOfAttrs = {
    id: 'container',
    class: 'wrapper'
  }
 
  <div v-bind="objectOfAttrs"></div>

○ 指令

  •   § v-bind 等价于 :
    <a v-bind:[attributeName]="url"> ... </a>
    <!-- 简写 -->
    <a :[attributeName]="url"> ... </a>
    eg: :href;
    注：属性名要全部小写；大写会被浏览器强制转成小写。
 
  •   § v-on 等价于 @
    <a v-on:[eventName]="doSomething"> ... </a>
    <!-- 简写 -->
    <a @[eventName]="doSomething">
    eg：@click；@focus；

2.响应式基础

○ ref()   值是被包装在特殊对象中的

  § 为什么使用带有.value的ref，而不是普通变量？
  vue的响应式系统是这样工作的，当在模板中使用了ref，然后改变这个ref时，Vue会自动检测到这个变化，并且相应的更新dom。当一个组件首次呗渲染时，vue会追踪在渲染过程稿使用的每一个ref，然后ref被修改时，他会触发组件重新渲染。
  在标准的javascript中，检测普通变量的访问或修改是行不通的，但是可以通过getter和setter方法来拦截对象属性的get和set操作。
  ref的.value属性给予了vue一个机会来检测ref何时被访问或修改。在其内部，vue在getter中执行追踪，在setter中执行触发。
  伪代码，便于理解一下。
  const myRef = {
    _value: 0,
    get value() {
      track()
      return this._value
    },
    set value(newValue) {
      this._value = newValue
      trigger()
    }
  }

○ reactive()