【速览】Vue（更新中）

一、背景

这个技术出现的背景、初衷和要达到什么样的目标或是要解决什么样的问题。这个问题非常关键，也就是说，你在学习一个技术的时候，需要知道这个技术的成因和目标，也就是这个技术的灵魂。如果不知道这些的话，那么你会看不懂这个技术的一些设计理念。

二、优缺点

这个技术的优势和劣势分别是什么，或者说，这个技术的 trade-off 是什么。任何技术都有其好坏，在解决一个问题的时候，也会带来新的问题。另外，一般来说，任何设计都有 trade-off（要什么和不要什么），所以，你要清楚这个技术的优势和劣势，以及带来的挑战。

三、适用场景

这个技术适用的场景。任何技术都有其适用的场景，离开了这个场景，这个技术可能会有很多槽点，所以学习技术不但要知道这个技术是什么，还要知道其适用的场景。没有任何一个技术是普适的。注意，所谓场景一般分别两个，一个是业务场景，一个是技术场景。

四、核心组成

技术的组成部分和关键点。这是技术的核心思想和核心组件了，也是这个技术的灵魂所在了。学习技术的核心部分是快速掌握的关键。

简介

渐进式JS框架
声明式
组件化
生态

创建项目

npm init vue@latest

目录结构

.vscode
node_modules：依赖文件夹
public：资源文件夹
src：源码文件夹
.gitignore
index.html：入口
package.json：信息描述
README.md
vite.config.js

模版语法 template

• 文本插值 {{}}

<template>
<p>{{num}}</p>
</template>

• 属性绑定 v-bind: 简写为:
  绑定多个属性：v-bind =

• 条件渲染
  v-if（切换消耗高）、v-else、v-else-if、v-show（初始开销高）

• 列表渲染 v-for

<template>
<p v-for="(item,index) in/of items" :key="item.id">{{item}}-{{index}}</p>
</template>

事件处理 v-on: 简写@

• 方法事件

<template>
<button @click="addCount">Add</button>
</template>

• 事件参数

<template>
<button @click="addCount(item,$event)">Add</button>
</template>
methods:{
	addCount(name,e){}
}

• 事件修饰符 .prevent

组件生命周期

五、底层原理

技术的底层原理和关键实现。任何一个技术都有其底层的关键基础技术，这些关键技术很有可能也是其它技术的关键基础技术。所以，学习这些关键的基础底层技术，可以让你未来很快地掌握其它技术。

六、对比

已有的实现和它之间的对比。一般来说，任何一个技术都会有不同的实现，不同的实现都会有不同的侧重。学习不同的实现，可以让你得到不同的想法和思路，对于开阔思维，深入细节是非常重要的。