vue3知识点

已于 2023-08-15 10:35:25 修改
阅读量197 收藏
点赞数
文章标签： vue.js 前端
于 2023-08-15 09:08:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42401946/article/details/132289574
版权

1.认识及创建Vue3
https://www.bilibili.com/video/BV18K4y1T7Nc?spm_id_from=333.337.search-card.all.click&vd_source=e499c93499db59599a71c5a3d947fade

了解相关信息

  • Vue.js 3.0 "One Piece"正式版在2020年9月份发布
  • 2年多开发，100+位贡献者，2600+次提交，600+次PR
  • Vue3支持Vue2的大多数特性s
  • 更好的支持Typescript

性能提升

  • 打包大小减少了41%
  • 初次渲染快55%，更新渲染快133%
  • 内存减少54%
  • 使用Proxy代替defineProperty实现数据响应式
  • 重写虚拟DOM的实现和Tree-shaking

新增特性

  • Composition(组合)Api
  • setup
    • ref和reactive
    • computed和watch
    • 新的生命周期函数
    • provide和inject
    • …
  • 新组件
    • Fragment-文档碎片
    • Teleport-瞬移组件的位置
    • Suspense-异步加载组件的loading界面
  • 其他API更新
    • 全局API的修改
    • 将原来的全局API转移到应用对象
    • 模板语法变化

使用vue-cli创建
文档：https://cli.vuejs.org/zh/guide/creating-a-project.html

//安装或升级
npm install -g @vue/cli
//保证 vue-cli版本在4.5.0以上
vue --version
//创建项目
vue create my-project

使用create-vue创建项目

  • 前提环境条件
    • 已安装16.0或更高版本的Node.js
  • 创建一个Vue应 (这一指令将会安装并执行create-vue)
npm init vue @latest

2.setup及接收参数
setup
我们可以跟以前一样定义data和methods,但是在vue3中我们更推荐使用setup函数

  • setup是一个函数，只在初始化时执行一次
    • 以后大部分代码都是在setup函数中写
  • 返回一个对象，对象中的属性或方法，模板中可以直接使用
  • setup返回的数据会和data和methods进行合并，setup优先级更高
  • setup函数中没有this
    • 以后开发都不使用this了
  • setup不要写成async函数
    因为setup函数必须返回一个json对象供模板使用，如果setup是一个async函数，返回的将是一个promise对象
    如果setup是一个async函数，那该组件就成了一个异步组件，需要配合Suspense组件才能使用

原始写法（需要return）及语法糖写法（不需要return）

//原始
<script>
export default {
  setup() {
    const message = "this is message";
    const logMessage = () => {
      console.log(message);
    };
    return {
      message,
      logMessage,
    };
  }
};

//语法糖
<script setup>
const message = "this is message";
const logMessage = () => {
  console.log(message);
};
</script>

setup的参数

  • props-接收父组件传入的通过props声明过的属性
  • context-是一个对象，解构出来包含
    • attrs-接收父组件传入的没有通过props声明过的属性，相当于this.$attrs
    • slots-接收父组件传入的插槽内容的对象，相当于this.$slots
    • emit-用来分发自定义事件的函数，相当于this.$emit
      父组件：
<template>
  <Child msg="hello world" msg2="vue3" @custom-event="handle">
    <template #aaa>我是插槽</template>
  </Child>
</template>


<script lang="ts">
import Child from "./Child.vue";
export default {
  components: {
    Child,
  },
  setup() {
    const handle = (val) => {
      console.log("val", val);
    };
    return {
      handle,
    };
  },
};
</script>

子组件：

<template>
  <div>msg-{{ msg }}</div>
  <div>msg2-{{ msg2 }}</div>
  <slot name="aaa" />
  <button @click="fn">按钮</button>
</template>


<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: ["msg"],
  setup(props, { attrs, slots, emit }) {
    const fn = () => {
      emit("custom-event", 123);
    };
    return {
      msg2: attrs.msg2,
      fn,
    };
  },
});
</script>

3. 组合式API - reactive和ref函数
reactive（）
作用：接收对象类型数据的参数传入并返回一个响应式的对象
核心步骤：

<script setup>
import { reactive } from "vue";
const state = reactive({
  count: 0,
});
const setState = () => {
  state.count++;
};
</script>
<template>
  <div>
    <button @click="setState">{{ state.count }}</button>
  </div>
</template>

toRefs

  • 将响应式对象中所有属性包装为ref对象，并返回包含这些ref对象的普通对象
  • 应用：对reactive定义的对象进行toRefs包装，包装之后的对象中每个属性都是响应式的
<template>
  <h1>首页</h1>
  <p>a:{{ a }}</p>
  <p>b:{{ b }}</p>
  <p>str:{{ str }}</p>
  <p>boo:{{ boo }}</p>
  <p>boo:{{ obj }}</p>
  <button @click="update">更新</button>
</template>


<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
  name: "HomeView",
  setup() {
    const state = reactive({
      a: 1,
      b: 2,
      str: "abc",
      boo: true,
      obj: { a: 123 },
    });
    const update = () => {
      console.log("update");
      state.a++;
      state.b++;
      state.str += "--";
      state.boo = !state.boo;
      state.obj.a++;
    };
    return {
      ...toRefs(state),
      update,
    };
  },
});
</script>

ref
作用：接收简单类型或对象类型的数据传入并返回一个响应式的对象

<script setup>
import { ref } from "vue";
const count = ref(0);
const setState = () => {
  count.value++;
};
</script>
<template>
  <div>
    <button @click="setState">{{ count }}</button>
  </div>
</template>

<template>
  <h1>首页</h1>
  <p>a:{{ a }}</p>
  <p>b:{{ b }}</p>
  <p>str:{{ str }}</p>
  <p>boo:{{ boo }}</p>
  <button @click="handle2">按钮</button>
</template>


<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "HomeView",
  setup() {
    let a = ref(1);
    let b = ref(2);
    let str = ref("abc");
    let boo = ref(true);
    const handle2 = () => {
      a.value++;
      b.value++;
      str.value += "--";
      boo.value = !boo.value;
      console.log(a, b);
    };
    return {
      a,
      b,
      str,
      boo,
      handle2,
    };
  },
});
</script>
  • 作用：定义响应式数据
  • 语法：const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用（reference）对象
    • js中修改数据: xxxx.value = otherValue
    • 模板中显示数据：不需要.value, 直接使用{{xxxx}}
  • 一般用来定义一个原始类型的响应式数据

4. 计算属性computed
回顾vue2中的计算属性

computed: {
    // 只有getter
    fullName() {
      return this.firstName + " " + this.lastName;
    },
    // 有getter和setter
    fullName2: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(val) {
        const names = val.split(" ");
        this.firstName = names[0];
        this.lastName = names[1];
      },
    },
  },

vue3的计算属性

  • computed-用法跟vue2类似，不过需要先引入computed
<script setup>
import { ref, computed } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]);
const computedList = computed(() => {
  return list.value.filter((item) => item > 2);
});
</script>
<template>
  <div>原始响应式数组-{{ list }}</div>
  <div>计算属性数组-{{ computedList }}</div>
</template>

5. 侦听属性watch
侦听属性watch
回顾vue2的侦听属性

watch:{
      obj(newVal,oldVal){
        console.log(newVal,oldVal);
      },
      // 立即监听、深度监听
      obj:{
        handler(newVal,oldVal){
          console.log(newVal,oldVal)
        },
        immediate:true, //初始化立即执行一次
        deep:true, //深度监视
      },
      'obj.a'(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    }

vue3的侦听属性：

  • watch-指定监听数据
    • 监视指定的一个或多个响应式数据，一旦数据变化，就自动执行监视回调
      • 如果是监听reactive对象中的属性，必须通过函数来指定
      • 监听多个数据，使用数组来指定
    • 默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次
    • 通过配置deep为true,来指定深度监视
  • watchEffect-不指定监听数据
    • 不用直接指定要监视的数据，回调函数中使用的哪些响应式数据就监视哪些响应式数据
    • 默认初始时就会执行第一次
      使用时需要先引入watch和watchEffect
//监听一个值
<script setup>
import { ref, watch } from "vue";
const count = ref(0);
const setCount = () => {
  count.value++;
};
watch(count, (newCal, oldVal) => {
  console.log("count变化了", newCal, oldVal);
});
</script>
<template>
  <div>
    <button @click="setCount">{{ count }}</button>
  </div>
</template>

//监听多个值
<script setup>
import { ref, watch } from "vue";
const count = ref(0);
const setCount = () => {
  count.value++;
};

const name = ref("cp");
const setName = () => {
  name.value = "pc";
};

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log("count或者name变化了", [newCount, oldCount], [newName, oldName]);
});
</script>
<template>
  <div>
    <button @click="setCount">修改count-{{ count }}</button>
    <button @click="setName">修改name-{{ name }}</button>
  </div>
</template>

//立即执行
<script setup>
import { ref, watch } from "vue";
const count = ref(0);
const setCount = () => {
  count.value++;
};
watch(
  count,
  (newCount, oldCount) => {
    console.log("count变化了", newCount, oldCount);
  },
  {
    immediate: true, //立即执行 (首次自动调用一次)
  }
);
</script>
<template>
  <div>
    <button @click="setCount">{{ count }}</button>
  </div>
</template>

deep
默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要deep选项

//deep监听全部属性对象
<script setup>
import { ref, watch } from "vue";
const state = ref({ count: 0, age: 20 });
const setCount = () => {
  // 对象直接修改属性 ->不会触发回调（必须加deep）
  state.value.count++;
};
watch(
  state,
  () => {
    console.log("变化了");
  },
  {
    deep: true, //深度监视
  }
);
</script>
<template>
  <div>
    <button @click="setCount">{{ state.count }}</button>
  </div>
</template>

精确侦听对象的某个属性
需求：再不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

<script setup>
import { ref, watch } from "vue";
const state = ref({ name: "chaichai", age: 20 });
const setName = () => {
  state.value.name = "new-chaichai";
};
const setAge = () => {
  state.value.age = 22;
};
//语法：两个回调函数的写法（只侦听其中一个属性）
watch(
  () => state.value.age,
  () => {
    console.log("age变化了");
  }
);
</script>
<template>
  <div>
    <div>当前name -- {{ state.name }}</div>
    <div>当前age -- {{ state.age }}</div>
    <button @click="setName">修改name</button>
    <button @click="setAge">修改age</button>
  </div>
</template>

6. 组合式API - 生命周期函数
声明周期
vue2中的生命周期钩子函数依旧可以使用，不过建议使用vue3的钩子函数

  • vue2与vue3声明周期对比
    在这里插入图片描述
    注意：beforeDestroy和destroyed已经被废弃，如果想继续使用vue2的写法，对应的api时onBeforeUnmount(beforeDestroy)和onUnmounted(destroyed)
<template></template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onActivated,
  onDeactivated,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "HomeView",
  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onActivated(() => {
      console.log("onActivated");
    });
    onDeactivated(() => {
      console.log("onDeactivated");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
    return {};
  },
});
</script>

7. 组合式API - 父子通信
父传子
基本思想
1.父组件中给子组件绑定属性
2.子组件内部通过defineProps接收

//父组件
<script setup>
import { ref } from "vue";
import Son from "./components/son.vue";
const message = ref("father");
</script>
<template>
  <div>
    <h2>父组件</h2>
    <Son :message="message" />
  </div>
</template>

//子组件
<script setup>
const props = defineProps({
  message: String,
});
</script>
<template>
  <div>
    <h2>子组件</h2>
    <div>父组件传过来的数据-{{ props.message }}</div>
  </div>
</template>
<style scoped>
</style>

子传父
基本思想
1.负组件中给子组件标签通过@绑定事件
2.子组件内部通过defineEmits方法触发事件

//父组件
<script setup>
import { ref } from "vue";
import Son from "./components/son.vue";
const getMessage = (msg) => {
  console.log(msg);
};
</script>
<template>
  <div>
    <h2>父组件</h2>
    <Son @get-message="getMessage" />
  </div>
</template>

//子组件
<script setup>
const emit = defineEmits(["get-message"]);
const sendMsg = () => {
  emit("get-message", "123");
};
</script>
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMsg">sendMsg</button>
  </div>
</template>
<style scoped>
</style>

8. 组合式API - 模板引用(ref拿节点)
概念：通过ref标识获取真实的dom对象或者组件实例对象

获取拿dom对象

<script setup>
import { onMounted, ref } from "vue";
const h1Ref = ref(null);
onMounted(() => {
  console.log("123", h1Ref.value);
});
</script>
<template>
  <div>
    <h1 ref="h1Ref">我是dom标签h1</h1>
  </div>
</template>

获取组件实例对象
defineExpose()
默认情况下

//父组件
<script setup>
import { onMounted, ref } from "vue";
import Son from "./components/son.vue";
const comRef = ref(null);
onMounted(() => {
  console.log("123", comRef.value);
});
</script>
<template>
  <div>
    <Son ref="comRef" />
  </div>
</template>

//子组件
<script setup>
import { ref } from "vue";
const name = ref("test name");
const setName = () => {
  name.value = "newtest";
};
defineExpose({
  name,
  setName,
});
</script>
<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<style scoped>
</style>

9. 组合式API - provide和inject

作用和场景：顶层组件想任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据
1.顶层组件通过provide函数提供数据

provide('key', 顶层组件中的的数据)

2.底层组件通过inject函数获取数据

const message = inject('key')

//父组件
<script setup>
import {ref, provide } from "vue";
import RoomMsgItem from "./components/room-msg-item.vue";
const data = ref(0)
provide("data-key", data);
</script>
<template>
  <div>
    顶层组件
    <RoomMsgItem />
  </div>
</template>

//子组件
<script setup>
import { inject } from "vue";
const roomData = inject("data-key");
</script>
<template>
  <div>
    底层组件
    <div>来自顶层组件中的数据为 -- {{ roomData }}</div>
  </div>
</template>

跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

//父组件
<script setup>
import { ref, provide } from "vue";
import RoomMsgItem from "./components/room-msg-item.vue";
const data = ref(0);
const setCount = () => {
  data.value++;
};
provide("data-key", data);
provide("count-key", setCount);
</script>
<template>
  <div>
    顶层组件
    <RoomMsgItem />
  </div>
</template>

//子组件
<script setup>
import { inject } from "vue";
const roomData = inject("data-key");
const countKey = inject("count-key");
</script>
<template>
  <div>
    底层组件
    <div>来自顶层组件中的数据为 -- {{ roomData }}</div>
    <button @click="countKey">来自顶层的方法</button>
  </div>
</template>

10. Pinia 状态管理库
Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品
优势：

  • 提供更加简单的API（去掉了mutation）
  • 提供符合组合式风格的API（和Vue3新语法统一）
  • 去掉了modules的概念，每一个store都是一个独立的模块
  • 搭配TypeScript一起使用提供可靠的类型推断

下载依赖

npm install pinia

main.js配置

import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

使用Pinia实现计数器案例
在src下新建 stores/counter.js

// counter.js文件
import { defineStore } from "pinia";
import { ref } from 'vue'
export const useCounterStore = defineStore('counter',()=>{
    // 定义数据(state)
    const count = ref(0)
    // 定义修改数据的方法(action 同步+异步)
    const increment = () =>{
        count.value++
    }
    // 以对象的方式return供组件使用
    return{
        count,
        increment
    }
})

// 调用的文件
<script setup>
// 1.导入use打头的方法
import { useCounterStore } from "@/stores/counter.js";
// 2.执行方法得到store实例对象
const counterStore = useCounterStore();
console.log("counterStore", counterStore);
</script>
<template>
  <button @click="counterStore.increment">{{ counterStore.count }}</button>
</template>

getters实现
Pinia中的getters直接使用computed函数进行模拟

// counter.js文件
// 定义数据(state)
const count = ref(0)
// getter定义
const doubleCount = computed(()=>count.value * 2)

// 调用的文件
<script setup>
// 1.导入use打头的方法
import { useCounterStore } from "@/stores/counter.js";
// 2.执行方法得到store实例对象
const counterStore = useCounterStore();
console.log("counterStore", counterStore);
</script>
<template>
  <button @click="counterStore.increment">{{ counterStore.count }}</button>
  {{ counterStore.doubleCount }}
</template>

action如何实现异步
action中实现异步和组件中定义数据和方法的风格完全一致

// counter.js文件
const API_URL = 'http://geek.itheima.net/v1_0/channels'
// 定义数据(state)
const list = ref([])
// 异步action
const getList = async() =>{
   const res = await axios.get(API_URL)
   list.value = res.data.data.channels
}

// 调用的文件
<script setup>
// 1.导入use打头的方法
import { useCounterStore } from "@/stores/counter.js";
import { onMounted } from "vue";
// 2.执行方法得到store实例对象
const counterStore = useCounterStore();
console.log("counterStore", counterStore);
onMounted(() => {
  counterStore.getList();
});
</script>
<template>
  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

storeToRefs
使用storeToRefs函数可以辅助保持数据（state+getter）的响应式解构

//   解构变量
<script setup>
// 1.导入use打头的方法
import { useCounterStore } from "@/stores/counter.js";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
// 2.执行方法得到store实例对象
const counterStore = useCounterStore();
const { count, doubleCount } = storeToRefs(counterStore);
onMounted(() => {
  counterStore.getList();
});
</script>
<template>
  <button @click="counterStore.increment">{{ count }}</button>
  {{ doubleCount }}
  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

// 解构方法
<script setup>
// 1.导入use打头的方法
import { useCounterStore } from "@/stores/counter.js";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
// 2.执行方法得到store实例对象
const counterStore = useCounterStore();
const { count, doubleCount, list } = storeToRefs(counterStore);
// 方法直接从原来的counterStore中解构赋值
const { increment } = counterStore;
onMounted(() => {
  counterStore.getList();
});
</script>
<template>
  <button @click="increment">{{ count }}</button>
  {{ doubleCount }}
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
浅巷长歌999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3知识点练习项目（包含所有常用的知识点）
04-29
适合于刚学vue3，对于知识点掌握不是很好的人群。可参考该项目如何使用到的知识点。 包括了Options API，Composition API的使用。 该资源直接解压导入自己的编译工具， 1.使用npm install 下载node_modules依赖包。 ...
前端-Vue3.x-知识图谱
02-19
Vue3.x是Vue.js框架的最新版本，它在性能、API设计、响应式系统等多个方面进行了重大改进，为开发者带来了更高效、更灵活的开发...通过深入理解和实践这些知识点，开发者可以更好地利用Vue3.x构建高性能的前端应用。
Vue3知识点总结
weixin_38491914的博客
04-07 2843
vue2 与 vue3 渲染性能区别: diff 优化: https://vue-next-template-explorer.netlify.app vue2 对虚拟DOM 是进行一个全局对比 vue3 新增了静态标记（PatchFlag） 生成DOM树时，只会对动态渲染的DOM数据添加标识，下次数据变化的时候只需要对有标记的DOM进行比对， 并且可以同归flag的信息得知当前节点要对比的内容 hoistStatic 静态提升: vue2 无论DOM元素是否参与更新，都会重新创建，进行
Vue3知识点
weixin_45921734的博客
05-18 8050
使用vite创建vue3 npm create vite 或者 yarn create vite composition API ref reactive torefs watch watch Effact computed setup 它是组件内使用composition API的入口，执行时机是在beforecreate之前执行的 setup的参数 props:值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性 context：上下文对象 attrs:值为对象，包含：组件外部传递过来
vue3知识点：customRef
刘大猫
07-18 1729
vue3知识点：customRef
vue3知识点：生命周期
刘大猫
07-16 1316
vue3知识点：生命周期
vue3知识点：setup
刘大猫
07-16 900
vue3知识点：setup
Vue3知识点（尚硅谷张天禹）
weixin_48240707的博客
04-19 3134
Vue3.0基础知识
vue3知识点：ref函数
刘大猫
07-16 2354
vue3知识点：ref函数
vue3知识点：toRaw 与 markRaw
刘大猫
07-18 1999
vue3知识点：toRaw 与 markRaw
Vue3常用知识点总结
Ssss555123的博客
11-28 3224
Vue.js 3.0 "One Piece" 正式版在今年9月份发布2年多开发, 100+位贡献者, 2600+次提交, 600+次PRVue3支持vue2的大多数特性更好的支持Typescript使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂//需求1: 收集用户鼠标点击的页面坐标hooks/useMousePosition.ts/*收集用户鼠标点击的页面坐标*/
vue 知识点.docx
01-05
Vue.js 知识点概述 在本文中，我们将对 Vue.js 进行详细的介绍，包括其定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点。 什么是 Vue.js Vue.js 是一套构建用户界面的渐进式框架。与其他重量...
Vue知识点以及面试题
11-24
Vue知识点以及面试题
vue3基础知识点快速掌握
最新发布
06-07
### Vue3基础知识点快速掌握 #### 一、Vue3简介 **发布时间与版本：** - **发布日期：** 2020年9月18日 - **版本号：** 3.0，代号"One Piece" - **最新版本：** 截至2023年10月，最新公开版本为3.3.4 **关键更新...
vue 3.0 基础知识点
01-14
通过上述知识点的学习，我们可以了解到 Vue 3.0 在前端开发领域的重要性和应用价值。无论是指令、数据绑定还是组件通信等方面，Vue 3.0 都提供了强大的工具和机制，帮助开发者构建高效、可维护的前端应用程序。
vue相关知识点1
08-08
Vue.js 是一款流行的前端JavaScript框架，它以轻量级...以上只是Vue.js的部分知识点，实际上Vue还涉及到路由、插槽、混入、异步组件、过渡效果等诸多内容，理解并掌握这些知识点，将有助于构建出高效、健壮的前端应用。
Vue3基础知识点速记图解
04-19
以上只是Vue3众多新特性的一部分，实际学习过程中，你还需要了解`setup`中的`return`、`emit`的使用、`Suspense`组件的深入理解、以及如何在项目中逐步迁移Vue2到Vue3等知识点。通过深入学习和实践，你将能熟练掌握...
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
vue3知识点整理汇总
10-16
好的，以下是我整理的 Vue3 的知识点汇总： 1. Composition API：Vue3 中引入了 Composition API，它是一种基于函数的 API，可以让我们更灵活地组织组件逻辑。 2. Teleport：Vue3 中新增了 Teleport 组件，可以让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值