<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="root"></div>
<script>
// ref-reactive-toRefs
// ref reactive 响应式的引用
// 原理 通过 proxy 对数据进行封装 ,当数据变化时, 触发模板等内容的更新
// ref 只适合处理 基础的类型数据
// reactive 处理非基础类型的数据
var app = Vue.createApp({
// 1
// template:`
// <div > {{name}} </div>
// `,
// 2
// template:`
// <div > {{nameObj.name}} </div>
// `,
// 3
// template:`
// <div > {{nameObj}} </div>
// `,
// 4
template:`
<div > {{name}} </div>
`,
// created 实例被完全初始化之前
setup(props,context){
// 1
// const { ref } = Vue
// // proxy, 'Eric' 变成 proxy({value:'dell'}) 这样的一个响应式引用
// let name = ref('Eric');
// setTimeout(()=>{
// name.value = 'lee'
// },2000);
// return { name }
// --------------------
// 2 基本用法
// const { reactive } = Vue
// // // proxy, '{name:"Eric"}' 变成 proxy({name:'Eric'}) 这样的一个响应式引用
// let nameObj = reactive({name:"Eric"});
// setTimeout(()=>{
// nameObj.name = 'lee'
// },2000);
// return { nameObj }
// 3 只读 readonly
// const { reactive,readonly } = Vue
// let nameObj = reactive([123]);
// const copyNameObj = readonly(nameObj)
// setTimeout(()=>{
// nameObj[0] = 456
// // copyNameObj[0] = 456
// },2000);
// return { nameObj,copyNameObj }
// 4 toRefs 基本用法
const { reactive,toRefs } = Vue
// // proxy, '{name:"Eric"}' 变成 proxy({name:'Eric'}) 这样的一个响应式引用
let nameObj = reactive({name:"Eric"});
setTimeout(()=>{
nameObj.name = 'lee'
},2000);
// toRefs proxy({name:'Eric'}), {name: proxy({value:'Eric'})}
const {name} = toRefs(nameObj)
return { name }
}
})
app.mount('#root')
</script>
</body>
</html>
