vue笔记-01

​
认识vue
vue为一套渐进式框架

渐进式框架：即一开始不需要你完全掌握它的全部特性，可以后续逐步增加功能；就是你可以用我的一部分，而不是用了我这一点就必须用我的所有部分

vue所占有地位

学习哪一门语言更容易找到工作？

找后端的工作：优先推荐Java，其次推荐Go，再次推荐Node（JavaScript），可能不推荐PHP、C#；

找前端的工作：优先推荐JavaScript（TypeScript）、其次Flutter、再次Android（Java、Kotlin）、iOS（OC、Swift）;

其他方向：游戏开发、人工智能、算法工程师

那么，就前端来说，学习了HTML、CSS、JavaScript，哪一个框架更容易找到工作？

如果去国外找工作，优先推荐React、其次是Vue和Angular，不推荐jQuery了；

如果在国内找工作，优先推荐、必须学习Vue，其次是React，其次是Angular，不推荐jQuery了

或者可以再加上小程序

学习vue2还是vue3？

尤雨溪：直接学vue3就行了，基础概念是一模一样的

vue3带来的变化（源码）

• 源码通过monorepo的形式来管理源代码：

  • Mono：单个
  • Repo：repository仓库
  • 主要是将许多项目的代码存储在同一个repository中；
  • 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
  • 而且模块划分的更加清晰，可维护性、可扩展性更强；

• 源码使用TypeScript来进行重写：

  • 在Vue2.x的时候，Vue使用Flow来进行类型检测；

  • 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；

Vue3带来的变化（性能）

• 使用Proxy进行数据劫持

  • 在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的；

  • 这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；

  • 所以在Vue2.x的时候，不得不提供一些特殊的API，比如$set或$delete，事实上都是一些hack方法，也增加了 开发者学习新的API的成本；

  • 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到；

• 删除了一些不必要的API：

  • 移除了实例上的$on, $off 和 $once；
  • 移除了一些特性：如filter、内联模板等；

• 包括编译方面的优化：

  • 生成Block Tree、Slot编译优化、diff算法优化；

Vue3带来的变化（新的API）

• 由Options API 到 Composition API：
  • 在Vue2.x的时候，我们会通过Options API来描述组件对象；
  • Options API包括data、props、methods、computed、生命周期等等这些选项；
  • 存在比较大的问题是多个逻辑可能是在不同的地方：
  • 比如created中会使用某一个method来修改data的数据，代码的内聚性非常差；
  • Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找；
• Hooks函数增加代码的复用性：
  • 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑；
  • 但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题；
  • 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的；

如何使用vue?

vue本质上就是一个别人帮我们封装好的javaScript库

在项目中直接可以引入并且使用它即可

安装和使用vue这个javaScript库有哪些方式？

1. 在页面中通过cdn的方式来引入

cdn服务器理解
我们项目完成后会进行打包形成静态资源，但是此时用户无法直接进行访问，所以我们需要对次资源进行部署到服务器，最后用户即可通过访问服务器进行下载使用
因为访问速度与服务器所在地址有关，如服务器部署在广州、北京甚至国外，此时对应地区访问的速度将不同，谁近谁快，但是如果在多地部署多个服务器的话依旧无法平衡各地用户访问速度的统一
所以即使即可使用cdn的服务器
利用内容分发网络，利用最靠近用户的服务器进行分发资源
cdn不是一个服务器，而是一大堆服务器在各个地区（称为边缘节点）组成的内容分发网络
如果用户所需资源在最近服务器中找不到时就会往父级节点进行寻找，如果层层寻找不到时，会到最后的原栈进行下载，然后分到父节点，再分到边缘节点

<div id="app"></div>

<!-- 此处直接进行引入
https://unpkg.com/vue@next
直接在网址输入引入的地址即可查看到vue打包后且未被压缩的源码 -->
<script src="https://unpkg.com/vue@next"></script>
<script>

    // 创建一个你要显示内容的对象进行传入
    const why = {
     
        template: `<h2>hello world</h2>`
        // 此时我们并没有将h2标签的内容放入id为app的div中，
        // 但是已经实现类比以下的效果
        // <div id="app">
        //   <h2>hello