vue3.0

• https://www.yuque.com/gdnnth/vue-v3
• http://www.liulongbin.top:8085/#/
• https://www.yuque.com/woniuppp/vue3/intro

一，性能

二，什么是Vite

Vite是vue作者开发的一款试图取代webpack的工具

其原理是利用ES6的import会发送请求去加载文件的特性

拦截这些请求做一些预编译，省去webpack的冗余打包时间

1、全局安装vite：npm install create-vite-app -g   （装不上的话以管理员身份运行去装）

mac电脑会报没有权限，加sudo即可

2、创建项目（使用vite，不是脚手架）：npx create-vite-app project-name    （创建项目过程比脚手架快多了，因为没有依赖包）

3、cd project-name -> npm install -> npm run dev

• 定义响应式数据

　　　　import { ref reactive } from 'vue'

　　　　　　1. ref函数和reactive函数创建响应式数据的区别   （ref只能创建单一的数据，如果想用数组、对象的话用reactive）　　　　　　　　　　　　                                                                https://www.cnblogs.com/jinzhenzong/p/12778729.html

• 组合api

　　　　1. 定义的数据，方法可以抽成一个function函数，函数内部return出去数据，方法，在setup()函数中导入即可

　　　　2. compositionApi 和 optionApi 组合使用，因为vue3使用的是compositionApi，但是运行机制还是最终注入到optionApi（还是vue2的形式）

• setup函数的执行时机

• vue2和vue3的区别

•  reactive 和 ref 的区别

 1 emplate>
 2
 3 <script>
 4 import { ref, reactive, toRefs } from "vue";
 5
 6 export default {
 7   setup() {
 8     const { name, changeName } = change();
 9     const { state, add } = letting();
10
11     return {
12       name,
13       changeName,
14       ...toRefs(state),
15       add,
16     };
17   },
18 };
19
20 const change = () => {
21   let name = ref("范顺是通过ref创建出来的");
22
23   const changeName = () => {
24     name.value = "hahha";
25     console.log(name);
26   };
27   return { name, changeName };
28 };
29
30 const letting = () => {
31   const state = reactive({ age: 18 });
32
33   const add = () => {
34     state.age += 1; //直接改变reactive创建出来的响应式数据是不行的，需要用到toRefs()
35     console.log(state);
36   };
37
38   return { state, add };
39 };
40 </script>

1. shallowReactive - 浅层响应式数据对象
2. shallowRef - 创建浅层的 ref

　　我们都知道reactive创建的是复杂的数据格式，ref是单一的数据格式，这两个都是通过ES6 的proxy实现的，当我们使用reactive创建对象复杂的数据结构式，例如（对象嵌套对象），当我们改变某一个值得时候其实是通过diff算法中的递归实现的，每一个小对象都是proxy对象，这样的话会很消耗性能。

　　shallowReactive创建出来的浅层响应式数据对象，例如复杂的数据结构，对象嵌套对象，当我们改变第一层的对象时，只有第一层是proxy对象，其余全是普通对象，并且后面的对象也会跟着改变，当我们不改变第一层对象的时候，直接去改变后续的对象的时候是改变不了的

　　shallowRef和上面所述一样，只不过vue监听的是 .value