vue3.0初识

专题/前端/vue3初识/index.md

@@ -0,0 +1,410 @@
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008225507487.png#pic_center)
+
+# 初识
+
+## 什么是Vue?
+
+渐进式JavaScript 框架。渐进式就是指可以由浅入深的，由简单到困难的一种方式。
+## 它的优点都有什么?
+
+vue.js拥有更小的体积，压缩后的vue.js就只有33k；vue.js拥有更高的运行效率，vue.js是基于`虚拟dom`的，虚拟dom是一种可以预先通过JavaScript进行各种计算，把最终的dom操作计算出来并进行优化的技术。
+
+因为这个Dom的操作属于预处理操作，并没有真实的操作Dom，所以叫做虚拟Dom。
+
+vue.js基于虚拟Dom操作，大幅度提高了Dom的操作以及渲染效率。不仅如此，vue.js还实现了双向数据绑定。vue.js的双向数据绑定，让开发者不用再去操作Dom对象，可以把更多的精力投入到业务逻辑上。
+
+## vue3.0学习路线
+1. 先学习vue2.x，很多2.x内容依然保留；
+2. 先学习TypeScript，vue3.0是用TS重写的，想知其然知其所以然必须学习TS。
+
+## 为什么学习vue3.0？
+- 性能比vue2.x快1.2～2倍
+- 按需编译，体积比vue2.x更小
+- 组合API
+- 更好的TS支持
+- 暴露了自定义渲染API
+- 更先进的组件
+
+## vue3.0是如何变快的？
+### 1、diff方法优化
+
+vue2.x中的虚拟dom是进行全量的对比。而vue3.0新增了静态标记。在与上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。
+
+下面我们来举个例子，以下是代码片段。
+```html
+<div>
+  <p>标签</p>
+  <p>{{msg}}</p>
+</div>
+```
+vue2.x的diff算法是对虚拟dom树全量的对比。
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201011230003622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+
+vue3.0的diff算法在创建虚拟dom的时候，会根据dom中的内容是否发生变化，添加静态标记。只对比带有patch flag的节点。
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201011232453479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+
+我们可能看上面这个图不是很明白，那我们就用另一种方式直观看下。你们可以看到下图中存在数据绑定的元素中存在静态标记`1`，测试网址：
+
+https://vue-next-template-explorer.netlify.app/
+
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201012103554965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+
+### 2、hoistStatic（静态提升）
+
+vue2.x中无论元素是否参与更新，每次都会重新创建，然后再渲染。vue3.0中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。
+
+我们再来去那个测试网站，在静态标记的选项前面打上对号，这时我们会发现不同，右边之前数据固定不变的标签，也就是这里的`<p>标签</p>`，被放在了`render`函数的外面。所以这样只会在全局创建一次，这样性能就明显提升了。
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/2020101210410916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+### 3、cacheHandlers（事件侦听器缓存）
+
+默认情况下，如`onClick`事件会被视为动态绑定，所以每次都会追踪它的变化，但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可。
+好，我们来对比一下开启事件侦听器缓存前后。
+
+- 未开启事件侦听器缓存
+
+我们会看到有一个静态标记，所以每次都会追踪。
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201012105810780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+- 开启事件侦听器缓存
+
+在事件侦听器缓存前打上对号，开启。我们看到没有了静态标记，就没有对比追踪了，性能就提升了。
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/20201012110020549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1,size_16,color_FFFFFF,t_70#pic_center)
+
+​
+# 实战
+
+## 一、项目搭建
+vite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import发送请求加载文件的特性。拦截这些请求，做一些编译，省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。
+在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器，浏览器通过本机`<script module>`支持对其进行解析，从而为每次导入发出HTTP请求。开发服务器拦截请求，并在必要时执行代码转换。例如，对`*.vue`文件的导入会在发送回浏览器之前即时进行编译。
+
+1、全局安装vite脚手架
+```bash
+npm install -g create-vite-app
+```
+2、使用脚手架创建项目
+```bash
+create-vite-app projectName
+```
+3、进入项目文件夹
+```bash
+cd projectName
+```
+4、安装依赖
+```bash
+npm install
+```
+5、启动vue3.0项目
+```bash
+npm run dev
+```
+## 二、vue2.x存在的问题
+2.x中的一点问题是当业务不断增多时，数据跟逻辑分散，会很难维护。
+
+```html
+<template>
+  <div>
+    <div>
+      <input type="text" v-model="obj.id">
+      <input type="text" v-model="obj.con">
+      <button @click="submit">提 交</button>
+    </div>
+    <ul>
+      <li v-for="(item,index) in list" :key="item.id" @click="cli(index)">
+        {{item.id}}-{{item.con}}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"filterBox",
+  data(){
+    return {
+      list:[
+        {
+          id:1,
+          con:"a"
+        },
+        {
+          id:2,
+          con:"b"
+        }
+      ],
+      obj:{
+        id:"",
+        con:""
+      }
+      // 代码数据1
+      // 代码数据2
+      // ...
+    }
+  },
+  methods:{
+    cli(index){
+      this.list = this.list.filter((item,idx)=>idx!==index);
+      console.log(this.list);
+    },
+    submit(){
+      // const obj = Object.assign({},this.obj);
+      this.list.push(this.obj);
+      this.obj.id = "";
+      this.obj.con = "";
+    },
+    // 执行代码代码逻辑3
+    // ...
+  },
+  computed:{
+  	// 执行代码代码逻辑1
+  },
+  watch:{
+   // 执行代码逻辑2
+  }
+}
+</script>
+
+<style>
+
+</style>
+```
+## 三、组合API
+### **ref**
+
+```html
+<template>
+  <div>
+    <p>{{count}}</p>
+    <button @click="add">add</button>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue"
+export default {
+  name: 'App',
+  setup(){
+    // 定义一个名称叫做count变量，这个变量的初始值是0
+    // 这个变量发生该改变之后，vue会自动更新页面。
+    const count  = ref(0);
+	// 在组合API中，如果想定义方法，不用定义到methods中，直接在setup函数中定义即可。
+    const add = () => {
+      count.value+=1;
+    }
+	// 在组合API中定义的变量/方法，要想在外界使用，必须return出去。
+    return {
+      count,
+      add
+    }
+  }
+}
+</script>
+
+```
+`ref`只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）。
+
+另外，需要注意的是，如果是通过`ref`创建出来的数据，那么在`template`中使用的时候不用通过`.value`来获取。因为Vue会自动给我们添加`.value`	。
+
+### **reactive**
+`reactive` 可以监听复杂类型的变化，如对象或者数组。
+
+```js
+let state = reactive({
+	name:"maomin"
+});
+// 或
+let arr = reactive([1,2,3]);
+```
+我们来做一个小demo。
+```html
+<template>
+  <div>
+    <ul>
+      <li v-for="(item,index) in state.list" :key="item.id" @click="removeItem(index)">{{item.id}}--{{item.con}}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {reactive} from "vue"
+export default {
+  name: 'App',
+  setup(){
+    const state  = reactive({
+      list:[
+        {
+          id:1,
+          con:"A"
+        },
+        {
+          id:2,
+          con:"B"
+        },
+        {
+          id:3,
+          con:"C"
+        }
+      ]
+    });
+
+    const removeItem = (index) => {
+      state.list = state.list.filter((item,i)=>i!==index)
+    }
+
+    return {
+      state,
+      removeItem
+    }
+  }
+}
+</script>
+
+```
+我们可以改变下，把数据跟逻辑放在一块，这样就解决了vue2.x的数据跟逻辑分散的问题。
+```html
+<template>
+  <div>
+    <ul>
+      <li
+        v-for="(item, index) in state.list"
+        :key="item.id"
+        @click="removeItem(index)"
+      >
+        {{ item.id }}--{{ item.con }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { reactive } from "vue";
+export default {
+  name: "App",
+  setup() {
+    let {state,removeItem} = userReturn();
+    return {
+      state,
+      removeItem,
+    };
+  },
+};
+
+function userReturn(params) {
+  const state = reactive({
+    list: [
+      {
+        id: 1,
+        con: "A",
+      },
+      {
+        id: 2,
+        con: "B",
+      },
+      {
+        id: 3,
+        con: "C",
+      },
+    ],
+  });
+
+  const removeItem = (index) => {
+    state.list = state.list.filter((item, i) => i !== index);
+  };
+
+  return {state,removeItem}
+}
+</script>
+
+```
+
+## 四、组合API本质
+`compositionAPI`与`optionAPI`可以混合使用。其本质是注入。
+
+```html
+<template>
+  <div>
+    <p>Vue2.x</p>
+    <button @click="cli1">点击</button>
+    <p>Vue3.0</p>
+    <button @click="cli2">点击</button>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue"
+export default {
+  name:"Demo2",
+  data(){
+    return {
+      msg:"Vue2.x"
+    }
+  },
+  methods:{
+    cli1(){
+      alert(this.msg);
+    }
+  },
+  setup(){
+    let txt = ref("Vue3.0"); // 注入到data函数内
+    function cli2() { // 注入到methods属性内
+      alert(txt.value); 
+    }
+    return {
+      txt,
+      cli2
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
+```
+## 五、setup执行时机与注意事项
+setup函数，是在`beforecreate`钩子之前完成的。所以无法使用`data`跟`methods`。
+另外要注意的是setup是同步的，不是异步的。
+
+```html
+<template>
+  <div>
+    <button @click="name">打开</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"Demo3",
+  data(){
+    return {
+      msg:"hello"
+    }
+  },
+  setup(){
+    function name() {
+      console.log(this.msg); // undefined
+    }
+    return {
+      name
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
+```
+# 适合Vue3.0开发的UI框架
+
+**Ant Design of Vue**
+
+https://2x.antdv.com/docs/vue/introduce-cn/
+
+**Vant**
+
+https://vant-contrib.gitee.io/vant/next/#/zh-CN/