[Vue] 37.Composition API: ref和reactive响应式应用的用法和原理1）

最新推荐文章于 2024-09-17 21:49:02 发布

weiweicn!

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量406

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014627255/article/details/125658081

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

setup中定义的变量，原始情况下并不是响应式的变量，即数值改变并不会反应到页面上，如下：name的值不会在两秒之后变成‘abc’

<!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>35</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // ref, reactive
        const app = Vue.createApp({
            template: `
            <div>{{name}}</div>
            `,
            setup(props, context) {
                let name = 'dell';
                setTimeout(() => {
                    name = 'abc'
                }, 2000)
                return {
                    name: 'dell',
                }
            }
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>

使用ref引用

<!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>35</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // ref, reactive 响应式的引用
        // 原理，通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新
        // ref处理基础类型的数据
        // 如果知道name是ref返回的响应式引用，系统会自动调用name.value
        const app = Vue.createApp({
            template: `
            <div>{{name}}</div>
            `,
            setup(props, context) {
                // 引入ref
                const {ref} = Vue;
                // 通过Proxy，将'dell'变成proxy({value: 'dell'})这样的一个响应式引用
                let name = ref('dell');
                setTimeout(() => {
                    name.value = 'abc'
                }, 2000)
                return {name}
            }
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>

使用reactiv

<!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>35</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // ref, reactive 响应式的引用
        // 原理，通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新
        // ref处理基础类型的数据
        // 如果知道name是ref返回的响应式引用，系统会自动调用name.value
        // reactie处理非基础类型的数据
        const app = Vue.createApp({
            template: `
            <div>{{nameObj.name}}</div>
            `,
            setup(props, context) {
                const {reactive} = Vue;
                const nameObj = reactive({name: 'dell'});
                setTimeout(() => {
                    nameObj.name = 'abc'
                }, 2000)
                return {nameObj}
            }
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>