Vue基础の ref reactive

响应式引用：

　　　　原理：通过proxy对数据进行封装（接受对象）数据变化时触发模板内容更新

ref　　处理基础数据类型

    <script>
        const root = Vue.createApp({
            template:`
                <div> {{name}} </div>
            `,
            setup(props,context){
              const  {ref} = Vue;
            //proxy  ref('周涵柔')变成proxy({value:'周涵柔'})
              let name = ref('周涵柔')
                // let name= '周涵柔'
                setTimeout(()=>{
                    name.value = '周佳丽'
                },2000)
                return{ name }
            }    
        })
        root.mount('#app')
    </script>

View Code

reactive　　处理非基础数据类型

<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            template:`
                <div> {{nameObj[0]}} </div>
            `,
            setup(props,context){
                const  { reactive } = Vue;
                const nameObj = reactive([123]);
                setTimeout(()=>{
                    nameObj[0] =456
                },2000)
                return{ nameObj }
            }    
        })
        root.mount('#app')
    </script>
</body>

View Code

Vue基础 の ref reactive

Vue基础の ref reactive