vue(一)选项式和组合式API

vue的核心功能

声明式渲染：

响应式：能在改变时触发更新的状态

v-bind：动态绑定一些属性，例如某些class类

v-on:click   其实就是@click

v-model   是v-bind和v-on的语法糖，用于实现双向绑定

v-if="aaa"  当aaa为真值时，组件才被渲染

const 和let的区别：

import { ref, reactive } from 'vue';

// 使用 const
const count = ref(0);
count.value++; // 可以修改 ref 的值
// count = ref(1); // 错误：不能重新赋值

const state = reactive({ name: 'Alice' });
state.name = 'Bob'; // 可以修改 reactive 对象的属性
// state = reactive({ age: 20 }); // 错误：不能重新赋值

// 使用 let
let age = ref(25);
age.value++; // 可以修改 ref 的值
age = ref(30); // 可以重新赋值

let user = reactive({ name: 'Charlie' });
user.name = 'David'; // 可以修改 reactive 对象的属性
user = reactive({ age: 30 }); // 可以重新赋值

箭头函数：

选项式

使用 export default 将全局变量进行暴露，在js单页面内，使用this可以直接指向变量

组合式

类似导入包一样，每个操作都有其对应的关键字（感觉写起来更加自由）

const 定义变量。ref()将变量的值包住

function 用来定义函数