一.Vue3.0生命周期对照表

image.png

二. 在setup中使用provide 和 inject

事实上之前还学过的Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。

image.png

二.一.在父组件/爷爷组建中使用provide

<template>
  <div>
    <h1>我是父组件</h1>
    <hr>

    <Son />
  </div>
</template>

<script>
// 1.引入vue 内置的provide函数
import { provide } from "vue";

import Son from "./Son.vue"
export default {
  name:"fatherCom",
  components:{
    Son
  },
  setup() {
    const name = "huzhenchu";
    let counter = 100;

    // 2. 使用的provide函数的他有两个参数: 参数一key, 参数二: 父组件中定义的数据名称
    provide("name",name)
    provide("counter",counter)
  },
};
</script>

<style>
</style>

二.二 在子组件/孙子组件使用inject

<template>
  <div>
    <h1>从父组件/爷爷组件使用provide传递过来的数据:{{ name }}</h1>

  </div>
</template>

<script>
//  1. 父组件/爷爷组件中使用provide传值,然后这边子组件/孙子组件使用inject来接收
import { inject } from "vue";
export default {
  name: "SonCom",

  setup() {
    // 2.取值
    const name = inject("name");
    return {
      name,
    };
  },
};
</script>

<style>
</style>

实际截图

image.png

总结: Provide 和 inject 这两个函数传值和接收值的话:
第一,如果使用的普通的ES6 定义的数据那么他不是响应式的,
第二:如果使用ref/reactive定义的数据的话,他就是响应式了

image.png

三. setup 书写计数器demo和逻辑抽离

三.一.在setup中直接写业务逻辑

<template>
  <div>
    <h1>当前计数:{{ counter }}</h1>
    <h1>当前计数*2:{{doubleCounter}}</h1>
    <button @click="add">+1</button>
    <button @click="jian">-1</button>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    let counter = ref(0);
    const doubleCounter = computed(() => counter.value * 2);

    const add = () => counter.value++;
    const jian = () => counter.value--;

    return {
      counter,
      doubleCounter,
      add,
      jian,
    };
  },
};
</script>

<style>
</style>

实际截图

image.png

三.二.在setup中数据抽离的写法:

App-vue3.0hook抽取.vue

<template>
  <div>
    <h1>当前计数:{{ counter }}</h1>
    <h1>当前计数*2:{{ doubleCounter }}</h1>
    <button @click="add">+1</button>
    <button @click="jian">-1</button>
  </div>
</template>

<script>
import userCounter from "./hooks/useCounter.js";
export default {
  setup() {
    const { counter, doubleCounter, add, jian } = userCounter();
    return {
      counter,
      doubleCounter,
      add,
      jian,
    };
  },
};
</script>

<style>
</style>

useCounter.js

import { computed, ref } from "vue";

export default function() {
  let counter = ref(0);
  const doubleCounter = computed(() => counter.value * 2);

  const add = () => counter.value++;
  const jian = () => counter.value--;

  return {
    counter,
    doubleCounter,
    add,
    jian,
  };
} 

实际截图

image.png

三.三.或者直接结构这个函数也是可以的

image.png

四. useTitle的使用:

需求我想修改如下图文字该怎么办呢?

image.png

四.一 实现方式一:

image.png

四.二实现方式二:(封装一个hook实现)

image.png

五. Vue 3.0 滚动 实现在浏览器的右下角永远实现scrollX scrollY的坐标值

实现方式一:(直接在setup函数中实现)

image.png

实现方式二:(抽离代码出去在hook中书写):

image.png

六. 实现浏览器鼠标经过坐标值

实现方式一:(直接在setup函数中实现)

鼠标在浏览器中移动时,scrollX scrollY 显示对应的值

image.png

实现方式二:(抽离代码出去在hook中书写):

image.png

六.获取或者存储回话的Hooks

image.png

七. setup顶层编写方式

什么意思呢? 就是说不需要 setup函数的包裹,然后直接像写原生JS那种写代码,怎么做到那种呢?

image.png

七.一.setup顶层编写方式--导入组件

image.png

七.二.setup顶层编写方式--在父组件传值给子组件的使用

image.png

七.三 setup顶层编写方式--在子组件传给父组件的事件

image.png

八.自定义指令的使用:

1. 在Vue中，代码的复用和抽象主要还是通过组件；
    -- 通常在某些情况下，需要对DOM元素进行底层操作，这个时候就会用到自定义指令；
 2. 自定义指令分为两种：
    -- 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
    -- 自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

PS: 需求:我想实现当某个元素挂载完成后可以自定获取焦点(当页面加载完,input自动获取焦点)

实现方式一:

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  setup() {
    const input = ref(null);
    onMounted(() => {
      console.log(input);
      console.log(input.value);
      input.value.focus()
    });

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

<style>
</style>

实际截图:

image.png

实现方式二：局部自定义指令

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      /**
       * 这个生命周期是当组件挂载到界面的时候,会执行的生命周期:
       *   -- 当挂载到页面的时候 focus中的mounted函数中就会对标签元素进行回调了,就会有四个参数:
       *   -- 参数一: el
       *   -- 参数二: bindings
       *   -- 参数三: vnode 虚拟节点
       *   -- 参数四: preVnode 前一次的vnode
       * 
       * **/ 
      mounted(el,bindings,vnode,preVnode) {  
        console.log("focus mounted",el); 
        console.log("focus mounted",bindings); 
        console.log("focus mounted",vnode); 
        console.log("focus mounted",preVnode); 
        el.focus()
      },
    },
  },
};
</script>

<style>
</style>

实际截图

image.png

实现方式三：全局自定义指令

在全局挂载:

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
/**
 * 全局自定义指令:
 *   -- 参数一: 自定义组件的名称
 *   -- 参数二: 对应的是一个对象
 *
 * **/
app.directive("focus", {
  /**
   * 这个生命周期是当组件挂载到界面的时候,会执行的生命周期:
   *   -- 当挂载到页面的时候 focus中的mounted函数中就会对标签元素进行回调了,就会有四个参数:
   *   -- 参数一: el
   *   -- 参数二: bindings
   *   -- 参数三: vnode 虚拟节点
   *   -- 参数四: preVnode 前一次的vnode
   *
   * **/
  mounted(el, bindings, vnode, preVnode) {
    console.log("focus mounted", el);
    console.log("focus mounted", bindings);
    console.log("focus mounted", vnode);
    console.log("focus mounted", preVnode);
    el.focus();
  },
});

app.mount("#app");

实际截图

image.png

八.一.指令的生命周期

一个指令定义的对象，Vue提供了如下的几个钩子函数：
  -- created：在绑定元素的 attribute 或事件监听器被应用之前调用；
  -- beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用； 
  -- mounted：在绑定元素的父组件被挂载后调用；
  -- beforeUpdate：在更新包含组件的 VNode 之前调用；
  -- updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
  -- beforeUnmount：在卸载绑定元素的父组件之前调用；
  -- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

<template>
  <div>
    <h2 @click="changeCounter">当前计数:{{ counter }}</h2>
    <button v-if="counter < 102" v-hzc @click="changeCounter">+1</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  // 局部指令
  directives: {
    // PS: 在我们的每个生命周期回调函数中都会有四个参数: 参数一: el 参数二: bindings,参数三: vnode 虚拟节点 参数四: preVnode 前一次的vnode
    hzc: {
      created(el,bindings,vnode,preVnode) {
        console.log("hzc created");
      },

      beforeMount(el,bindings,vnode,preVnode) {
        console.log("hzc beforeMount");
      },

      mounted(el,bindings,vnode,preVnode) {
        console.log("hzc mounted");
      },
      beforeUpdate(el,bindings,vnode,preVnode) {
        console.log("hzc beforeUpdate");
      },
      updated(el,bindings,vnode,preVnode) {
        console.log("hzc updated");
      },

      beforeUnmount(el,bindings,vnode,preVnode) {
        console.log("hzc beforeUnmount");
      },
      unmount(el,bindings,vnode,preVnode) {
        console.log("hzc unmount");
      },
    },
  },
  setup() {
    let counter = ref(100);
    const changeCounter = () => {
      counter.value++;
    };

    return {
      counter,
      changeCounter,
    };
  },
};
</script>

<style>
</style>

实际截图

image.png

八.三. 指令的参数

<template>
  <div>
    <!-- 1. v-hzc.aaa.bbb 这些aaa.bbb是修饰符 
            v-hzc.aaa.bbb="'coderhzc'":这个值可以在下面的created回调函数的第二个参数中获取到  -->
    <button v-hzc.aaa.bbb="'coderhzc'" @click="add">
      当前计数: {{ counter }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  directives: {
    hzc: {
      created(el, bindings, vnode, preVnode) {
        console.log(el);
        console.log(bindings);
        console.log(vnode);
        console.log(preVnode);
        console.log(bindings.value);
      },
    },
  },
  setup() {
    const counter = ref(100);
    const add = () => {
      counter.value++;
    };
    return {
      counter,
      add,
    };
  },
};
</script>

<style>
</style>

实际截图

image.png

八.四. 指令的修饰符

image.png

八.五.自定义指令的业务场景

如何在vue项目中去使用全局自定义组件的使用呢?一下步骤是详细的步骤:

image.png

八.六自定义指令的业务场景

假如格式不想使用上面的那样的话,可以让用户传递一个格式来展示

image.png

九.认识Teleport

在Vue 项目中一般是挂载到#app上面的,但是我现在不想挂载到#app上面 我想单独的挂载到一个组件上面,此时就可以使用Teleport内置组件了,，类似于react的Portals；

Teleport它有两个属性：
    -- to：指定将其中的内容移动到的目标元素，可以使用选择器；
    -- disabled：是否禁用 teleport 的功能；

十.认识Vue插件

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
-- 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
-- 函数类型：一个function，这个函数会在安装插件时自动执行；
插件可以完成的功能没有限制，比如下面的几种都是可以的：
-- 添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；
-- 添加全局资源：指令/过滤器/过渡等；
-- 通过全局 mixin 来添加一些组件选项；
-- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

十.一. 通过注册一个全局的plugins插件--方式一:对象注册

实际截图

image.png

PS: 这种注册了以后 在全局任何页面都可以按照以上方式取值

十.二. 通过注册一个全局的plugins插件--方式二:函数注册

image.png