vue3模板语法+响应式基础

模板语法

1. disabled指令，可以用于禁用按钮

<button :disabled="isButtonDisabled">Button</button>
//:disabled是一个指令，用于根据isButtonDisabled的值来动态控制按钮的禁用状态。
使用场景：
1.防止用户重复点击按钮
2.表单验证未通过时，不能点击提交按钮
3.正在进行异步操作时，不能点击
4.操作权限控制
5.数据加载中
凡是，想禁用按钮时，就可以使用disabled指令

2. 动态绑定多个值,可以用于动态修改样式

<div v-bind="objectOfAttrs"></div>

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

// 直接修改objectOfAttrs对象中的style属性值
this.objectOfAttrs.style = 'background-color:blue';
//此时修改objectOfAttrs里style的值，就可以直接使背景从绿色修改为蓝色

使用场景：
1.根据不同条件切换样式
2.响应式布局适配
3.组件复用与定制

3. 动态参数

//在指令参数上
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>


//动态的事件名称上
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>

响应式基础

1. ref支持任何类型的值，reactive只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)

2. DOM更新不是同步的，vue会在“next tick”更新周期中缓冲所有状态的修改，以确保不管进行多少次修改，都只会被更新一次

3. 如果ref值的类型是复杂类型，在更新里面的值时，如果只更新里面的某一个值时，是不会触发更新的，需要让整个值更新才会触发更新。

const shallowArray = shallowRef([
  /* 巨大的列表，里面包含深层的对象 */
])

// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value = [...shallowArray.value, newObject]

// 这不会触发更新...
shallowArray.value[0].foo = 1
// 这才会触发更新
shallowArray.value = [
  {
    ...shallowArray.value[0],
    foo: 1
  },
  ...shallowArray.value.slice(1)
]

但是如果是reactive就可以直接更新。

<button @click="state.count++">
  {{ state.count }}
</button>


import { reactive } from 'vue'

const state = reactive({ count: 0 })