vue3.0（第五篇）递归监听和非递归监听

本文链接：https://blog.csdn.net/weixin_58437310/article/details/118151915

1.递归监听

默认情况下，无论是通过ref还是reactive都是递归监听

<template>
  <div>
//验证reactive
    <p>{{ state.a }}</p>
    <p>{{ state.one.one }}</p>
    <p>{{ state.one.two.two }}</p>
    <p>{{ state.one.two.three.three }}</p>
    <button @click="myFn1">Fn1</button>
  </div>
</template> 

<script>
import { reactive } from "vue";
//验证ref
import { reactive } from "vue";

export default {
  name: "App",
  setup() {
    let state = reactive({//reactive 替换掉 ref
      a:'a',
      one:{
        one:'one',
        two:{
          two:'two',
          three:{
            three:'three'
          }
        }
      }
    });
    function myFn1 (){
      state.a='A';//验证ref需要加value 例如  state.value.a='A'
      state.one.one='1';
      state.one.two.two='2';
      state.one.two.three.three='3'
    }
    return{state,myFn1}//记得导处去
  },
};
</script>

2.递归监听存在的问题

如果数据多，消耗性能比较大

3.非递归监听

只能监听我们的第一层

reactive 可以通过 shallowReactive

ref 可以通过 shallRef

vue3只提供了 triggerRef的方法，没有提供triggerReactive的方法更新数据

<script>
import { shallowReactive } from "vue";
// import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    let state = shallowReactive({ //shallRef
      a:'a',
      one:{
        one:'one',
        two:{
          two:'two',
          three:{
            three:'three'
          }
        }
      }
    });
    function myFn1 (){
      // shallRef
      // state.value.a='A';
      // state.value.one.one='1';
      // state.value.one.two.two='2';
      // state.value.one.two.three.three='3'

      //shallowReactive
      // state.a='A';//第一层 不发生改变 下面是不会更新的 ！！！！！！ 如果这层不注释则会更新
      state.one.one='1';
      state.one.two.two='2';
      state.one.two.three.three='3'

       //shallowReactive
      console.log(state);  //Proxy {a: "A", one: {…}} 只有第一层被包装成Proxy了
      console.log(state.one);//{one: "1", two: {…}}
      console.log(state.one.two);//{two: "2", three: {…}}
      console.log( state.one.two.three);//{three: "3"}

      //shallRef
        //注意点:如果是通过shallowRef创建数据，那么vue监听的是，value的变化，并不是第一层的变化
      // console.log(state);  //RefImpl {_rawValue: {…}, _shallow: true, __v_isRef:             true, _value: {…}}
      // console.log(state.value);//{a: "A", one: {…}}
      // console.log(state.value.one.two);//{two: "2", three: {…}}
      // console.log( state.value.one.two.three);//{three: "3"}
    }
    return{state,myFn1}
  },
};
</script>

4.应用场景