开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

序

大大小小项目经历无数，之前都是写的vue2的项目，因为项目需要，边学边用vue3，也算能转的开，但心里一直想系统的理顺一下vue3。

看了看极客时间，掘金小课，都没有能达到心里预期的“系统学习”，于是翻了翻vue3的官方文档，刹那间感觉来了，中文文档，条例清晰，还有示例程序，粗粗看了看前几章，文档质量比vue2强太多了，完全是教科书式的文档。跟着文档学，准没错。

vue3文档地址

模板语法

这是一个完整的vue指令。

内置指令有v-on（@缩写），v-bind（:缩写），v-else，v-for，v-slot等。

属性绑定中的布尔值

当属性绑定中的值为布尔值时，一般情况下false，0，空字符串，undefined，NaN都是零值，但是对于disabled属性，空字符串不表示false，而是true，即空字符串会使能disabled属性，使相应的dom节点被冻结。

<script setup>
    const isButtonDisabled = ""
</script>

 <template>
    <button :disabled="isButtonDisabled">Button</button>
</template>

动态绑定多个属性

一般属性绑定格式如下

:属性名="属性值"

但是在vue3中可以省略属性名，属性值是一个object对象，整个object会解包成dom节点的属性属性。

:= "{key:...}"

<script setup>
    const attrs = {
        style:"color:red",
        id:"one",
    }
</script>

 <template>
    <div>
        <button :="attrs">Button</button>
    </div>
</template>

动态参数

在vue3中v-bind或者v-on后边的绑定的参数也可以是动态的即可以是一个变量。用法如下：

<a :[attributeName]="url"> ...

<a @[eventName]="doSomething">

attributeName和eventName都是一个变量，放在中括号中。

该参数只能是字符串，null时候则移除绑定。

中括号中不能是表达式，例如 ['foo' + bar]

响应式基础

响应式部分是vue3的核心部分，与vue2相比较，依赖的底层技术完全不同。

reactive基本用法

reactive是vue3中一个常用的响应式api，该api会返回一个响应式代理。参数可以是对象，数组，Map、Set 等集合类型。

<script setup>
import {reactive} from 'vue'

const state = reactive({
    count:0
})

var add = function(){
    state.count++
}

</script>

 <template>
    <div>
        <button @click="add">Add</button>
        {{state.count}}
    </div>
</template>

响应式代理 = reactive(原始对象)

同一个原始对象，会返回相同的响应式代理。

reactive里的参数如果是一个响应式代理，那么还会返回该代理。

深层次响应

在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。如下示例代码

<script setup>

import { reactive } from 'vue'

const obj = reactive({
  nested: { count: 0 },
  arr: []
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.nested.count++
  obj.arr.push(obj.nested.count)
}

</script>

 <template>
    <div>
        <button @click="mutateDeeply">Add</button>
        
        <div>
            {{obj.nested.count}}
        </div>
        <ul>
            <li v-for=" v,k in obj.arr" :key="k">
                {{k}}:{{v}}
            </li>
        </ul>
    </div>
</template>

ref 响应式变量

ref的参数可以是任何变量，但是使用时候其值的.value才是真正具有响应式的。

const count = ref(0) 
count.value ++

响应式语法糖$ref

<script setup> 
    let count = $ref(0) 
    function increment() { 
        // 无需 .value 
        count++ } 
</script> 
<template> <
    button @click="increment">{{ count }}</button> 
    </template>

vue3-基础

序