• node.js是一个基于Chrome引擎的JavaScript运行环境，用于在本地运行JavaScript代码

1. 安装

1.1 安装node管理工具nvm

• vue官方文档，官方文档很详细，同步更新，建议阅读
• 尚硅谷vue3视频和vue2为主的早期视频
• vue是一个渐进式框架，即允许开发者根据需求选择不同的功能和特性。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面，并支持多种方式使用
  • 通过vite开发spa单页面应用
  • 通过引入js文件在一般html中使用相关功能
  • 通过服务器渲染ssr(Nuxt)优化单页面性能表现
  • 其他...
• 特点：
  • 上手容易：Vue的语法非常友好，文档清晰，适合初学者。它提供了模板、指令(如v-if,v-for)等非常直观的功能，开发者可以用传统的HTML风格来描述UI。Vue采用了类似于MVVM(Model-View-ViewModel)模式，使得开发者的关注点更倾向于视图与数据之间的双向绑定，不需要手动管理数据状态变化。
  • 框架化：Vue是一个比较完整的框架，默认内置了很多功能，比如Vue Router、Vuex(状态管理)、指令等，你几乎可以用它做出一个完整的应用而无需依赖第三方库。这使得Vue更像一个全栈框架。
  • 灵活性和约定：Vue的设计哲学比较灵活，但也提供了一些约定，让开发者可以在不需要做过多配置的情况下轻松启动项目。例如，Vue的单文件组件(.vue)结构非常清晰，HTML、CSS和JavaScript被放在同一个文件中，容易管理

2.1 模板语法

• 模板语法(指令)是用于template中的特殊属性，可以将js变量绑定到元素上，并实现根据数据变化驱动视图的更新
  • 这些模板会被编译为render函数，运行时执行render函数生成虚拟DOM，并通过patch将差异同步到真实DOM，挂载到页面上
  • 如果有响应式变化，实际上就是重新执行被跟踪到有相关依赖的render函数，之后同步差异
  • 因此模板的原理是通过编译，形成一些预先的信息，用于生成render函数

3.1 v-if

• v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

  • 可以在之后添加v-else或v-else-if分支，用于在表达式返回假值时渲染内容

  • v-if如果不为真值时，其中的内容都不会构建，切换时内容会被创建/销毁，v-show相当于只是为样式添加display:none，内容还在，只是不可见

  • v-if优先级比v-for高，但不建议在同一元素上使用v-if和v-for，此时v-if读取不到v-for中定义的变量

    <h1 v-if="a">111</h1>
    <h1 v-else-if="b">111</h1>
    <h1 v-else>111</h1>

4.1 路由导航原理

4.1.1 hash和history模式

• 在vue-router中，路由导航有两种模式：hash模式和history模式，两种模式原理不同
• hash模式：路由地址中会带有#，如http://localhost:8080/#/home
  • 因为#的信息不会发送给服务器，后端服务器不需要对其他的路径进行处理
  • IE9支持hash模式
  • 实现简单，但对应的路径不美观且不够灵活
• history模式：路由地址中不带有#，如http://localhost:8080/home
  • history模式需要后端进行配置，才能实现对/home的解析，不然访问会得到404错误
  • 有助于SEO优化，因为SEO一般不会抓取hash部分
  • 功能更强，可以完全模拟真实导航
    • 支持修改任意的路径部分
    • 并且是控制原生的历史堆栈，浏览器可以进行历史状态管理
  • 路径看上去更美观

6.1 生命周期

• 阶段在图中展示非常清晰，但实际上图中展示了两种api写法对应的钩子
  • beforeCreate: 选项式API特有的选项，在实例初始化完成并且props被解析后立即调用，此时数据data和methods等属性还没有被初始化
  • created: 选项式API特有的选项，组件实例处理完所有与状态相关的选项，此时响应式数据、计算属性、方法和侦听器已经初始化，但$el还没有挂载
  • setup：组合式API中替代beforeCreate和created的生命周期钩子，在这里将完成一切初始化工作
  • beforeMount: 组件挂载之前，此时组件的template已经编译成render函数，但还没有挂载
  • mounted: 组件挂载完成，可以访问节点
  • beforeUpdate: 组件更新之前，此时数据已经被更新
  • updated: 组件更新完成，在这里应该避免更新数据，这样可能造成死循环
  • beforeUnmount: 组件销毁之前，vue2中写作beforeDestroy
  • unmounted: 组件销毁完成，vue2中写作destroyed
• 每个钩子的函数形式都是function(()=>{}, target?)
  • 第一个参数是一个执行的回调，将在对应阶段被执行
  • target参数为可选参数，用于指定当前组件实例，默认为当前组件实例

• MVVM: Model-View-ViewModel模型视图模型的缩写，其中Model为数据，即业务逻辑；View为视图，也就是UI界面；ViewModel为数据模型，将视图和模型同步交互，是不需要手动操作dom的一种设计思想
• Vue很明显是基于MVVM思想的，这使开发者不需要关系数据的响应式更新

7.1 渲染机制与响应式实现原理

• 子组件：在vue中，可以定义.vue文件，每个文件都是一个子组件，方便拆分和复用。一个Vue组件在使用前需要先被"注册"，这样Vue才能在渲染模板时找到其对应的实现

• 全局注册：通过app.component(name, options)注册，让组件在当前Vue应用中全局可用(直接使用<MyComponent />，不需要额外注册)

  main.ts

  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)
  
  app.component(
    // 注册的名字
    'MyComponent',
    // 组件的实现
    {
      /* ... */
    }
  )
  
  // 可以引入组件，链式调用
  import ComponentA from './ComponentA.vue'
  import ComponentB from './ComponentB.vue'
  import ComponentC from './ComponentC.vue'
  
  app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)
  
  app.mount('#app')

• 局部注册：子组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对tree-shaking更加友好

9.1 定义

9.2 响应