官网
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
官网链接：cn.vuejs.org/
运行环境
线上
在vue官网的演练场中，可以直接运行vue代码
CDN
在页面中直接引入以下script标签
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
Vue CLI
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。
Vite
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！
要使用 Vite 来创建一个 Vue 项目，非常简单：
$ npm init vue@latest
这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
基本原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.global.js"></script>
</head>
<body>
<div id="box"></div>
<script>
const obj = {}
const obox = document.getElementById("box")
// ------------------ vue2 --------------------
// 缺陷：无法监听数组的改变， 无法监听class改变， 无法监听Map Set结构。
/* Object.defineProperty(obj, "myname", {
get() {
console.log("get");
},
set(val) {
console.log("set", val);
// 操作dom
obox.innerHTML = val;
}
}) */
// ------------------ proxy代理 --------------------
const vm = new Proxy(obj, {
get(target, key) {
console.log("get")
return target[key]
},
set(target, key, value) {
console.log("set")
target[key] = value
obox.innerHTML = value
}
})
/*
兼容写法：
vue3 基于Proxy, ES6 Proxy,
if (支持proxy) {
// proxy进行拦截处理， 实现功能
} else {
// object.defineProtery
}
*/
</script>
</body>
</html>
