第一节认识Vue

初识Vue

1. vue是一套用于构建用户界面的渐进式框架
2. 渐进式：表示我们可以在项目中一点点来引入和使用vue,而不一定需要全部使用vue来整合整个项目
3. 三大框架：
   1. Vue：国内市场占有率最高
   2. React：市场占有率高，前端工程师也要学习
   3. Angular:入门门槛高，市场占有率较低
4. Vue3带来的变化
   1. 通过monorepo的形式管理源码
   2. Meno：单个
   3. Repo：repository仓库
   4. 主要是将许多项目的代码存储在同一个repository中
   5. 目的是多个包之间的独立性，可以有自己的功能逻辑，单元测试等,同时有在同一个仓库下方便管理;
   6. 模块划分更清晰，可维护性，可扩展性更强；
   7. 使用typescrpit进行重写
   8. 性能：
      1. 通过proxy进行数据劫持：vue2:删除修改数据无法监听
      2. 删除了一些不必要的api
      3. 由 Options 到 Composition API 可以将相关联代码放到同一处进行处理
      4. Hooks函数增加代码复用性

如何使用Vue

1. 引用方式：
   1. 在页面通过CDN的方式来引入
   2. 下载Vue 的javaScript文件，自己手动引入
   3. 通过npm包管理工具安装使用它（Webpack）
   4. 直接Vue CLI 创建
2. CDN:内容发布网络（Content Delivery Network ）,可以通过相互链接的网络系统，利用最靠近每个用户的服务器，更可靠的将文件发型给用户，老提高性能；常见的CDN服务器：自己的CDN服务器，开源的CDN服务器：unpkg,JSDelivr,cdnjs;
3. ‘’
4. 声明式和命令式编程
   1. 声明式:在vue 中已经声明好了，之后绑定,关注"what to do",由机器做how
   2. 命令式:在原生中,是一步步绑定,关注"how to do "
5. mvvm模型
   1. mvc 是model -vue-controller
   2. mvvm是model-view-viewModel,view是dom,model:javascript,通过黑盒子:vue，data bindings,dom listener
6. template：模板,在createapp时，创建对象，template属性，会先用innerhtml清空,替换掉我们挂载到的元素innerhtml,{{}}为其中特有的语法
7. data属性：在vue2的时候，也可以传入对象，虽然官方推荐函数，vue3时，不传入函数会直接在浏览器中报错，data 的返回对象会被Vue的响应式系统劫持,之后该对象或者访问都会在劫持中处理；
8. methods属性，这些方法可以绑定到template,可以用this关键字来直接访问到data中返回的对象属性;不能使用箭头函数，理由是绑定父级函数的上下级。bind(proxy)
9. 其他属性：props,computed,watch,emits,setup

vue源码

1. github
2. vue-next
3. tag 稳定版
4. code download
5. 或者 cmd cd 文件 git clone 链接
6. zip使用 .prettierrc 打开终端 npm/yarn (使用npm要下node) install yarn -g
7. git init
8. git add.
9. git commit -m “fix(install): install dep”
10. yarn dev执行 “node scripts/dev.js”
11. 打开vue ->vuegolable.js
12. example debugger Vue.createApp
13. dev 位置加–sourcemap
14. yarn dev