Vue的模块化开发初探
Vue的模块化开发初探
一 概述
Vue是一个渐进式JavaScript框架，可以按需引入部分功能，而不必全量引入整个框架。
二 步骤
2.1 下载必须模块
在浏览器输入：https://unpkg.com/vue@3/dist/vue.esm-browser.js，右键另存为，保存到demo.html文件同级目录下。
2.2 安装Live Server插件
在VSCode插件市场搜索Live Server并安装，如下图：
2.3 编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<div id="app">
{{ msg }}
<hr/>
{{ web }}
<hr/>
{{ number }}
</div>
<script type="module">
import { createApp, reactive, ref } from "./vue.esm-browser.js"
createApp(
{
setup() {
const number = ref(2000);
const web = reactive(
{
title: "demo",
url: "demo.com"
}
);
return {
msg: "success",
web,
number
};
}
}
).mount("#app")
</script>
</body>
</html>2.4 运行结果
在Live Server中预览：
运行结果：
三 总结
与传统开发方式不一样的是，在script标签引入了type属性，具体为： <script type="module">，在标签内使用import导入了相关函数。
createApp是vue的启动函数，返回一个应用实例。原型为：
function createApp(rootComponent: Component, rootProps?: object): App第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
- 需要在非单文件组件中使用组合式 API 时；
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
注意: 对于结合单文件组件使用的组合式 API，推荐通过
<script setup>以获得更加简洁及符合人体工程学的语法。
**ref()**接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。原型如下：
function ref<T>(value: T): Ref<UnwrapRef<T>>
interface Ref<T> {
value: T
}ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对.value的操作都将被追踪，并且写操作会触发与之相关的副作用。
如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。若要避免这种深层次的转换，请使用 shallowRef() 来替代。
reactive()返回一个对象的响应式代理。原型为：
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>- 响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性;
- 值得注意的是，当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包;
- 若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用
shallowReactive()作替代; - 返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹，因此不等于源对象，建议只使用响应式代理，避免使用原始对象。
app.mount() 将应用实例挂载在一个容器元素中。原型为：
interface App {
mount(rootContainer: Element | string): ComponentPublicInstance
}- 参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例；
- 如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下，容器元素的
innerHTML将被用作模板； - 在 SSR 激活模式下，它将激活容器内现有的 DOM 节点。如果出现了激活不匹配，那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果；
- 对于每个应用实例，mount() 仅能调用一次。
四 参考资料
4.1 Vue官方文档