vue3基础学习ref|reactive

​

ref

• 在vue3中一般数据不能作为响应式数据的，只有通过ref把一个简单的数据类型做为响应式，
• 用ref响应式数据，在ts中不能直接修改其值，必须通过value关键字去修改其值
• 在ref必须import 引入才能使用

  import {ref} from 'vue'
  const count = ref<number>(0);
  const message = ref<string>("hello word");
  const tap = ()=>{
  	  count.value++
  }

isRef

• 判断一个数据类型是否响应式

shallowRef triggerRef

• shallowRef和triggerRef 一般同时使用
• 简单的数据类型shallowRef 和ref区别不大
• 对应复杂的类型，可以通过value全部修改其值
• 对应复杂的类型，如果仅仅修改某个属性值，通过triggerRef强制使视图发生变化

import { ref, shallowRef,triggerRef} from "vue";
let message: string = "hello word";
//const user = shal;
const user = shallowRef({
  name: "jingyun",
  age: 6,
});
const tap = () => {
  user.value = "jingyun++";
};
const tap2 = () => {
  user.value.name = "jingyun++";
  triggerRef(user)
};

customRef

• 自定义一个Ref

import { customRef } from "vue";

const myRef = <T>(value: T) => {
  return customRef((trank, trigger) => {
    return {
      get() {
        trank();
        console.log("get");
        return value;
      },
      set(newValue) {
        console.log("set");
        trigger();
        value = newValue;
      },
    };
  });
};
const message = myRef<string>("******");
const change = () => {
  message.value = "***景志斌***";
};

reactive

• 对复杂的数据类型定义成为响应式
• 做异步数据的时候不能用直接赋值，这样会破坏响应式结构
• 如果直接赋值，可以在外层包裹一层

//第一种方式
   type User = {
  name: string;
  age: number;
};
const message = reactive<User[]>([
  {
    name: "jingyun",
    age: 5,
  },
]);
const change = () => {
  setTimeout(() => {
    //这样方式会改变message的响应式
    // message = [{ name: "张三", age: 20 }];
    //message=[];
    message.splice(0);
    message.push({ name: "张三", age: 29 });
  }, 1000);
};
//第二中方式去实现
type O = {
  list: number[];
};
const message2 = reactive<O>({
  list: [1, 2],
});
const change2 = () => {
  setTimeout(() => {
    message2.list = [3, 4];
  }, 1000);
};

shallowReactive

• shallowReactive只能对复杂类型做浅式响应式，区别reactive

onst User = shallowReactive({
name: "jingyun",
girl: {
  name: "xx",
},
});
//不能对gril.name做响应式
const change = () => {
User.girl.name = "jy";
};

readonly

• 把一个响应式设置为只读

toRef

• 如果对普通对象使用了 toRef 那么对原始对象和新的 toRef 都有影响，但是对不会影响视图
• 如果原始对象是 reactive 对象，对原始对象和新的 toRef 都有影响，切对视图也有影响

 import { toRef } from "vue";

const obj = {
  count: 1,
};
const count = toRef(obj, "count");
const change = () => {
  count.value = 2;

  console.log(count);
};

toRefs

• 对一个 reactive 数据，如果获取直接获取对象，不会变成响应式，
• 通过 toRefs 变成响应式

//const { name, age } = reactive({ name: "jingyun", age: 4 });
const user = reactive({
  name: "jingyun",
  age: 4,
});
const { name, age } = toRefs(user);
const change = () => {
  age.value = 2;
};

toRaw

• 把一个响应式对象变成普通对象

const user = reactive({
name: "jingyun",
age: 4,
});
const raw = toRaw(user);
const change = () => {
console.log("user", user);
console.log("toRaw", raw);
};

computed

• 如果参数是一个对象，就有 set 和 get 方法
• 如果是一个函数直接返回

 const n1 = ref < number > 0;
const n2 = ref < number > 0;
//第一种写法
// const n = computed({
//   get() {
//     return n1.value + n2.value;
//   },
//   set() {
//     return n1.value + n2.value;
//   },
// });
//第二种
const n = computed(() => {
  return n1.value + n2.value;
});

watch

• 对响应式对象进行监听
• 可以传递单一参数
• 可以对多个值进行监听，以数组形式传递
• 如果监听的对象比较复杂，并且响应式是 ref 形式，不能监听对象，
  可以用传递第三个参数 deep：true 这样就能深度监听，
• immediate 第一次调用监听
• 如果响应式是 reactive，不传递第三个参数 deep 也能监听
• 如果 reactive 响应式中有多个值，仅仅对某个值进行监听，
  第一参数用用函数返回()=>obj.$1

//对一个值监听
const n1 = ref(0);
const n2 = ref(0);

watch(n1, (newValue, oldValue) => {
  console.log("新的值", newValue);
  console.log("旧的值", oldValue);
});
//对两个值监听
const n1 = ref(0);
const n2 = ref(0);

watch([n1, n2], (newValue, oldValue) => {
  console.log("新的值", newValue);
  console.log("旧的值", oldValue);
});
// watch 不能对ref 复杂的对象进行监听，传递第三个参数deep:true做深度监听，immediate 开始就调用监听一次
const user = ref({
  name: "jingyun",
  gril: {
    age: 8,
  },
});
const n2 = ref(0);

watch(
  user,
  (newValue, oldValue) => {
    console.log("新的值", newValue);
    console.log("旧的值", oldValue);
  },
  {
    deep: true,
    immediate: true,
  }
);

watchEffect

• 可以传递多个监听响应式数据
• 传递一个回调回调函数，在开始调用
• watchEffect 返回一个函数，调用这个函数停止监听
• 第二个参数，flush =“post”|“pre”|“sync”
  • post 组件更新后执行
  • pre 组件更新前执行
  • sync 强制效果始终同步触

  const m1 = ref(0);
  const m2 = ref(0);
     watchEffect(() => {
      console.log("m1", m1.value);
      console.log("adf");
      console.log("m2", m2.value);
    });
    
    watchEffect((callBack) => {
      console.log("m1", m1.value);
      console.log("adf");
      console.log("m2", m2.value);
      callBack(() => {
        console.log("在监听之前调用");
      });
    });
    
    const m1 = ref(0);
    const m2 = ref(0);
    const stop = watchEffect((callBack) => {
      console.log("m1", m1.value);
    
      callBack(() => {
        console.log("最开始");
      });
    });
    stop();
    
    const m1 = ref(0);
    const m2 = ref(0);
    const stop = watchEffect(
      (callBack) => {
        console.log("m1", m1.value);
    
        callBack(() => {
          console.log("最开始");
        });
      },
      {
        flush: "post",
        onTrigger() {},
      }
    );
  

  reduce

  • 对数组循环遍历，并累计

   let arr = [1, 2, 3, 4, 5];
    let s = arr.reduce((sum, current, index) => {
      return sum + current;
    }, 0);
    
    let arr = [
      {
        name: "jack",
        count: 10,
      },
      {
        name: "rose",
        count: 20,
      },
    ];
    let s = arr.reduce((sum, current, index) => {
      return sum + current.count;
    }, 0);
  

​