快速入门 vue3,看这个就够了

学习内容：

1. 使用vue-cli创建项目
2. 使用vite创建项目
3. 掌握setup
4. 掌握ref函数
5. 掌握reactive函数
6. 对比ref和reactive
7. computed
8. watch和watchEffect
9. toRef和toRefs
   10.shallowReactive和shallowRef
   11.readonly和shallowReadonly
   12.toRaw和markRaw
   13.provide和inject
   14.组合式api的优势
   15.新的组件

---

使用vue-cli创建项目：

注意：版本一定要在4.5.0以上

vue --version//查看当前的版本
npm install -g @vue/cli //安装和更新你的vue-cli的版本
vue create vue3Project  //创建一个项目
cd  vue3Project  
npm run serve  //启动项目

使用vite创建项目：

注意：需要 Node.js 版本 >= 12.0.0。

//npm 
npm init vite@latest
//yarn
yarn create vite
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue

掌握setup：

1.setup 是新引入的，是vue3特有的，值为一个函数（了解）
2.vue2的数据和方法等等都配置到setup里（掌握）
3.setup的属性和方法可以在模板直接调用（重点）
4.注意点：（掌握）
不要和vue2混淆
vue2里的配置（data,methods…）可以访问setup里的属性和方法，但是setup访问不了vue2里的配置,如果同时存在setup 优先


5.setup两个注意点：
（1）执行时机：在beforeCreate之前执行，this是undefined
(2) setup的参数：首先看一下返回

props:值为对象，包含组件外部传递过来，且组件内部声明接受了的属性
context:上下文对象：
attrs:值为对象，包含：组件外部传递过来的，但没有props配置中声明的属性，相当于this,$attrsslots:收到的插槽内容，相当于this.$slots
emit:分发自定义事件的函数，相当于this.$emit

掌握ref：

1.处理基本类型数据
上面的年龄并没有双向绑定，这里通过ref实现，ref()返回值是个函数，修改值+‘.value’


2.处理对象类型

掌握reactive函数：

1.主要是处理对象

对比ref和reactive：

1.从定义数据的角度：
ref用来定义 基本类型数据
rective用来定义 对象（数组）类型数据
备注：ref也可以定义对象（数组）类型数据，它内部会自动通过reactive 转为代理对象
2.使用角度对比
ref定义的数据：操作数据需要.value,读取数据时模板中不需要加.value
reactive 均不需要加.value

computed：

举个用户结账的例子

watch：

1.与vue2的配置一致
2.两个小坑：
（1）监听reactive定义的响应式数据时：oldvalue无法正确获取，强制开始了深度监视（deep配置失效）
（2）监听reactive定义的响应式的数据中的某个属性时：deep配置有效




oldvalue无法正确获取


强制开始了深度监视（deep配置失效）

监听reactive所定义的响应式数据 的某个属性oldValue是能够正常获取的

特殊情况：

watchEffect：

1.watch :监视的属性+回调
2.watchEffect:不用指明监视的属性，回调中用到哪就个监视哪个，一个字智能
3.watchEffect和computed很想：
(1)但是computed注重的是计算，一定要走返回值
(2）wachEffect注重的是过程，不需要返回值

toRef和toRefs：

这里一直重复shop.，是不是有点繁琐

shallowReactive和shallowRef

就是处理最外层的属性，了解就行

readonly和shallowReadonly

深只读和浅只读
应用场景：不希望数据修改时

toRaw和markRaw

toraw:
作用：将一个有reactive生成的响应式对象转换为普通对象
应用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所以操作，不会引起页面的更新
markraw:
作用：标记一个对象，使其永远不再成为响应式的数据
应用场景：
1.有些值不应该设置为响应式，例如：复杂的第三反类库
2.当渲染具有不可变的数据源的大列表时，跳过响应式的转换可以提高性能

provide和inject

作用：祖孙组件之间的通信

vue2的这中套娃需要一层一层的传，特别麻烦，vue3利用provide引入 其他组件可以利用inject调用

后代组件都是响应式的数据

组合式api的优势

vue2叫配置式api: 拆分的太零碎了，不利于日后维护

vue3叫组合式api

Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，最终Composition API把他们组合起来。

新的组件

1.Fragment
vue2中组件中必须有一个根标签
vue3则不需要加根标签了，外层有个Fragment虚拟元素包裹，这样就减少了层级嵌套和内存的开销
2.teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。
举个例子

<teleport to="#modal">
      <p>Hello, I'm a modal window.</p>
  </teleport>

teleport 中的任何内容都将渲染在目标元素中