资讯：【整理总结】详解Vue3的11个知识点

如何快速入门VUE3.0：进入学习

(资料图片仅供参考)

一、为什么选择CompositionAPI

Vue2的局限性

如何使用CompositionAPI解决问题

最佳的解决方法是将逻辑聚合就可以很好的代码可读性。

代码重用方法PK

Vue2中的跨组件重用代码，我们大概会有四个选择

1、Mixin - 混入

2、Mixin Factory - 混入工厂

返回一个

✅代码重用方便

✅继承关系清洗

3、ScopeSlots - 作用域插槽

❌可读性不高

❌配置复杂 - 需要再模板中进行配置

❌性能低 - 每个插槽相当于一个实例

4、CompositionApi - 复合API

✅代码量少

✅没有引入新的语法，只是单纯函数

✅异常灵活

✅工具语法提示友好 - 因为是单纯函数所以 很容易实现语法提示、自动补偿

二、setup & ref

使用CompositionAPI理由

✅更好的Typescript支持

✅在复杂功能组件中可以实现根据特性组织代码 - 代码内聚性， 比如：排序和搜索逻辑内聚

✅组件间代码复用

setup是什么

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

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

ref是什么

总结

可维护性明显提高

三、Methods

基础用法

自动拆装箱总结

四、 Computed - 计算属性

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

<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>

五、Reactive - 响应式语法

import { ref,computed } from "vue"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}  }}

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

这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}  }}

Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}
Attending
>
     {{name}}  
 Increase Capacity

//在这里可以使用toRefsimport {reactive,computed,toRefs} from "vue"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}  }}

return toRefs(event)

完整代码

   
Space Left : {{event.spacesLeft}} out of {{event.capacity}} 
   
Attending
   
      
{{name}}      
        
   Increase Capacity   
<script>//第一种import {ref,computed } from "vue"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 "vue"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>

六、 Modularizing

使用CompositionAPI的两个理由

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

2、组件间功能代码复用

七、 LifecycleHooks - 生命周期钩子

setup中调用生命周期钩子

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

八、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,   });

九、Sharing State - 共享状态

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

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 };}

应用

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 };  },};

十、Suspense - 悬念

复杂的Loading实现

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

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

Suspense基础语法

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

这就是Suspense Component，悬念组件。

<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>

骨架屏实现

十一、Teleport - 传送门

功能

基础语法

通过选择器QuerySelector配置

示例代码

<script>import { ref } from "vue";export default {  setup() {    const showText = ref(false);    setInterval(() => {      showText.value = !showText.value;    }, 1000);    return { showText };  },};</script>

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

以上就是【整理总结】详解Vue3的11个知识点的详细内容，更多请关注php中文网其它相关文章！

关键词： 生命周期 解决问题 相关文章