Vue3CompositionAPI

Vue3CompositionAPI

第一章 最终效果演示

1. 下载依赖

npm install

2. 启动前端

npm run dev

3. 启动数据

json-server --watch data/db.json --port=3003

第二章 创建项目

1. vite 创建项目

npm init vite@latest vite-blog -- --template vue

2.App.vue

<script setup></script>

<template>
  <div>App.vue</div>
</template>

<style></style>

3. Home.vue

1. 测试setup的执行周期

<template>
  <div class="home">Home</div>
</template>

<script>
export default {
  name: "Home",
  setup() {
    console.log("setup");
  },
  created() {
    console.log("setup");
  },
  mounted() {
    console.log("mounted");
  },
};
</script>

第三章 组件嵌套

1. 创建 views/Home.vue

2. App.vue

import "Home" from './views/Home.vue'

Home.vue 定义属性

<template>
  <div class="home">
    <h1>Home</h1>
    <p>我的名字是: {
  { name }} ,我的年龄是 {
  { age }}</p>
    <button @click="handleClick">click me</button>
  </div>
</template>

<script setup>
console.log("setup");

let name = "米修在线";
let age = 30;

const handleClick = (e) => {
  console.log("you clicked me");
};
</script>

第三章 Refs

1. Refs

* 在 CompositionAPI 中,是不能使用 this 的, 所以也无法使用 this.$refs

<template>
  <div class="home">
    <h1>Home</h1>
    <p ref="p">我的名字是: {
  { name }} 我的年龄是: {
  { age }}</p>
    <button @click="handleClick">click me</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

console.log(this);

const p = ref(null);
// const p = ref("hello")

let name = "mario";
let age = 30;

const handleClick = (e) => {
  console.log(p, p.value);
  p.value.classList.add("test");
  p.value.textContent = "hello, world";
};

console.log(p.value);
</script>

第四章 Refs 数据响应

1.Ref(数据驱动)

* 未使用ref定义的数据 不能与DOM进行响应
* 通过ref定义的数据 可以实现实时响应 跟(data)一样

<template>
  <div class="home">
    <h1>Home</h1>
    <p>My name is {
  { name }} and my age is {
  { age }}</p>
    <button @click="handleClick">click me</button>

    <input type="text" v-model="name" />
    <button @click="age++">add 1 to age</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

// // 非ref属性(不响应)
// const name = "mario";
// const age = 30;

// // 通过事件修改值(不响应)
// const handleClick = (e) => {
//   name = "luigi";
//   age = 35;
// };

// ref(响应)
const name = ref("mario");
const age = ref(30);

// 修改值(响应)
const handleClick = (e) => {
  name.value = "luigi";
  age.value = 35;
};
</script>

第五章 Ref vs Reactive

1.引入 reactive

import {
    reactive, ref } from "vue";

2.Home.vue

<template>
  <div class="home">
    <h1>Home</h1>
    <h2>Refs</h2>
    <p>{
  { promiseOne.name }} - {
  { promiseOne.age }}</p>
    <button @click="updatePromiseOne">Update promise one</button>
    <h2>Reactive</h2>
    <p>{
  { promiseTwo.name }} - {
  { promiseTwo.age }}</p>
    <button @click="updatePromiseTwo">Update promise two</button>
  </div>
</template>

<script setup>
  import {
      reactive, ref } from "vue";

  const promiseOne = ref({
      name: "mario", age: 30 });
  const promiseTwo = reactive({
      name: "luigi", age: 35 });

  const updatePromiseOne = () => {
     
    promiseOne.value.age = 40;
  };
  const updatePromiseTwo = () => {
     
    promiseTwo.age = 45;
  };
</script>

3. Ref 和 Reactive 的区别

* 个人建议是尽量使用 ref

// ref和reactive的区别
const nameOne = ref("misterwu");
const nameTwo = reactive("promise");
// 对于基本数据类型来讲, reactive定义的,无法实现数据驱动的响应

// 实现值的更新(reactive)
const updatePromiseTwo = () => {
   
  nameTwo = "米修";
};

// 3. 获取测试
<p>{
   {
    nameTwo }}</p>;

第六章 计算属性

1. computed 的基本写法

<template>
  <div class="home">
    <h1>{
  { name }}</h1>
  </div>
</template>

<script setup>
import { computed } from "vue";

// computed的基本语法
const name = computed(() => {
  return "米斯特吴";
});
</script>

2. 实现搜索功能

<template>
  <div class="home">
    <input type="text" v-model="search" />
    <p>search term - {
  { search }}</p>

    <div v-for="name in matchingNames" :key="name">{
  { name }}</div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";

const names = ref(["小猪", "小狗", "小猫", "小爱", "小狼", "小虎", "狮子王"]);
const search = ref("");

const matchingNames = computed(() => {
  return names.value.filter((name) => name.includes(search.value));
});
</script>

第七章 watch & watchEffect

1. 监听 & 停止监听

<template>
  <div class="home">
    <h1>Home</h1>
    <input type="text" v-model="search" />
    <p>search term - {
  { search }}</p>
    <div v-for="name in matchingNames" :key="name">{
  { name }}</div>

    <button @click="handleClick">stop watching</button>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, watchEffect } from "vue";

const search = ref("");
const names = ref(["小猪", "小狗", "小猫", "小爱", "小狼", "小虎", "狮子王"]);

const matchingNames = computed(() => {
  return names.value.filter((name) => name.includes(search.value));
});

watch(search, () => {
  console.log("watch function ran");
});

// watchEffect
watchEffect(() => {
  console.log("watchEffect ran"); // 仅初始化一次
  console.log("watchEffect ran", search.value); // 每次search属性发生变化都触发
});

// 停止监听 watch
const stopWatch = watch(search, () => {
  console.log("watch function ran");
});

// 停止监听 watchEffect
const stopEffect = watchEffect(() => {
  console.log("watchEffect ran", search.value);
  console.log(names.value);
});

const handleClick = () => {
  stopWatch();
  stopEffect();
};
</script>

第八章 属性 Props

1.Home.vue

配置 Home.vue 的基本形态

<