Vue 学习笔记-2022/12/10

Composition Api

一、setup() 函数

<template>
  <ul>
    <li v-for="msg in messages" :key="msg.id">{{ msg.content }}</li>
  </ul>
</template>
<script>
export default {
  setup() {
    const messages = [
      { id: 1, content: "这是一条消息提醒1" },
      { id: 2, content: "这是一条消息提醒2" },
      { id: 3, content: "这是一条消息提醒3" },
      { id: 4, content: "这是一条消息提醒4" },
    ];

    return { messages };
  },
};
</script>

二、ref() 函数

setup() {
    const messages = ref([
      { id: 1, content: "这是一条消息提醒1" },
      { id: 2, content: "这是一条消息提醒2" },
      { id: 3, content: "这是一条消息提醒3" },
      { id: 4, content: "这是一条消息提醒4" },
    ]);

三、reactive() 函数

setup() {
    const messages = reactive([
      { id: 1, content: "这是一条消息提醒1" },
      { id: 2, content: "这是一条消息提醒2" },
      { id: 3, content: "这是一条消息提醒3" },
      { id: 4, content: "这是一条消息提醒4" },
    ]);

四、computed() 计算属性

// 同样里面的属性都是ref 所以需要.value才能进行访问
const searchTerm = ref("");   
const searchedMessages = computed(() => {
      if (searchTerm.value === "") return messages.value;
      return messages.value.filter((msg) => {
        return msg.content.includes(searchTerm.value);
      });
    });

五、watch() 函数

1. 基本数据类型的监听

// 监听 ref 属性 
const searchTerm = ref("");
watch(searchTerm, (newVal, oldVal) => {
      console.log(messages.value);
      console.log("搜索词：", newVal, oldVal);
    });
// 监听 ref的value属性 需要使用无参回调函数
watch(() => searchTerm.value,
      (newVal, oldVal) => {
        console.log("搜索词：", newVal, oldVal);
});

2. 对象的监听

// 如果是 reactive创建的响应对象就不需要要访问 .value 
<script>
import { ref, reactive, computed, watch } from "vue";

export default {
  setup() {
    const messages = ref([
      { id: 1, content: "这是一条消息提醒1" },
      { id: 2, content: "这是一条消息提醒2" },
      { id: 3, content: "这是一条消息提醒3" },
      { id: 4, content: "这是一条消息提醒4" },
    ]);

    const options = ref({
      // const options = reactive({
      title: "消息列表",
      user: {
        name: "张三",
        active: true,
      },
    });

    // 监听浅层 Object 属性
    watch(
      () => options.value.title,
      // () => options.title, // reactive
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );

    // 监听深层 Object 属性
    watch(
      () => options.value.user.name,
      // () => options.user.name, // reactive
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );

    return { messages, options };
  },
};
</script>

 // with deep true，可以比对对象的属性
    watch(
      () => options.value,
      (newVal, oldVal) => {
        console.log(newVal, oldVal, newVal === oldVal); // 相同的引用
      },
      { deep: true }
    );
// 但是此时 newVal 和 oldVal 的对象引用 还是不变的 所以他们对的对象进行全等的时候是 true

// 解决的方法是 在修改的时候 生成一个全新的对象

// 浅克隆
watch(
    // 解构语法
    () => ({ ...options.value }),
    (newVal, oldVal) => {
        console.log(newVal, oldVal); // user 对象没有克隆，所以是同一个引用
    }
);
// 完全克隆
watch(
    () => JSON.parse(JSON.stringify(options.value)),
    (newVal, oldVal) => {
        let obj = () => JSON.parse(JSON.stringify(options.value));
        console.log(obj);
        console.log(newVal, oldVal, newVal === oldVal); // 不同的引用
    }
);

return { messages, options };
},

3.监听多个响应性数据

// 同时监听多个响应性数据
watch(
    [() => options.value.title, () => options.value.user.name],
    (newVals, oldVals) => {
        console.log(newVals, oldVals);
    }
);

4. watchEffect()

watchEffect(() => {
      console.log(options.value.title);
      console.log(options.value.user.name);
    });

5. onInvalidate() 函数

// 传参位置不一样
watchEffect((onInvalidate) => {
    console.log(options.value.title);
    console.log(options.value.user.name);

    onInvalidate(() => {
        console.log("做一些清理操作...");
    });
});

watch(
    () => options.value.title,
    (newVal, oldVal, onInvalidate) => {
        console.log(newVal, oldVal);
        onInvalidate(() => {
            console.log("做一些清理操作...");
    });
 });

六、传递和访问 Props 属性

1. 将 Props中非响应性的属性转为响应性

import {  toRefs } from "vue";

// 用 toRefs 包裹 Props属性 即可转为响应性

七、method() 函数

<template>
  <li>{{ msg }} <button @click="removeMessage(id)">删除</button></li>
</template>
<script>
import { ref, watch, watchEffect, toRefs } from "vue";

export default {
  props: ["msg", "id"],
  setup(props) {
    // 无参数
    function removeMessage() {
      console.log("删除消息");
    }

    // 有参数
    function removeMessage(id) {
      console.log("删除消息", id);
    }

    return { removeMessage };
  },
};
</script>

八、Emit 自定义事件

emits: ["remove"],
setup(props, { emit }) {
   // 增加一个事件数组
    return {};
  },

九、生命周期钩子

十、provide 和 inject

十一、获取 template 的 ref

十二、渲染函数

十三、attrs

十四、script setup

const props = defineProps(["msg", "id"]);

<button @click="$emit('remove', id)">
const emits = defineEmits(["remove"]);

import { useSlots, useAttrs } from "vue";
const slots  = useSlots()
const attrs  = useAttrs()