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對數據進行封裝滚澜，當數據變化時，觸發(fā)模板等內容的更新
// 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來了！歡迎關注塘淑。后期持續(xù)更新~~
