VUE框架Vue3下使用shallowReactive进行系统性能优化的细节和使用场景------VUE框架

旧约Alatus

已于 2023-12-28 13:04:06 修改

阅读量901

点赞数 18

分类专栏： # VUE框架前端文章标签：前端 javascript vue.js ecmascript 前端框架 vue js

于 2023-12-27 11:46:50 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135241820

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
    <h1>{{ data.a.b.c.counter }}</h1>
    <br>
    <h1>{{ data.counter2 }}</h1>
    <button @click="data.a.b.c.counter++">1加一</button>
    <br>
    <button @click="data.counter2++">2加一</button>
</template>

<script>
import { reactive,shallowReactive } from 'vue'
export default {
    name : "App",
    setup(){
        // 这个只能对一层级的属性做响应式,同样也是浅层的响应式
        let data = shallowReactive({
            counter2 : 100,
            a : {
                b : {
                    c : {
                        counter : 1
                    }
                }
            }
        });
        return {data};
    }
}
</script>

<style>

</style>
<template>

<h1>{{ data.a.b.c.counter }}</h1>

<br>

<h1>{{ data.counter2 }}</h1>

<button @click="data.a.b.c.counter++">1加一</button>

<br>

<button @click="data.counter2++">2加一</button>

</template>

<script>

import { reactive,shallowReactive } from 'vue'

export default {

name : "App",

setup(){

// 这个只能对一层级的属性做响应式,同样也是浅层的响应式

let data = shallowReactive({

counter2 : 100,

a : {

b : {

c : {

counter : 1

}

}

}

});

return {data};

}

}

</script>

<style>

</style>

import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();
import mitt from 'mitt';

// 这个会创建一个对象emitter

// 把它当作全局事件总线对象即可

export default mitt();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    
    
    
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="icon" href="/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vite App</title>

</head>

<body>









<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>

旧约Alatus

关注

18
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE框架Vue3下使用shallowReactive进行系统性能优化的细节和使用场景------VUE框架

VUE框架Vue3下使用shallowReactive进行系统性能优化的细节和使用场景------VUE框架
复制链接

扫一扫