vue3-ref、reactive、toRefs响应式引用
2021-12-04 本文已影响0人
编程小橙子
vue.jpg
ref、reactive响应式引用引用
<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// ref、reactive 响应式的引用
// 原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新
// ref处理基础类型的数据
// reactive处理非基础类型的数据
const app = Vue.createApp({
// template: `<div>{{nameObj.name}}</div>`,
template: `<div>姓名:{{name}},年龄:{{age}}</div>`,
// created 实例被完全初始化之前
setup(props, context) {
// const { ref } = Vue;
// // proxy，'hello'变成proxy({value:'hello'})的响应式引用
// let name = ref("hello");
// setTimeout(() => {
// name.value = "little-orange";
// }, 2000);
// return {
// name,
// };
const { reactive, toRefs } = Vue;
// proxy，{ name: "little-orange" }变成proxy({ name: "hello" })的响应式引用
const nameObj = reactive({ name: "little-orange", age: 23 });
setTimeout(() => {
nameObj.name = "hello";
nameObj.age = 25;
}, 2000);
const { name, age } = toRefs(nameObj); //通过toRefs转换后才可以2秒后改变name的值
return { name, age };
},
});
const vm = app.mount("#root");
</script>
</html>
vue3来了！欢迎关注。后期持续更新~~
