Vue ref，reactive 响应式引用

// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据如：数组，对象等

javascript 复制代码

<script>
// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据 如：数组，对象等

方法一：简单使用 ref，监听属性变化

方法二：简单使用 reactive 监听对象变化

// setup 
    // 创建 vue实例
   const app = Vue.createApp({
    
     // ref 时，使用name如： {{name}}
    // reactive 时，使用name如： {{nameObj.name}}
    template:  `
    <div >
        {{nameObj.name}}
    </div>
   `,

        // created 实例被完全初始化之前
        // 可以直接使用
        setup(props, context) {
            // 不能在里面用 this关键词
            // 不能调用外部函数
            // 方法一： 使用 ref
            /*
            const {ref} = Vue;
            // proxy， 'dell' 变成 proxy（{value: 'lee'}）这样的一个响应式引用
                let name = ref('dell');
                setTimeout(() => {
                    name.value = 'lee'
                }, 2000)
                return {
                    name
                }
                */
            // 方法二：  使用 reactive
            // proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用
            const {reactive} = Vue;
            const nameObj = reactive({name: 'dell'});
            setTimeout(() => {
                    nameObj.name = 'lee'
                }, 2000)
                return {
                    nameObj
                }
        }

    });

    const vm = app.mount('#root');
    
</script>

如果想

javascript 复制代码

<script>
// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据 如：数组，对象等

// setup 
    // 创建 vue实例
   const app = Vue.createApp({
    // ref 时，使用name如： {{name}}
    // reactive 时，使用name如： {{nameObj.name}}
    template:  `
    <div >
        {{nameObj.name}}
    </div>
   `,

   // created 实例被完全初始化之前
   // 可以直接使用
        setup(props, context) {
            // 不能在里面用 this关键词
            // 不能调用外部函数
            // 方法一：
            /*
            const {ref} = Vue;
            // proxy， 'dell' 变成 proxy（{value: 'lee'}）这样的一个响应式引用
                let name = ref('dell');
                setTimeout(() => {
                    name.value = 'lee'
                }, 2000)
                return {
                    name
                }
                */
            // 方法二：
            // proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用
            //    const {reactive} = Vue;
            //    const nameObj = reactive({name: 'dell'});
            //    setTimeout(() => {
            //         nameObj.name = 'lee'
            //     }, 2000)
            //     return {
            //         nameObj
            //     }

            // 方法三：
            // proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用
            // 对响应式 只读属性
            //    const {reactive, readonly} = Vue;
            //    const nameObj = reactive({name: 'dell'});
            //    // 只读属性
            //    const copyNameObj = readonly(nameObj);
            //    setTimeout(() => {
            //         nameObj.name = 'lee'
            //         copyNameObj.name = 'lei'
            //     }, 2000)
            //     return {
            //         nameObj,
            //         copyNameObj
            //     }

                // 方法四：
                // 注意 toRefs
                const {reactive, readonly, toRefs} = Vue;
            const nameObj = reactive({name: 'dell', age: 28});
            

            // toRefs proxy({name:'dell', age: 28}), { name: proxy({value: 'dell'}) , age: proxy({value: 28})}
            setTimeout(() => {
                    nameObj.name = 'lee'
                }, 2000)
                return {
                    nameObj,
                }
        }
    });

    const vm = app.mount('#root');
    
</script>