[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3-Vue.js-php.cn

This article summarizes and shares Vue3 study notes, and provides an in-depth understanding of 11 knowledge points of Vue3. I hope it will be helpful to everyone!

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

《Vue3 Node Webpack API Mall Project Engineering Practical Development Course! 》

1. Why choose CompositionAPI

Limitations of Vue2

Poor readability caused by component logic expansion
Unable to reuse code across components
Vue2 has limited support for TS

In the traditional OptionsAPI we need to spread the logic into the following six parts. [Related recommendations: vue.js video tutorial]

OptionsAPI

##components
props
data
computed
methods
lifecycle methods

How to use CompositionAPI to solve the problem

The best solution is to aggregate the logic and the code can be very good Readability.

This is what our CompositionAPI syntax can achieve. CompositionAPI is a completely optional syntax and has no conflict with the original OptionAPI. It allows us to organize code with the same function together without scattering it to every corner of the optionsAPI

Code reuse method PK

Cross-component reuse code in Vue2, we There are probably four options

1. Mixin - Mixin

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

Can be understood as multiple inheritance. Simply put, it is how a person has two fathers

Disadvantages

Unclear inheritance relationship

2. Mixin Factory - Mixin Factory

returns a

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

✅Code reuse is convenient

✅Inheritance relationship cleaning

3. ScopeSlots - Scope slots

❌Not very readable

❌Configuration Complex - needs to be configured in the template

❌Low performance-each slot is equivalent to an instance

4, CompositionApi - composite API

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

✅Small amount of code

✅No new syntax is introduced, just a simple function

✅Exceptionally flexible

✅The tool syntax prompts are friendly-because it is a simple function, it is very Easy to implement syntax prompts and automatic compensation

2. setup & ref

Reason for using CompositionAPI

✅Better Typescript support

✅In complex functional components, code can be organized according to characteristics - code cohesion, such as:

Sort and search logic cohesion

✅Components Inter-code reuse

What is setup

- Data
- Methods
- Computed Properties
- Lifecycle methods
##can be no longer difficult to use Understand this
has two optional parameters
props - properties (responsive object and can be monitored (watch))

import {watch} from "vue"
export defalut {
	props: {
		name: String
	},
	setup(props) {
		watch(() => {
			console.log(props.name)
		})
	}
}

Copy after login

context context object - used to replace the properties that can be accessed by the previous this method

setup (props,context) {
	const {attrs,slots,parent,root,emit} = context
}

Copy after login

What is ref

The boxing operation of basic data type data makes it a responsive object that can track data changes.

Summary

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3 The maintainability is significantly improved

可以控制哪些变量暴露
可以跟中哪些属性被定义（属性继承与引用透明）

三、Methods

基础用法

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

自动拆装箱总结

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

JS ：需要通过.value访问包装对象
模板: 自动拆箱

四、 Computed - 计算属性

这个地方实在没什么好讲的，和Vue2没变化

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>

import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>

Copy after login

五、Reactive - 响应式语法

之前reactive 的 Ref 去声明所有的响应式属性

import { ref,computed } from &#39;vue&#39;
export default {
  setup(){
    const capacity = ref(4);
    const attending = ref(["Tim","Bob","Joe"]);
    const spacesLeft = computed(()=>{
      return capacity.value - attending.value.length
    })
    function increaseCapacity(){ capacity.value ++;}
    return { capacity,increaseCapacity,attending,spacesLeft}
  }
}

Copy after login

但是有另一个等效的方法用它去代替 reactive 的Ref

import { reactive,computed } from &#39;vue&#39;
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
  }
}

Copy after login

过去我们用vue2.0的data来声明响应式对象,但是现在在这里每一个属性都是响应式的包括computed 计算属性

这2种方式相比于第一种没有使用.

接下来我们再声明method 这2种语法都ok，取决于你选择哪一种

setup(){
  const event = reactive(){
    capacity:4,
    attending:["Tim","Bob","Joe"],
    spacesLeft:computed(()=>{
      return event.capacity - event.attending.length;
    })
    function increaseCapacity(){event.capacity++}
    //return整个对象
    return {event,increaseCapacity}
  }
}

Copy after login

<p>Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}</p>
<h2>Attending</h2>
<ul>>
	<li v-for="(name,index) in event.attending" :key="index">
     {{name}}
  </li>
</ul>
<button @click="increaseCapacity()"> Increase Capacity</button>

Copy after login

在这里我们使用对象都是.属性的方式，但是如果这个结构变化了，event分开了编程了一个个片段，这个时候就不能用.属性的方式了

//在这里可以使用toRefs
import {reactive,computed,toRefs} from &#39;vue&#39;
export default{
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity -event.attending.length;
        
      })
    })
    function increaseCapacity(){ event.capacity ++ }
    return {...toRefs(event),increaseCapacity}
  }
}

Copy after login

如果没有 increaseCapacity() 这个方法直接可以简化为

return toRefs(event)

Copy after login

完整代码

<div>
   <p>Space Left : {{event.spacesLeft}} out of {{event.capacity}} </p>
   <h2>Attending</h2>
   <ul>
      <li v-for="(name,index)" in event.attending :key="index">{{name}}
      </li>


     
   </ul>
   <button @click="increaseCapacity">Increase Capacity</button>
   </div>
</template>

<script>
//第一种
import {ref,computed } from &#39;vue&#39;
export default {
  setup(){
    const capacity = ref(4)
    const attending = ref(["Tim","Bob","Joe"])
    const spaceLeft = computed(()=>{
      return capacity.value - attending.value.length;
    });
    function increaseCapacity(){ capacity.value++; }
    return {capacity,increaseCapacity,attending,spaceLeft}   


  }
} 

//返回一个响应式函数 第二种
import { reactive,computed } from &#39;vue&#39;
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spaceLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
    //我们不再使用.value
    function increaseCapacity() { event.capacity++; }
    //把这个event放入到template中
    return { event,increaseCapacity}
  }
}


</script>

Copy after login

六、 Modularizing

使用CompositionAPI的两个理由

1、可以按照功能组织代码

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

2、组件间功能代码复用

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

七、 LifecycleHooks - 生命周期钩子

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
-	?onRenderTracked
-	?onRenderTriggered

setup中调用生命周期钩子

import { onBeforeMount,onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
        console.log(&#39;Before Mount!&#39;)
    }) 
    onMounted(() => {
        console.log(&#39;Before Mount!&#39;)
    }) 
  },
};

Copy after login

八、Watch - 监听器

// 所有依赖响应式对象监听
watchEffect(() => {
   results.value = getEventCount(searchInput.value);
 });

// 特定响应式对象监听
watch(
  searchInput,
  () => {
    console.log("watch searchInput:");
  }
);

// 特定响应式对象监听 可以获取新旧值
watch(
  searchInput,
 (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
);

// 多响应式对象监听
watch(
  [firstName,lastName],
 ([newFirst,newLast], [oldFirst,oldlast]) => {
   // .....
  },
  
);

// 非懒加载方式监听 可以设置初始值
watch(
  searchInput,
  (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
  {
    immediate: true, 
  }
);

Copy after login

[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

编写一个公共函数usePromise函数需求如下：

results : 返回Promise执行结果
loading：返回Promise运行状态
- PENDING :true
- REJECTED : false
- RESOLVED: false
error ：返回执行错误

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

import { ref } from "vue";

export default function usePromise(fn) {
  const results = ref(null);
  // is PENDING
  const loading = ref(false);
  const error = ref(null);

  const createPromise = async (...args) => {
    loading.value = true;
    error.value = null;
    results.value = null;
    try {
      results.value = await fn(...args);
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };
  return { results, loading, error, createPromise };
}

Copy after login

应用

import { ref, watch } from "vue";
import usePromise from "./usePromise";
export default {
  setup() {
    const searchInput = ref("");
    function getEventCount() {
      return new Promise((resolve) => {
        setTimeout(() => resolve(3), 1000);
      });
    }

    const getEvents = usePromise((searchInput) => getEventCount());

    watch(searchInput, () => {
      if (searchInput.value !== "") {
        getEvents.createPromise(searchInput);
      } else {
        getEvents.results.value = null;
      }
    });

    return { searchInput, ...getEvents };
  },
};

Copy after login

十、Suspense - 悬念

复杂的Loading实现

我们考虑一下当你加载一个远程数据时，如何显示loading状态

通常我们可以在模板中使用v-if

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

但是在一个组件树中，其中几个子组件需要远程加载数据，当加载完成前父组件希望处于Loading状态时我们就必须借助全局状态管理来管理这个Loading状态

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

Suspense基础语法

这个问题在Vue3中有一个全新的解决方法。

这就是Suspense Component，悬念组件。

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

<template>
  <div>
    <div v-if="error">Uh oh .. {{ error }}</div>
    <Suspense>
      <template #default>
        <div>
          <Event />
          <AsyncEvent />
        </div>
      </template>
      <template #fallback> Loading.... </template>
    </Suspense>
  </div>
</template>

<script>
import { ref, onErrorCaptured, defineAsyncComponent } from "vue";

import Event from "./Event.vue";

const AsyncEvent = defineAsyncComponent(() => import("./Event.vue"));
export default {
  components: {
    Event,
    AsyncEvent,
  },

  setup() {
    const error = ref(null);
    onErrorCaptured((e) => {
      error.value = e;
      // 阻止错误继续冒泡
      return true;
    });
    return { error };
  },
};
</script>

Copy after login

骨架屏实现

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

十一、Teleport - 传送门

功能

类似React中的Portal, 可以将特定的html模板传送到Dom的任何位置

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

基础语法

通过选择器QuerySelector配置

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

示例代码

1[Compilation and summary] Detailed explanation of 11 knowledge points of Vue3

<template>
  <div>
    <teleport to="#end-of-body" :disabled="!showText">
      <!-- 【Teleport : This should be at the end 】 -->
      <div>
        <video src="../assets/flower.webm" muted controls="controls" autoplay="autoplay" loop="loop">
          
        </video>
      </div>
    </teleport>
    <div>【Teleport : This should be at the top】</div>
    <button @click="showText = !showText">Toggle showText</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const showText = ref(false);
    setInterval(() => {
      showText.value = !showText.value;
    }, 1000);
    return { showText };
  },
};
</script>

Copy after login

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of [Compilation and summary] Detailed explanation of 11 knowledge points of Vue3. For more information, please follow other related articles on the PHP Chinese website!