【Vue3系列】Vue3之reactive、ref和toRefs

Vue3之reactive、ref和toRefs

在vue2中，定义数据都是在data中，但在vue3中可以使用reactive和ref来进行数据定义。

• ref

  • ref是用来创建基础类型的响应式数据，模板默认调用value显示数据，方法中修改需要修改value的值才能修改。

  • ref可以用于模板和reactive，不仅可以用于响应式还可以用于模板的DOM元素。

  • ref是一个对象，不丢失响应式，用value属性来存储值，通过.value属性的get和set来实现响应式。

  • //通过ref，可以实现值类型的数据响应式
    <template>
        <div>ref demo {{ageRef}} {{state.name}}</div>
    </template>
    
    <script>
    import { ref, reactive } from 'vue'
    
    export default {
        name: 'Ref',
        setup(){
            const ageRef = ref(15)
            const nameRef = ref('mery')
    
            const state = reactive({
                name: nameRef
            })
    
            setTimeout(() => {
                console.log('ageRef', ageRef.value,'nameRef', nameRef.value)
                ageRef.value = 20
                nameRef.value = 'tom'
                console.log('ageRef', ageRef.value,'nameRef', nameRef.value)
            },500)
    
            return{
                ageRef,
                state
            }
        }
    }
    </script>
    
    //ref用于模板的DOM元素
    <template>
        <p ref="elemRef">今天是周五</p>
    </template>
    
    <script>
    import { ref, onMounted } from 'vue'
    
    export default {
        name: 'refTem',
        setup(){
            const elemRef = ref(null)
    
            onMounted(() => {
                console.log('reftem', elemRef.value.innerHTML, elemRef.value)
            })
    
            return{
                elemRef
            }
        }
    }
    </script>
    
    

• reactive

  • reactive用来创建引用类型的响应式数据。

  • 本质是将每一层的数据都解析成proxy对象，reactive的响应式默认都是递归的，改变某一层的值都会递归的调用一边，重新渲染dom。

  • <template>
       <div>{{state.name}}</div>
    </template>
    
    //js 
    setup(){
         let state = reactive({name:'aaa'}}) 
         state.name = 'zhangsan'
         return {state}
    }
    
    

• toRef

  • toRef可以响应对象Object，针对的是某一个响应式对象的属性prop

  • 和对象Object两者保持引用关系，即一个修改另一个也跟着修改。

  • 在不丢失响应式的情况下，把对象数据进行分解和扩散，该对象是响应式对象而不是普通对象。

  • <template>
        <p>toRef demo - {{ageRef}} - {{state.name}} {{state.age}}</p>
    </template>
    
    <script>
    import { ref, toRef, reactive, computed } from 'vue'
    
    export default {
        name: 'ToRef',
        setup() {
            const state = reactive({
                age: 18,
                name: 'monday'
            })
    
            // // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
            // const state = {
            //     age: 18,
            //     name: 'monday'
            // }
    		
            //实现某一个属性的数据响应式
            const ageRef = toRef(state, 'age')
    
            setTimeout(() => {
                state.age = 20
            }, 1500)
    
            setTimeout(() => {
                ageRef.value = 25 // .value 修改值
            }, 3000)
    
            return {
                state,
                ageRef
            }
        }
    }
    </script>
    

• toRefs

  • toRefs是针对整个对象的所有属性，目标在于将响应式对象转换为普通对象，普通对象里的每一个属性prop都对应一个ref。

  • 和对象Object两者保持引用关系

  • //利用toRefs将一个响应式对象里面的所有元素取出来
    <template>
        <p>toRefs demo {{age}} {{name}}</p>
    </template>
    
    <script>
    import { ref, toRef, toRefs, reactive } from 'vue'
    
    export default {
        name: 'ToRefs',
        setup() {
            const state = reactive({
                age: 18,
                name: 'monday'
            })
    
            const stateAsRefs = toRefs(state) // 将响应式对象，变成普通对象
    
            setTimeout(() => {
                console.log('age', state.age, 'name', state.name)
                state.age = 20,
                state.name = '周一'
                console.log('age', state.age, 'name', state.name)
            }, 1500)
    
            return stateAsRefs
        }
    }
    </script>