前端小白不迷路 - 今天来介绍下Vue3的响应式原理-proxy

Panda_Loncon
523 阅读2分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

前言：

哈喽，小伙伴们，我们又见面了，两天的周末时光已经过去，让我们撸起袖子加油干，全新一周启航。前两天我们讲的是vue2的响应式原理，今天，我们一起来学习vue3的响应式原理吧！

vue3响应式原理 - proxy

proxy构造函数，不是劫持，意为代理，是ES6的语法，不是属性级别的，是代理整个对象。

代码举例

<script>
    var poets = {
        dynasty: '唐代',
        name: '李白'
    }
    // newObj 是obj的代理对象
    const newPoets = new Proxy(poets, {
        // targe是目标对象poets
        get(target, key) {
            console.log('访问了', key);
            return target(key)
        },
        set() {

        }
    })
</script>

当我们在控制台打印这个对象的某一属性的时候，这个对象就被代理，然后输出对象的对应属性，如图：

image.png

使用构造函数也可以访问对象的属性

image.png

好处

这样就很方便的将对象代理，不用担心我们访问的是对象的哪个属性。因为只要访问对象的任一属性都可以走get函数，将其输出。

proxy的set()说明

set函数有三个参数，set(target,key,value) 参数一： 代理的目标对象 参数二： 操作的对象属性 参数三： 设置的对象属性值

代码如下：

set(target, key,value) {
    console.log('设置了',key,value);
    poets[key] = value
}

image.png 操作的是代理对象，但最终生效的还是目标对象，这就是proxy的最大好处。

proxy的好处

新增属性不用担心不是响应式的，直接新增即可，因为操作的是代理对象，代理的整个目标对象。

vue3响应式数据的使用

<body>
    <div id="app">
        <h1>《{{title}}》</h1>
        <h3 class="item">{{poets.dynasty}} - {{poets.name}}</h3>
        <h3>{{poets.first}},{{poets.second}}</h3>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const App = {
            data() {
                return {
                    title: '望庐山瀑布',
                    poets : {
                        dynasty: '唐代',
                        name: '李白',
                        first: ''
                    },
                    nameList: ['杜甫','白居易','杜牧']
                }
            }
        }
        const vm = Vue.createApp(App).mount('#app')
    </script>
</body>

image.png

vm.poets就是poets的代理对象。当我们改变对象的属性，会发现目标对象的属性响应式改变。

image.png 当我们给代理对象新增一个不存在的属性，目标对象也会新增该属性，并且更新dom

image.png

avatar
文章
阅读
粉丝