如何理解Vue的声明式？

Z时代
2024-02-23
分类：IT

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

js:

import { createApp } from 'vue'
createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

template:

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

请问下：
1.如何理解声明式？
是指的 template里面的 @click="count++" 和 {{ count }}吗？
2.什么是JavaScript 状态？可否理解是js变量？

回答：

什么是声明式

理解声明式之前，先说下声明的含义，平时我们说声明一个变量，声明一个函数，其本质是用一套语法去描述一个我们想要表达的对象
同理对于现代前端框架提供的 声明式 编程，所指的并不是某一个 变量或函数，它所表示的是一种编程模式，本质同样是 框架 提供了一套标准(如 jsx和 vue的模板语法) 供开发者去描述 UI
声明式在前端应用的体现其实就是这样一个函数表达式: UI = Fn(X)，这里 UI 范指 web页面，Fn 则是我们编写的声明式组件，X 指状态

例如问题中的这段 Vue模板，我们通常就说它是声明式的

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button></div>

除此之外，你可能还听说过 命令式，直接看代码吧

// app.html
<div id="app">
  <button></button>
</div>
// app.js
let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`});

把声明式和命令式对比起来看，你会发现命令式的语句通常是原生语句，而声明式都依赖于框架提供的特性。其实说白了，声明式的代码 经过编译/框架运行时 解释后，也就是一句一句的命令式的代码了。

由此可以有一个简单的结论：声明式编程本身是一种理念，一种思想，而声明式的语法往往是某个框架对命令式逻辑的上层抽象，以简洁的语法来表达原本繁琐的逻辑。

什么是状态

严格来说，状态和变量不是完全等价的，状态是变量的一个子集。通常我们把一个具备可交互性的变量称之为状态，什么叫可交互性，看一个例子

如下逻辑中，count 没有参与页面交互，仅仅是内存中的一个值，对于用户来说是无感的，通常我们不会称之为状态

let count = 0;
for(let i = 0; i < 10; i++) {
    count =+ 1;}

但如果改写成这样，count 将渲染到页面上，并且按钮点击会递增其值，并重新渲染，这时 count 参与到了与用户的交互过程中，具备了可交互性，通常就可以称为状态

let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`});

对于 状态 的解释不仅限于以上的示例，比如平常业务开发中，决定一个 modal 是否显示的变量visible 我们也会称为状态，因为 visible 的变化会引起视图变更，此类参与交互但不会直接渲染到视图上的变量，也属于此范畴。