Vue3 学习笔记 —— shallowReactive 和 shallowRef

原创

叹之 2021-07-09 10:42:44 ©著作权

文章标签 Vue3 vue Vue 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者叹之的原创作品，请联系作者获取转载授权，否则将追究法律责任

shallowReactive

只处理了对象内最外层属性的响应式，适用于对象结构较深，但只有外层属性变化

shallowRef

只处理了value的响应式，不进行对象的 reactive 处理，适用于会被替换的数据

示例：

<template>
  m1: {{m1}} <br>
  m2: {{m2}} <br>
  m3: {{m3}} <br>
  m4: {{m4}} <br>
  <button @click="change">改变</button>
</template>

<script lang="ts">

import { defineComponent, reactive, shallowReactive, ref, shallowRef} from 'vue';

export default defineComponent({
  name: 'Child',

  setup() {

    let m1 = reactive({name: 'a', deep: {name: 'b'}})
    let m2 = shallowReactive({name: 'a', deep: {name: 'b'}})
    let m3 = ref({name: 'a', deep: {name: 'b'}})
    let m4 = shallowRef({name: 'a', deep: {name: 'b'}})
	
	// 每次只能放一条语句执行，否则看不出区别
    let change = ()=>{
      m1.name = 'aa'
      // m1.deep.name = 'bb'

      // m2.name = 'aa'
      // m2.deep.name = 'bb'

      // m3.value.name = 'aa'
      // m3.value.deep.name = 'bb'

      // m4.value.name = 'aa'
      // m4.value.deep.name = 'bb'
      // m4.value = {name: 'x', deep: {name: 'y'}}

    }
    return {
      m1,
      m2,
      m3,
      m4,
      change
    }
  }

});
</script>