Vue 3 - daniel-qa/Vue GitHub Wiki

Vue 3

const { createApp } = Vue;

这一行代码 const { createApp } = Vue; 是用来从 Vue.js 库中解构出 createApp 方法。

解构赋值：这段代码使用了解构赋值的语法，从 Vue 对象中提取出 createApp 方法。这样，
你可以直接使用 createApp 而不需要每次都写 Vue.createApp。

createApp 方法：createApp 是 Vue 3 中用于创建 Vue 应用实例的方法。
通过调用 createApp，你可以将你的组件和应用逻辑绑定到特定的 HTML 元素上。

简化代码：使用解构赋值可以让代码更加简洁，提高可读性。

< script setup >

const handClick =() =>{
  alert('按鍵被點擊了!');
  message.value='按鍵被點擊';  
}
  • 宣告變數的的寫法(嚮應式變數)
const message = ref("按鍵未點擊");
  • < script setup > 是 Vue 3 中引入的一种新的语法，可以更简洁地编写组件的逻辑。

组件的逻辑会被更直接地定义在 <script setup> 块中，而不需要使用 export default

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">增加</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

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

// 定义响应式变量
const title = '欢迎使用 Vue 3';
const count = ref(0);

// 定义方法
const increment = () => {
  count.value++;
};
</script>

import { ref, h } from 'vue';

  • 响应式数据：ref 创建的响应式数据在模板中使用时会自动更新。

  • 虚拟节点：h 允许你在 JavaScript 中以编程的方式创建组件和元素，适用于需要动态生成的复杂情况。

Vue 3 中，h 函数用于创建虚拟节点（VNode）, 可以在 JavaScript 直接构建组件和元素，而不需要依赖于模板。

h 函数的基本语法如下：

h(type, props, children)

type：可以是一个 HTML 标签名（如 'div'、'span'），也可以是一个组件对象。

props：一个对象，包含传递给组件或元素的属性。

children：可以是一个 VNode、字符串或数组，表示子元素。

  • 以下是一个使用 h 函数创建简单组件的示例：

vue

<template>
  <div id="app"></div>
</template>

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

const count = ref(0);

const renderCounter = () => {
  return h('div', { style: { textAlign: 'center' } }, [
    h('h1', `计数: ${count.value}`),
    h('button', {
      onClick: () => count.value++,
      style: { padding: '10px', fontSize: '16px' }
    }, '增加')
  ]);
};

// 将生成的 VNode 渲染到 #app
const app = document.getElementById('app');
app.appendChild(renderCounter().el);
</script>

响应式：在这个例子中，count 是一个响应式变量，当它的值改变时，组件的视图会自动更新。

使用 h 创建结构：我们使用 h 函数来创建一个 div，其中包含一个标题和一个按钮。按钮的点击事件会增加计数。

在 JavaScript 中渲染：你可以在 JavaScript 中动态生成和操作 VNode，然后将其插入到 DOM 中。

  • 優勢:

与逻辑分离：通过使用 h 函数，你可以将组件的逻辑和结构分开，这在某些情况下会使代码更清晰。

当需要在 JavaScript 中动态生成组件或元素时，很方便。

⚠️ **GitHub.com Fallback** ⚠️