vue3笔记

一、声明式渲染

声明式渲染
模板语法：就是在vue单文件里面写代码，然后通过声明式的方式将数据绑定到dom。然后被编译成js。经过优化后减少dom操作。
文本插值：{{}},
vue单文件组件：SFC，一种可复用代码组织形式。
声明式渲染：通过改变状态，触发html的更新渲染。
响应式状态：声明方式（reactive只适用于对象、数组，ref适合任何对象）

// reactive处理对象
const counter = reactive({
  count: 0
})
console.log(counter.count) // 0
// reactive处理数组
const a =reactive(['1', '2'])
a.push('1')
// ref处理字符串
const message = ref('Hello World!')
console.log(message.value) // "Hello World!"
1. 在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。
2. reactive 返回的是一个原始对象的 Proxy
3. reactive 响应式对象的属性赋值或解构，会失去响应性
4. reactive 不可以随意地“替换”一个响应式对象
5. ref 将传入参数的值包装为一个带 .value 属性的 ref 对象
6. ref 可以响应式地替换整个对象
7. ref 是模板渲染上下文的顶层属性时才适用自动“解包”
8. Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新push、pop、shift、unshift、splice、sort、reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、Attribute 绑定

v-bind

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<h1 :class="title">Make me red</h1> 
1. 绑定多个参数
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>
2. 使用 JavaScript 表达式
<div :id="`list-${id}`"></div>
3. 调用函数
{{ formatDate(date) }}
4. 动态参数
<a v-bind:[attributeName]="url"> ... </a>
5. 修饰
事件修饰符：.stop阻止冒泡,.prevent阻止默认事件,.self只触发它自己,.capture,.once,.passive
<form @submit.prevent="onSubmit">...</form>
v-model修饰符
.lazy 每次change事件后更新数据。
.number 自动转为数字。
.trim 去除前后空格。
6. class与style绑定
<div :class="{ active: isActive }"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
7. 透传 attribute 传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器, 禁用 Attributes 继承 inheritAttrs: false
<script>
// 使用普通的