【vue3】总结

const aaa = ref({
  name: {
    age: 12
  },
  age: 13333,
  items: [{
    id:2,
    sex:'f'
  }]
})
function changeName(){
  aaa.value.items[0].id++
}

<template>
  <div class="greetings">
   <div>{{ aaa.items[0].id }}</div>
   <div class="btn" @click="changeName()">点击</div>
  </div>
</template>

<script setup lang = "ts">
  let count = ref(0)
  console.log(count.value)
</script>

<div>{{ count }}</div>

let xxx = ref(null)

const user = reactive({
  name: "小明",
  age: 20,
  wife: {
    name: "小甜甜",
    age: 21,
    cars: ["奔驰", "宝马", "奥迪"],
  },
});

{ attrs, slots, emit, expose }

setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }

setup(props,context) {
  ...
}

import { defineEmits, defineProps } from "vue";
let props = defineProps<{
  modelValue: string;
}>();
let emit = defineEmits();

<script setup lang="ts">
import { ref, computed } from "vue";
let firstname = ref("john");
let lastname = ref("watson");
let fullname = computed(() => {
  return `${firstname.value} ${lastname.value}`;
});
</script>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
let firstname = ref("john");
let lastname = ref("watson");
let fullname = computed(() => {
  return `${firstname.value} ${lastname.value}`;
});
// watch三个参数，第一个是监听的变量。（如果有多个变量想同时监听，可以使用数组）第二个是函数，可以监听到旧值与新值，第三个参数可以配置deep、immediate等
watch(
  fullname,
  (newVal, oldVal) => {
    console.log(`newFullName=${newVal}`);
    console.log(`oldFullName=${oldVal}`);
  },
  { deep: true }
);
</script>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
let firstname = "john";
let lastname = ref("watson");
let fullname = ref("");
watchEffect(() => {
  fullname.value = firstname + lastname.value;
});

</script>

import { onMounted, ref } from "vue";
export default function () {
  const x = ref(-1);
  const y = ref(-1);
  const clickHandler = (event: MouseEvent) => {
    x.value = event.pageX;
    y.value = event.pageY;
  };
  onMounted(() => {
    window.addEventListener("mousemove", clickHandler);
  });
  return { x, y };
}

<script setup lang="ts">
import useMousePosition from "../hooks/useMousePosition";
let x = useMousePosition().x;
let y = useMousePosition().y;
</script>
<template>
  <div>{{ x }},{{ y }}</div>
</template>

<script lang="ts">
// 现在暂时没什么好方法，去在script setup里使用toRefs，所以用这种方式来写
import { toRefs, reactive } from "vue";

export default {
  setup() {
    const personReactive: Object = reactive({
      name: "john",
      age: 133,
    });
    const personObj = toRefs(personReactive);
    return {
      ...personObj,
    };
  },
  data() {},
};
</script>

<script setup lang="ts">
import { reactive, isRef, toRef } from "vue";
const state = reactive({
  name: "john",
  age: 20,
  other: {
    employee: true,
  },
});
let name = toRef(state, "name");
function clickHandler() {
  name.value += name.value;
}
</script>

<template>
  <div>name:{{ name }}</div>
  <div class="btn btn-confirm" @click="clickHandler">确认</div>
</template>

let foo: unknown;
if (isRef(foo)) {
  // foo 的类型被收窄为了 Ref<unknown>
  foo.value;
}

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性是响应式的
state.foo++

// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false

// 不是响应式的
state.nested.bar++

function triggerRef(ref: ShallowRef): void
const shallow = shallowRef({
  greet: 'Hello, world'
})
// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
  console.log(shallow.value.greet)
})

// 这次变更不应触发副作用，因为这个 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 打印 "Hello, universe"
triggerRef(shallow)

const original = reactive({ count: 0 })

const copy 
= readonly(original)

watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性会失败
state.foo++

// ...但可以更改下层嵌套对象
isReadonly(state.nested) // false

// 这是可以通过的
state.nested.bar++

<script setup lang="ts">
import { reactive, toRaw, markRaw } from "vue";
// toRaw 把代理的响应式对象变为了普通对象
// markRaw 将一个对象标记为不可被转为代理。返回该对象本身。
interface PersonInfo {
  [props: string]: any; // 我为了省事儿这么写的，一般还是严谨些写阿。。
}
const originObj: PersonInfo = reactive<PersonInfo>({
  name: "john",
  age: 20,
});
let toRawObj = toRaw(originObj);
function clickHandler() {
  toRawObj.age--;
  console.log(toRawObj);
}
</script>
<template>
  <div>{{ toRawObj }}</div>
  <!-- <div>{{ markRawObj }}</div> -->
  <div class="btn btn-confirm" @click="clickHandler">确定toRaw</div>
  <div class="btn btn-confirm" @click="clickHandler">确定markRow</div>
</template>

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

function myRef(value){
  return customRef((track,trigger)=>{
    return {
      get(){
        //追踪
        track()
        return value;
      },
      set(newValue){
        value=newValue
      //触发更新
        trigger()
      }
    }
  })
}

<script setup lang="ts">
import { reactive, customRef, ref } from "vue";
interface PersonInfo {
  [props: string]: any; // 我为了省事儿这么写的，一般还是严谨些写阿。。
}
const originObj: PersonInfo = reactive<PersonInfo>({
  name: "john",
  age: 20,
});
const keyword = useDebounceRef("abc", 500);
</script>

<template>
  <div class="btn btn-confirm" @click="showModal(true)">打开对话框</div>
  <Teleport to="body">
    <div class="modal-wrapper" v-if="isShowModal">对话框</div>
    <div class="btn btn-confirm" @click="showModal(false)">关闭对话框</div>
  </Teleport>
</template>