later-zc notes

Appearance

一. Vue 在前端重要性 ​

1. 认识 Vue ​

  • Vue （读音/vjuː/，类似于 view）是一套用于构建用户界面的渐进式 js 框架

    • 全称是 Vue.js 或者 Vuejs
    • 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型
    • 帮助你高效地开发用户界面，无论任务是简单还是复杂

  • 什么是渐进式框架呢？

    • 表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目

      image-20220728222811272

2. 目前 Vue 在前端处于什么地位？ ​

  • 目前前端最流行的是三大框架：Vue、React、Angular

    image-20220728222849824

3. 框架数据对比（Google 指数） ​

image-20220728222913496

4. 框架数据对比（百度指数） ​

image-20220728222934313

5. npm 下载量 ​

image-20220728222955827

6. 框架数据对比（GitHub） ​

image-20220728223014984

7. 谁是最好的前端框架？ ​

  • 当然，我不会去给出我的结论：
    • 首先，这是一个敏感的话题，在很多地方都争论不休，就像很多人喜欢争论谁才是世界上最好的语言一样
    • 其次，争论这个话题是没有意义的，争论不休的话题
  • 但是，我们从现实的角度，分析一下，学习哪一门语言更容易找到工作？
    • 找后端的工作：优先推荐 Java、其次推荐 Go、再次推荐 Node，可能不推荐 PHP、C#
    • 找前端的工作：优先推荐 JavaScript（TypeScript）、其次 Flutter、再次 Android（Java、Kotlin）、iOS（OC、Swift）
    • 也有很多的其他方向：游戏开发、人工智能、算法工程师等等
  • 那么，就前端来说，学习了 HTML、CSS、JavaScript，哪一个框架更容易找到工作？
    • 如果去国外找工作，优先推荐 React、其次是 Vue 和 Angular
    • 如果在国内找工作，优先推荐、必须学习 Vue，其次是 React，其次是 Angular

二. Vue2 和 Vue3 选择 ​

1. 学习 Vue2 还是 Vue3？ ​

image-20220728223233117

2. 目前需要学习 Vue3 吗？ ​

  • 在2020年的9月18日，万众期待的 Vue3 终于发布了正式版，命名为“One Piece”
    • 更好的性能
    • 更小的包体积
    • 更好的 TypeScript 集成
    • 更优秀的 API 设计
  • 那么现在是否是学习 vue3 的时间呢？
    • 答案是肯定的
    • Vue3 目前已经是稳定的版本，并且 Vue3 在2022年2月7日已经成为默认安装版本
    • 目前社区也经过一定时间的沉淀，更加的完善了，包括 AntDesignVue、Element-Plus 都提供了对 Vue3 的支持，所以很多公司目前新的项目都已经在使用 Vue3 来进行开发了
    • 并且在面试的时候，几乎都会问到各种各样 Vue3 相关的问题

三. 引入 Vue 的方式 ​

1. 如何使用 Vue 呢？ ​

  • Vue 的本质，就是一个 js 库：
    • 刚开始我们不需要把它想象的非常复杂
    • 我们就把它理解成一个已经帮助我们封装好的库
    • 在项目中可以引入并且使用它即可
  • 那么安装和使用 Vue 这个 js 库有哪些方式呢？
    • 方式一：在页面中通过 CDN 的方式来引入
    • 方式二：下载 Vue 的 js 文件，并且自己手动引入
    • 方式三：通过 npm 包管理工具安装使用它
    • 方式四：直接通过 Vue CLI 创建项目，并且使用它

2.方式一：CDN 引入 ​

  • Vue 的 CDN 引入：

    html
    <script src="https://unpkg.com/vue@next"></script>

  • Hello Vue 案例的实现：

    image-20220728223551971

3. 方式二：下载和引入 ​

  • 下载 Vue 的源码，可以直接打开 CDN 的链接：

    • 打开链接，复制其中所有的代码
    • 创建一个新的文件，比如 vue.js，将代码复制到其中

  • 通过 script 标签，引入刚才的文件：

    html
    <script src="../js/vue.js"></script>

  • 你好啊，Vue3，案例的实现：

    image-20220728223655251

四. Vue 案例初体验 ​

1. Vue 初体验 ​

  • 案例体验一：动态展示 Hello World 数据

  • 案例体验二：展示列表的数据

  • 案例体验三：计数器功能实现

    image-20220728223810258

2. 计数器案例 ​

  • 如果我们希望实现一个计数器的案例：
    • 点击+1，那么内容会显示数字+1
    • 点击-1，那么内容会显示数字-1
  • 我们可以选择很多种方式来实现：
    • 在这里我们就对比原生和 Vue 的实现方式的不同

3. 计数器原生实现 ​

image-20220728223857122

4. 计数器 Vue 实现 ​

image-20220728223923938

五. 命令和声明式编程 ​

1. 声明式和命令式 ​

  • 原生开发和 Vue 开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
    • 命令式编程和声明式编程
    • 命令式编程关注的是 how to do，自己完成整个 how 的过程
    • 声明式编程关注的是 what to do，由框架(机器)完成 how` 的过程
  • 在原生的实现过程中，我们是如何操作的呢？
    • 我们每完成一个操作，都需要通过 js 编写一条代码，来给浏览器一个指令
    • 这样的编写代码的过程，我们称之为命令式编程
    • 在早期的原生 js 和 jQuery 开发的过程中，我们都是通过这种命令式的方式在编写代码的
  • 在 Vue 的实现过程中，我们是如何操作的呢？
    • 我们会在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods
    • 这样的编写代码的过程，我们称之为是声明式编程
    • 目前 Vue、React、Angular、小程序的编程模式，我们称之为声明式编程

2. MVVM 模型 ​

  • MVC 和 MVVM 都是一种软件的体系结构

    • MVC 是 Model – View –Controller 的简称，是在前期被使用非常框架的架构模式，比如 iOS、前端
    • MVVM是 Model-View-ViewModel 的简称，是目前非常流行的架构模式

  • 通常情况下，我们也经常称 Vue 是一个 MVVM 的框架

    • Vue 官方其实有说明，Vue 虽然并没有完全遵守 MVVM 的模型，但是整个设计是受到它的启发的

      image-20220728224154192

六. Vue 的 options ​

1. data 属性 ​

  • data 属性是传入一个函数，并且该函数需要返回一个对象：
    • 在 Vue2.x 的时候，也可以传入一个对象（虽然官方推荐是一个函数）
    • 在 Vue3.x 的时候，必须传入一个函数，否则就会直接在浏览器中报错
  • data 中返回的对象会被 Vue 的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
    • 所以我们在 template 或者 app 中通过 访问 counter，可以从对象中获取到数据
    • 所以我们修改 counter 的值时，app 中的 也会发生改变
  • 具体这种响应式的原理，我们后面会有专门的篇幅来讲解

2. methods 属性 ​

  • methods 属性是一个对象，通常我们会在这个对象中定义很多的方法：

    • 这些方法可以被绑定到模板中
    • 在该方法中，我们可以使用 this 关键字来直接访问到 data 中返回的对象的属性

  • 对于有经验的同学，在这里提一个问题，官方文档有这么一段描述：

    • 问题一：为什么不能使用箭头函数（官方文档有给出解释）？

    • 问题二：不使用箭头函数的情况下，this 到底指向的是什么？（可以作为一道面试题）

      image-20220729131119866

3. 问题一：method中的方法 为什么不能使用箭头函数？ ​

  • 我们在 methods 中要使用 data 返回对象中的数据：
    • 那么这个this 是必须有值的，并且应该可以通过 this 获取到 data 返回对象中的数据
  • 那么我们这个 this 能不能是 window 呢？
    • 不可以是 window，因为 window 中我们无法获取到 data 返回对象中的数据
    • 如果我们使用箭头函数，那么这个 this 就会是 window 了
  • 为什么是 window 呢？
    • 这里涉及到箭头函数使用 this 的查找规则，箭头函数不绑定 this，所以就会去上层作用域中查找 this，而函数的作用域在定义的时候就已经确定下来了，所以会去箭头函数当前所处的上层作用域中来查找 this
    • 最终刚好找到的是全局作用域中的 this，所以就是 window

2. 问题二：method中的方法 其this到底指向什么？ ​

  • 事实上 Vue 的源码当中就是对 methods 中的所有函数进行了遍历，并且通过 bind 绑定了 this：

    image-20220729132520417

3. 其他属性 ​

  • 当然，这里还可以定义很多其他的属性，我们会在后续进行讲解：
    • 比如 props、computed、watch、emits、setup 等等
    • 也包括很多的生命周期函数

Released under the MIT License.

Copyright © 2024-present later-zc