【学习打卡】第 12 天 Vue3(4)

课程名称：前端框架及项目面试 聚焦 Vue3/React/Webpack
课程章节：第 6 章 Vue3 学习（新）
主讲老师：双越

课程内容：

今天学习的内容包括：
6-16 vue3 用 Proxy 实现响应式
6-17 v-model 参数的用法
6-18 watch 和 watchEffect 的区别
6-19 setup 中如何获取组件实例
主要讲了 Proxy 原理和两点细节。后面几节都是vue3 api 实际应用。

课程收获：

大概复述一下

proxy 实现响应式

最基本的昨天其实讲的差不多了，就用 proxyData 代理 data
深度监听，
get 里递归取值。不用一次性递归完，get 到哪层递归到哪层。
判断是否是新增 key: const ownKeys = Reflect.ownKeys(target)

v-model 参数

父组件向子组件传 title，子组件 update:titleu 触发父元素
父

<MyComponent v-model:title="bookTitle" />

子

<input :value="title" @input="$emit('update:title', $event.target.value)" />

watch

默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

// 监听响应值
const count = ref(0)
watch(count, (count, prevCount) => {
  console.log(count, prevCount)
})
// 监听响应对象
const state = reactive({
  name: "Bob",
  age: 2,
});
watch(
  // 确定要监听对象哪个 key
  () => state.age,
  (new,old) => {
    console.log(new, old)
  },
  {
    immediate: true,
    // age 如果是数字
    deep: true
  }
);

watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
初始化时，一定会执行一次（收集要监听的数据）

const state = reactive({
  name: "Bob",
  age: 2,
});
watchEffect(() => {
  console.log("state.name", state.name);
});

停止侦听器

const stop = watchEffect(() => {});
// 当不再需要此侦听器时:
stop();

setup 里取实例

setup 里直接取 this 取不到。
可利用 const instance = getCurrentInstance()，再取 instance.data.name，但不提倡这么做。

结束