Vue3高级API的使用
介绍
在前面的内容中，我们已经学习到了很多 Vue 3 的基础语法与一些常用的 API。
本节我们将介绍一些高级 API，带领大家进一步深入了解 Vue 3。
主要内容
●customRef()
●markRaw()
●toRaw()
●获取 DOM 元素
customRef 方法
customRef，从字面上直接理解，“自定义的 ref”，这个 API 是用来显式控制其依赖项的跟踪和更新触发的，它接收 track() 和 trigger() 作为参数。
我们可以使用这个 API 来控制视图更新时间，以及动态控制处理设置值，大家听起来可能有点迷茫，我们来看一个具体的例子吧。
现在我们新建一个名为 customRef.html 的文件，并写入下列代码：
<!--customRef.html-->
</head>
<body>
<div id="app">
<button @click="getRef">触发 get</button>
<button @click="setRef">触发 set</button>
<p>ref : {{ msg }}</p>
</div>
<script>
// 导入 customRef
const { customRef, createApp } = Vue;
const App = {
setup() {
// 显式控制其依赖项跟踪和更新触发
function TestcustomRef(value) {
return customRef((track, trigger) => {
return {
get() {
track();
// 触发 get 后，控制台打印信息
console.log('get' + value);
return value;
},
set(newValue) {
value = newValue + ' set';
// 触发 set 后，控制台打印信息
console.log('set' + value);
// 可以通过这一步控制视图更新时间
setTimeout(() => {
trigger();
}, 1000);
},
};
});
}
const msg = TestcustomRef('原始值');
const setRef = () => {
msg.value = '更新设置值';
};
const getRef = () => {
console.log(msg.value);
};
return {
setRef,
getRef,
msg,
};
},
};
createApp(App).mount('#app');
</script>
</body>
</html>我们打开页面，同时打开控制台，来直观地感受一下这个 API 的使用效果
我们看到页面打开的同时，就会触发 get()，在触发 set() 后，视图中的 msg 会在 trigger() 触发后变化，并且我们可以发现，变化后 msg 显示出来的值 set() 中重新定义的。
markRaw() 方法
markRaw() 方法标记一个对象，使其永远不会被转换为代理（Proxy），而是返回对象本身。
我们新建一个名为 markRaw.html 的文件，并在该文件中写入以下代码：
<!-- markRaw.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>markRaw</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ op }}</p>
<button @click="setmsg">set</button>
</div>
<script>
// 导入 reactive
const { isReactive, createApp, markRaw, reactive } = Vue;
const App = {
setup() {
const msg = markRaw({
value: 'markraw',
});
// 作为参照
const op = reactive({
value: 'reactive',
});
const setmsg = () => {
console.log('markRaw ' + isReactive(reactive(msg))); // false
console.log('reactive ' + isReactive(op)); // true
msg.value = '';
console.log(msg); // 一个普通对象
console.log(op); // 一个经过 Proxy 加工的响应式对象
};
return {
msg,
op,
setmsg,
};
},
};
createApp(App).mount('#app');
</script>
</body>
</html>isReactive()：当我们想要判断一个某个值是否为 reactive() 创建出来的对象，我们可以使用 isReative() 函数。
打开页面，效果如下：
toRaw() 方法
这个 API 可以使一个 proxy 只读对象或者 reactive 对象还原为普通对象，它可用于临时读取，而不会引起代理访问/跟踪开销或写入而不会触发更改。
我们来看看官网给出的代码：
toRaw() 方法
这个 API 可以使一个 proxy 只读对象或者 reactive 对象还原为普通对象，它可用于临时读取，而不会引起代理访问/跟踪开销或写入而不会触发更改。
我们来看看官网给出的代码：但是官网也贴心的给出了提醒：不建议持有对原始对象的持久性引用，需要我们谨慎使用这个 API。
获取 DOM 元素
在 Vue 3 中我们通过提供的 ref 方法定义与页面元素上 ref 相对应的一个响应式对象，同时传入一个 null。
我们创建一个名为 dom.html 的文件。
<!-- dom.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>dom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 通过 cdn 方式引入 vue.js 的最新版本 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p ref="p">获取DOM</p>
</div>
<script>
// 导入 reactive
const { createApp, ref, onMounted } = Vue;
const App = {
setup() {
const p = ref(null);
onMounted(() => {
// 初始渲染后，DOM 元素将被分配给 ref
// p.value 是原生 DOM 对象
console.log(p.value);
});
return {
p,
};
},
};
createApp(App).mount('#app');
</script>
</body>
</html>我们来看看控制台的信息
总结
本节我们主要为大家介绍了一些高级 API，我们来简单的复习一下：
●customRef，这个 API 是用来显式控制其依赖项的跟踪和更新触发的，它接收 track() 和 trigger() 作为参数。
●markRaw() 方法标记一个对象，使其永远不会被转换为代理（Proxy），而是返回对象本身。
●toRaw() 方法可以使一个 proxy 只读对象或者 reactive 对象还原为普通对象，它可用于临时读取，而不会引起代理访问/跟踪开销或写入而不会触发更改。
●Vue 3 中我们通过提供的 ref 方法定义与页面元素上 ref 相对应的一个响应式对象，同时传入一个 null，以此达到获取 DOM 元素的目的。
原文地址：https://blog.csdn.net/weixin_74009702/article/details/142901660
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！