ref-reactive-toRefs

<!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>
posted @ 2021-12-14 09:47  13522679763-任国强  阅读(19)  评论(0)    收藏  举报