Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_前端框架

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_组合式_02


目录

  • 让我们一起走向未来
  • 单文件组件和组合式API的经典小例子
  • 创建Vue应用
  • 安装node.js
  • 安装指令
  • 模板语法有哪些
  • 文本插值
  • 原始 HTML
  • Attribute 绑定
  • 简写如下
  • 同名简写
  • 布尔型属性
  • 动态绑定多个值
  • 使用JavaScript表达式
  • 调用有返回值的函数
  • Directive指令
  • 动态参数（可变参数名）
  • 绑定修饰符
  • 响应式的基础
  • 声明响应式状态
  • ref()
  • 深层响应性
  • `<script setup>`标签
  • Dom的更新机制
  • reactive()
  • `ref` 和 `reactive`的不同


单文件组件和组合式API的经典小例子

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_vue.js_03

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

创建Vue应用

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_vue.js_04

安装node.js

支持Vue3的最低版本：18.3

安装指令

npm create vue@latest

基本选项如下

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_vue.js_05

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

模板语法有哪些

文本插值

<span>Message: {{ msg }}</span>

原始 HTML

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute 绑定

<div v-bind:id="dynamicId"></div>
简写如下
<div :id="dynamicId"></div>
同名简写
<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>
布尔型属性

布尔型 attribute依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled就是最常见的例子之一。

<button :disabled="isButtonDisabled">Button</button>
动态绑定多个值

设定属性对象

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

绑定多个属性值

<div v-bind="objectOfAttrs"></div>
使用JavaScript表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

但是每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。

下面是反面例子。

<!-- 这是一个赋值语句，而非表达式 -->
{{ var a = 1 }}

<!-- X,条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}
调用有返回值的函数
<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

Directive指令

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括v-bind和v-html。

v-on指令。监听DOM事件 。

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>
动态参数（可变参数名）
<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSom

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。

绑定修饰符

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_vue.js_06

响应式的基础

声明响应式状态

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_组合式_07

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

import { ref } from 'vue'

const count = ref(0)

响应式的值变化，用value来取值。

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

在模板中使用 ref 时，我们不需要附加 .value。

<div>{{ count }}</div>

可以直接在事件监听器中改变一个 ref：

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

在JavaScript中使用需要value后缀。

const increment= ()=> {
      // 在 JavaScript 中需要 .value
      count.value++
    }

为什么用ref，而不是普通变量，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

还有，可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。

深层响应性

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：

import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}
<script setup>标签

可以使用 <script setup> 来大幅度地简化代码，也就是省略setup函数：

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>
Dom的更新机制

DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API：

import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}
reactive()

Vue核心知识：组合式API、创建vue应用、模板语法、响应式基础_ref_08

另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

模板中使用

<button @click="state.count++">
  {{ state.count }}
</button>
ref 和 reactive的不同

在Vue 3中，ref 和 reactive 是响应式系统的核心API，它们都用于创建响应式数据，但用途和行为有所不同：

  1. ref：
  • ref 用于创建一个响应式的引用（reference），它包裹一个值，使得这个值是响应式的。
  • 它通常用于基本数据类型（如字符串、数字）和一些需要通过.value属性访问的复杂类型（如对象、数组）。
  • ref 接受一个参数，这个参数就是它要包装的值。
  • 在模板中使用时，Vue 会自动解包ref，所以不需要使用.value。
  • 例如：const count = ref(0)。
  1. reactive：
  • reactive 用于创建一个响应式的代理对象，它使得整个对象及其嵌套属性都是响应式的。
  • 它适用于创建复杂的数据结构，如对象和数组。
  • reactive 接受一个普通对象，并返回该对象的响应式代理。
  • 在访问或修改reactive对象的属性时，需要直接操作代理对象，不需要.value。
  • 例如：const state = reactive({ count: 0 })。

区别：

  • 使用场景：ref 适合基本数据类型和需要明确知道何时访问值的场景，而 reactive 适合复杂数据结构。
  • 访问方式：ref 创建的响应式引用需要通过.value属性访问和修改值，而 reactive 创建的响应式对象直接访问和修改属性即可。
  • 模板语法：在模板中，ref 会自动解包，而 reactive 对象的属性可以直接使用。
  • 性能：对于大型对象，reactive 可能会有更高的性能开销，因为它需要追踪对象的所有属性。而 ref 只追踪单个值。

在实际开发中，根据需要响应式的数据类型和结构选择合适的API是很重要的。