Vue3 学习笔记

原创 已于 2025-02-07 14:05:46 修改 · 1k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai 橘子梨

cknow-ai 关注

标签
#笔记 #vue #vue.js #前端 #前端框架
分类 前端开发
cknow-ai 代码可运行
于 2025-02-07 14:04:41 首次发布

1. Vue3 初识

1.1 Vue3 简介

  • 发布时间：2020年9月
  • 开发团队：尤雨溪团队
  • 开发时长：2年多

1.2 Vue3 特点

  • 性能提升：
    • 打包大小减少41%
    • 初次渲染快51%，更新渲染快133%
    • 内存占用减少54%
  • 源码升级：
    • 使用 Proxy 代替 Object.defineProperty 实现双向数据绑定
    • 重写虚拟DOM的实现和 Tree-Shaking
  • 更好的 TypeScript 支持
  • 新特性：
    • Composition API（组合式API）
    • setup 配置
    • ref 和 reactive
    • watch 和 watchEffect
    • provide 和 inject
    • 新的内置组件：Fragment、Teleport、Suspense
    • 新的生命周期钩子
    • 移除 keyCode 作为 v-on 的修饰符

1.3 创建 Vue3 工程项目

# 1. 确保 vue-cli 版本在 4.5.0 以上
vue -V 或 vue --version

# 2. 如果版本低，重新安装 vue-cli
npm install -g @vue/cli

# 3. 创建项目
vue create vue3-project

# 4. 进入项目目录
cd vue3-project

# 5. 启动项目
npm run serve

1.4 Vue3 目录结构分析

  • Vue3 入口文件 main.js： 
    import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App).mount('#app')

 Vue2 入口文件 main.js：

  • Vue2 入口文件 main.js： 
    import Vue from 'vue'
import App from './App.vue'
const vm = new Vue({
  render: h => h(App),
}).$mount('#app')

2. Composition API

2.1 setup 函数

  • 作用：Vue3 新增的配置项，值为一个函数，所有的组合式 API 方法都写在 setup 函数中。
  • 返回值：返回一个对象，对象中的属性和方法可以在模板中直接使用。
  • 示例： 
    export default {
  setup() {
    let name = "张三";
    let age = 20;
    function sayHello(m) {
      alert(`${name}--${age}--${m}`);
    }
    return {
      name,
      age,
      sayHello,
    };
  },
};

2.2 setup 执行时间

  • 执行时间：在 beforeCreate 之前执行，且 setup 中获取不到 this，this 为 undefined

2.3 ref 响应式函数

  • 作用：将基本类型数据处理成响应式数据。
  • 语法：const xxx = ref(数据变量)
  • 示例： 
    import { ref } from "vue";
export default {
  setup() {
    let name = ref("张三");
    let age = ref(20);
    function change() {
      name.value = "李四";
      age.value = 30;
    }
    return {
      name,
      age,
      change,
    };
  },
};

2.4 reactive 函数

  • 作用：定义一个对象类型的响应式数据，返回一个 Proxy 实例对象。
  • 语法：const 代理对象 = reactive(源对象)
  • 示例： 
    import { reactive } from "vue";
export default {
  setup() {
    let job = reactive({
      type: "前端工程师",
      salary: "20k",
    });
    function changeFn() {
      job.type = "后端开发工程师";
      job.salary = "30k";
    }
    return {
      job,
      changeFn,
    };
  },
};

3. Vue3 响应式原理

3.1 Vue2.x 的响应式原理

  • 实现原理：通过 Object.defineProperty() 对属性的读取、修改进行拦截。
  • 问题：
    • 无法添加和删除属性
    • 无法捕获到修改数组下标改变对应数组

3.2 Vue3 响应式原理

  • 实现原理：通过 Proxy 代理，拦截对象中任意属性的变化，包括属性的读取、修改、设置、删除。
  • 示例： 
    let data = {
  name: "张三",
  age: 30,
};
let p = new Proxy(data, {
  get(target, propName) {
    console.log(`读取p上的${propName}属性`);
    return Reflect.get(target, propName);
  },
  set(target, propName, value) {
    console.log(`修改p的${propName}属性`);
    return Reflect.set(target, propName, value);
  },
  deleteProperty(target, propName) {
    console.log(`删除p上的${propName}属性`);
    return Reflect.deleteProperty(target, propName);
  },
});

4. Vue3 中的组件传参

4.1 父传子

  • 父组件： 
    <template>
  <Testvue3 :tit="schoolName"></Testvue3>
</template>
<script>
import Testvue3 from "@/components/Testvue3";
export default {
  setup() {
    let schoolName = "青山";
    return { schoolName };
  },
};
</script>

  • 子组件： 
    <template>
  <p>{{ tit }}</p>
</template>
<script>
export default {
  props: ["tit"],
  setup(props) {
    console.log(props);
  },
};
</script>

4.2 子传父

  • 子组件： 
    

    <template>
  <button @click="emit">点击事件,子传父</button>
</template>
<script>
export default {
  emits: ["transfer"],
  setup(props, context) {
    function emit() {
      context.emit("transfer", 666);
    }
    return { emit };
  },
};
</script>

  • 父组件： 
    <template>
  <Testvue3 @transfer="showdata"></Testvue3>
</template>
<script>
import Testvue3 from "@/components/Testvue3";
export default {
  setup() {
    function showdata(value) {
      console.log(value);
    }
    return { showdata };
  },
};
</script>

5. Vue3 中的计算属性

  • 引入：import { computed } from "vue"
  • 示例： 
    

    <template>
  <Testvue3 @transfer="showdata"></Testvue3>
</template>
<script>
import Testvue3 from "@/components/Testvue3";
export default {
  setup() {
    function showdata(value) {
      console.log(value);
    }
    return { showdata };
  },
};
</script>

6. Vue3 中的 watch 监听器

  • 引入：import { watch } from "vue"
  • 示例： 
    import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    watch(sum, (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue);
    });
    return { sum };
  },
};

7. Vue3 生命周期

  • 变化：
    • beforeDestroy => beforeUnmount
    • destroyed => unmounted
  • 示例： 
    

    import { onMounted, onUnmounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      console.log("mounted");
    });
    onUnmounted(() => {
      console.log("unmounted");
    });
  },
};

8. Vue3 中的自定义 hook 函数

  • 定义：本质是一个函数，将 setup 中的公共逻辑抽离出来放在一个单独的 js 文件。
  • 示例： 
    

    // usePoint.js
import { reactive, onMounted, onBeforeUnmount } from "vue";
export function usePoint() {
  let point = reactive({ x: 0, y: 0 });
  onMounted(() => {
    document.onclick = function (event) {
      point.x = event.pageX;
      point.y = event.pageY;
    };
  });
  onBeforeUnmount(() => {
    document.onclick = null;
  });
  return point;
}

9. toRef 与 toRefs

  • toRef：将响应对象中的某个属性单独拿出来变成响应属性。
  • toRefs：将对象中的多个属性转换成响应数据。
  • 示例： 
    

    import { reactive, toRefs } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 20,
    });
    return { ...toRefs(person) };
  },
};

10. Vue3 中的路由

  • 安装：npm install vue-router@4
  • 配置： 
    

    import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
  { path: '/home', component: () => import('@/views/Home') },
  { path: '/category', component: () => import('@/views/Category') },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

11. Vue3 中的 Vuex

  • 安装：npm install vuex@next --save
  • 配置： 
    

    import { createStore } from 'vuex';
export default createStore({
  state: { count: 100 },
  getters: { getCount: (state) => state.count * 2 },
  mutations: { setTestA: (state, value) => state.count = value },
});

12. Pinia 状态管理

  • 简介：Pinia 是 Vuex 的替代品，可以看作是 Vuex 5。
  • 示例： 
    // counter.ts
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, doubleCount, increment };
});

点赞 点赞 25
评论 0
书签 书签 19
Vue3 笔记 (万字速通）
2301_79083000的博客
11-14 1565
2020年9月18日，Vue.js发布版3.0One Piece（n）4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
Vue3学习笔记
lirtyuj的博客
07-22 712
vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，提供了一套声明式的、组件化的编程模型，帮助更高效的开发用户界面。
VUE3：基础篇官网笔记
最新发布
qq_49581491的博客
04-04 610
本文总结了Vue应用创建和模板语法的核心知识点。在应用创建方面，重点介绍了createApp创建应用实例、根组件与组件树的概念、应用挂载方法以及应用级配置和资源注册。在模板语法方面，详细讲解了文本插值与原始HTML、Attribute绑定、JavaScript表达式和指令语法等核心内容。文章还针对常见面试问题进行了分析，并指出了开发中的易错点，如挂载顺序错误、滥用全局注册、属性绑定错误等。最后提供了代码范例，帮助开发者更好地理解这些概念的实际应用。
VUE学习笔记
qq_31210287的博客
12-05 1888
vue学习笔记
Vue3（重点笔记）
QTXLY的博客
11-03 1387
除了内置指令，Vue 也允许你定义自己的指令。javascript复制// 注册一个全局自定义指令 `v-focus`// 当绑定元素插入到 DOM 中时...// 聚焦元素el.focus();})// 使用。
Vue3/VueJS技术学习笔记
microvulome的博客
07-23 562
Vue3/VueJS技术学习笔记 1、第一个Vue.js应用程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello-vue</title> <!--导入Vue.js，开发环境版本，包含了有帮助的命令行警告--> <script src="https://cdn.jsdelivr.net/npm/
Vue2+Vue3学习笔记
tiantiantbtb的博客
04-29 1472
v2v3https://v3.cn.vuejs.org/ 会重定向到Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架从v2过渡到v3在F盘创建v2+v3学习笔记并用VSCODE打开。
Vue3学习笔记：掌握Vue3的核心特性
2401_86373285的博客
06-03 901
Vue 3 是 Vue.js 框架的最新版本，于 2020 年 9 月正式发布。Vue 3 带来了许多新特性和改进，包括更好的性能、更小的包体积、更好的 TypeScript 支持以及全新的 Composition API。setup是Vue3中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在。
Vue3学习笔记（尚硅谷）
LQlove1的博客
05-09 2300
1. 理解：Vue3.0中一个新的配置项，值为一个函数。 2. setup是所有composition API "表演的舞台"。 3. 组件中所用到的数据、方法等，均要配置在setup中。 4. setup函数的两种返回值：
vue3学习笔记
weixin_46448867的博客
03-01 358
vue3常用API学习笔记
Vue3笔记
m0_67445092的博客
01-08 1062
打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%什么是hook？—— 本质是一个函数，把setup函数中使用到的Composition API（组合式API）进行了封装。类似于vue2.x中的mixin。自定义hook的优势：复用代码。让setup中的逻辑更清楚易懂。在工程目录下创建一个hooks文件夹，里面的文件命名规则useXxxx 明起意// 引入需要的组合// 创建函数 点击函数并且暴露出去// 实现鼠标点击获取坐标数据x: 0,y: 0})
【无标题】
qq_51685537的博客
12-24 1256
修改名字
vue3笔记
qq_31539817的博客
05-25 3157
第一章：vue3.0基础 1，认识vue3.0 vue3.0发布时间为2020-9-18，从项目体验上，vue3.0比起vue2.0有以下优势： 打包大小减少41% 初次渲染块55%，更新渲染块133% 内存占比少54% 2，新增内容 源码重构，新增特性，重写架构。 第二章：使用vue3.0 创建vue3.0有两种方式：使用vue-cli和使用vite i.使用cli： vue create vue-name 选择vue3.0项目 2，使用vite 安装vite ..
Vue3 核心知识点笔记（超级详细教程）
m0_74488469的博客
08-04 1951
特性refreactive适用类型基本类型、对象类型仅对象类型（对象、数组等）访问方式脚本中需用 .value，模板中不用直接访问属性（无需 .value）本质包装成含 value 的对象返回对象的响应式代理推荐场景基本类型、简单对象或数组复杂对象（如嵌套对象）特性toRefstoRef作用批量转换响应式对象的所有属性单独转换响应式对象的单个属性输入响应式对象响应式对象 + 属性名输出包含多个 ref 的普通对象单个 ref 对象适用场景。
Vue3的基本语法及使用（vue3尚硅谷学习笔记）
vayne_1的博客
10-14 4395
适合初学vue3者，以及学习观看尚硅谷视频的同学，本文精简笔记内容
[Vue]Vue3学习笔记(尚硅谷)
emmmm.....
01-04 7178
创建Vue3项目 vue-cli vite 项目结构 Vue3开发者工具的安装 初识setup ref 函数 reactive函数 Vue3.0中的响应式原理 vue2.x的响应式 Vue3.0的响应式 reactive对比ref setup的两个注意点 computed函数 watch函数 watchEffect函数 生命周期 自定义hook函数 toRef shallowReactive readonly 与 shallowReadonly toRaw 与 markRaw
VUE3笔记
m0_74737076的博客
02-20 1452
reactive（）作用作用：侦听一个或多个数据的变化，数据变化时执行回调函数。两个额外的参数：1.immediate(立即执行)，2.deep（深度侦听）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值