Vue3 学习笔记 —— shallowReactive 和 shallowRef

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>

• reactive


shallowReactive


ref


shallowRef

• 注意：
• 如果将所有注释打开，代码全部执行，所有更新都会生效…
• 因为，只要有一条语句能够触发视图更新，虚拟DOM就会重新计算，然后读取到最新的值，渲染到页面
• 所以，一条一条的运行查看，才能知道哪些语句是不能触发更新的