Vue 是什么？

看文档：

Vue (读音 /vjuː/ ，类似于 view，不是"微优异"！！！) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层

什么是【渐进式】？

渐进式是 Vue.js 将自身的框架与其他框架（Angular，React, ...）进行了对比后, 产生的一个特定名词

Vue 和 React，Angular 的对比：

Angular: 应用设计框架和开发平台 (关注项目应用, 功能健全并且庞大；自上而下，适合开发大型应用)
React: 用于构建用户界面的 JavaScript 库，React 主要负责怎么把数据渲染到视图中, 大多数的库都需要开发者自己完成 (e.g React 不提供 router (react-router 是非 React 官方社区提供的); React 不提供状态管理仓库(redux, mobx, ...); React 不提供过渡动画 <Transition>，<KeepAlive> 这些组件)
Vue: 一个渲染用户界面的 View 层的框架，它的核心库是怎么把数据渲染到视图中, vuex vue-router选择集成 (micro libs，强规范)

数据绑定 & 数据流？

数据绑定

数据与视图渲染的直接关系

React：数据的单向绑定
1. 将数据状态和事件处理函数绑定在元素上面
2. 触发事件处理函数改变 state
3. 改变 state 导致视图的变更
Vue: 数据的双向绑定
1. 将视图与状态使用指令 v-model 绑定起来（自动绑定了数据状态和改变数据方法）
2. 视图发生变化, 数据也随之变化；数据发生变化, 视图也随之变化

数据流

顾名思义，数据流 就是数据流动的方向（父子组件之间的时间），拿 React和Vue举例：

React：
1. 父组件给子组件传值: 父组件传递 state 作为 props 作为子组件的属性, 且子组件内不能修改 props 的值 (props is an inmutable value)
2. 子组件给父组件传值: 父组件传递 props-changeFn 作为子组件的方法, 子组件实现此方法改变父组件的值
Vue:
1. 父组件给子组件传值: 父组件传递 props 作为子组件的属性, 且子组件内不能修改 props 的值 (props is an inmutable value)
2. 子组件给父组件传值: 子组件 emit 自定义事件给到父组件, 在父组件中完成修改数据的值

在数据流向这一方面，组件的属性都是单向的，只是操作 change 的语法不太相同。

Vue 的特色：

1. Vue 核心

渲染核心：

Vue 的渲染步骤：

模板语法
核心库
编译模板
渲染函数
虚拟节点对比（重更新）
打补丁操作 DOM

Vue 组件：

Vue 组件的本质上是一个对象, 里面有很多特定的属性。

2. Vue 的插值表达式

Vue 在绑定数值时有特殊的插值表达式： {{ value }} （ mustache 语法）

3. Vue 指令（v-*）

Vue 将数据与 DOM 进行响应式的关联：

v-bind 绑定属性（:）
v-on 绑定事件处理函数 (@)
v-model 当视图发生变化时, 数据发生变化; 当数据发生变化时, 视图也会发生变化
- 我们的业务关注点可以完全放在逻辑层
- 视图层交给了 vm 帮我们完成了绑定数据, 渲染视图和更新视图和数据
v-if / v-show : 条件渲染
v-for ：列表渲染
v-*：自定义指令, 完成一些定制化并且与数据交互解耦的 DOM 操作

4. Vue的组件化

首先，组件化这个概念本身并不是由 Vue 提出的

Vue 的组件化指的是基于 Vue 在它自己核心的组件系统进行组件管理的一种开发方式（Vue组件系统的构建主要是基于 ES 模块化构建的）

无论是 Vue 还是其他的 MV 框架，组件化实质上是为了抽象小型, 独立, 可预先配置定义, 可复用的模块

组件化是小型的, 可以看成是页面的构成拆分成一个一个的小单元
组件是独立的：每一个小单元都尽可能独立开发
预先定义：小单元可以与预先定义好, 在需要的时候导入使用
预先配置：小单元可以接收一些在使用的时候需要的一些配置
可复用：小单元可以在多处使用 (可复用需要适当考量)
可配置性越高、功能性就越强
组件提纯, 类似于函数提纯 (filter x)

5. Vue 中一些和实例相关的概念

应用实例

createApp 函数创建出来的实例被称为应用实例

app 实例上挂载了很多方法
大多数 app 上的方法都会返回应用实例本身 ( app ), 允许用户链式操作
app.mount 方法只返回根组件实例, 不允许链式操作

根组件

createApp 中放入的内容我们称之为：根组件

根组件本质上是一个对象
createApp 执行时，需要一个根组件，因此根组件可以看作是 Vue 渲染的起点

根元素

与根组件不同, 根元素是一个 HTML 元素

组件实例

组件实例 (component vm) 就是组件渲染出来后在 Vue 核心系统中存在的实例

每个组件都有自己的组件实例
一个应用中, 所有的组件都共享一个应用实例( App )
无论是根组件, 还是应用内其他的组件(配置选项), 组件行为都是一样的
一个组件实例是可以添加一些属性的 (data, props, components)
this -> $attrs / $emit ... 组件实例的内置属性和方法

6. 生命周期函数

组件是有初始化过程的 Vue提供了组件运行过程中的钩子函数 (生命周期函数) 生命周期函数会在每个阶段的初始化时运行

Vue初始化过程

初始化数据
template / DOM
AST
diff
render
diff
update
... (重复上述步骤)

Vue 项目的几种构建方式

1. webpack

安装 Node.js (> v12)
在一个空的项目文件夹下面使用 npm init -y初始化项目
安装依赖

安装开发时依赖

shell 复制代码

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader babel babel-loader @babel/core @babel/preset-env @vue-sfc/compile

安装运行时依赖

shell 复制代码

npm i -S vue

shell 复制代码

vue-study
|- node_modules
|- public
    |- favicon.ico
    |- index.html
|- src
    |- main.js
|- webpack.config.js
|- ...

配置 webpack.config.js

js 复制代码

const { resolve } = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',

  devtool: 'source-map',

  entry: './src/main.js',

  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js',
    clean: true
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './public/index.html'),
      title: 'Vue 项目',
      minify: {
        collapseWhitespacce: true,
        removeComments: true
      },
      excludeChunks: ['node_modules'],
    }),
    new VueLoaderPlugin(),
  ],

  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      },
      {
        test: /.vue$/,
        use: {
          loader: 'vue-loader'
        }
      }
    ],
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        // pathRewrite: { '^/api': '' }
      }
    },
  },
};

添加项目启动命令

json 复制代码

{
  /* + */ "dev": "webpack-dev-server --config ./webpack.config.js --color --hot --stats"
}

使用 npm run dev启动项目，并在 http://localhost:8000端口打开

2. 使用 vite + cdn

安装 Node.js (> v12)
创建项目并安装项目依赖

shell 复制代码

mkdir vite-cdn && cd vite-cdn

npm init -y && yarn add -D vite

引入全局 cdn
新建 index.html

html 复制代码

<!-- + --> <script type="text/javascript" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.6/vue.global.min.js"></script>

添加项目启动命令

json 复制代码

{
  /* + */ "dev": "vite"
}

用 npm run dev启动项目，并在 http://localhost:5173端口打开

3. vite 官方脚手架

使用 vite 的脚手架安装：

shell 复制代码

npm init vite@latest my-vue-app --template vue

npm run dev 启动项目，在 5173 端口打开

4. vue 官方脚手架

使用 vue 的脚手架安装

shell 复制代码

npm install @vue/cli

vue create vue-cli-app

npm run serve 启动项目，在 8080 端口打开

【Vue.js】一些特点总结

Vue 是什么？

什么是【渐进式】？

Vue 和 React，Angular 的对比：

数据绑定 & 数据流？

数据绑定

数据流

Vue 的特色：

1. Vue 核心

渲染核心：

Vue 组件：

2. Vue 的插值表达式

3. Vue 指令 （v-*）

4. Vue的组件化

5. Vue 中一些和实例相关的概念

应用实例

根组件

根元素

组件实例

6. 生命周期函数

Vue 项目的几种构建方式

1. webpack

2. 使用 vite + cdn

3. vite 官方脚手架

4. vue 官方脚手架

3. Vue 指令（v-*）