VUE3学习笔记-JZTXT

VUE3出现已经很长时间了，由于工作比较忙，项目比较紧，现在才看，已经晚于很多人了。

这是vue3学习笔记，边学边写。

1，项目创建

　　可以使用git下载：winpty vue.cmd create hello-world 使用之后会让你选择vue2还是3

　　可以直接node创建：vue create demo

2，组件传值

　　多了个类型校验，传值大体写法用法还是一样的

props：{

  list: {
    type: Array, //定义接受数据格式
    required: true,
    default() {
      return ["q", "w"];
    },
  }

3，插槽

　　插槽的写法就有些区别了，使用方式修改了一些，但是大体还是没有变化的。

　　在父组件中原先是可以直接使用一般的元素标签，现在只能使用<template>标签包裹

　　vue2中 slot="main" 与 name=”main” 搭配使用即可实现插槽

　　vue3中 slot="main" 与 v-slot:main 或者 #main 搭配使用，传值方式如下代码

　　父组件写法

 1 <template>
 2   <HelloWorld :msg="msg" :list="list" :a="a">
 3     <!-- 写法一 -->
 4     <!-- <template v-slot:header="scope">
 5       <h3 style="color: red">这是插槽++{{scope.text}}+{{scope.text1}}</h3>
 6     </template> -->
 7     <!-- 写法二 -->
 8     <template #header="{ Text1, text }"> 这是插槽++{{ Text1 }}++{{ text }} </template>
 9   </HelloWorld>
10 </template>
11 
12 <script>
13 import HelloWorld from "./components/HelloWorld.vue";
14 export default {
15   name: "App",
16   components: {
17     HelloWorld,
18   },
19   data() {
20     return {
21       msg: false,
22       list: undefined,
23       a: "warning",
24     };
25   },
26 };
27 </script>

　　子组件写法

 1 <template >
 2   <div class="hello">
 3     <slot name="header" :text="text" :Text1="text1"></slot>
 4     <div>{{ a }}</div>
 5     <div>{{ msg }}</div>
 6     <div v-for="(item, index) in list" :key="index">
 7       {{ item }}
 8     </div>
 9     <div>
10       count：{{count}}
11     </div>
12   </div>
13 </template>
14 
15 <script>
16 import { ref } from "vue";
17 export default {
18   name: "HelloWorld",
19   props: {
20     msg: {
21       type: Boolean,
22       required: true,
23       default: true,
24     },
25     a: {
26       type: String,
27       required: true,
28       validator(value) {
29         // 这个值必须与下列字符串中的其中一个相匹配
30         return ["success", "warning", "danger"].includes(value);
31       },
32     },
33     list: {
34       type: Array,
35       required: true,
36       default() {
37         return ["q", "w"];
38       },
39     },
40   },
41   data() {
42     return {
43       text: "子组件数据",
44       text1: "批量传值",
45     };
46   },
47   // 在data中声明的对象，在methods中写的function，在mounted、computed、watch中写的js，都可以写在setup中的
48   setup(props) {
49     var count = ref(12)
50     console.log(props.values,count.value, "][");
51     return {
52       count
53     };
54   },
55 };
56 </script>

4，setup （重点）

　　在vue2中，我们将数据定义在函数 data 中，执行函数定义在各个生命周期中，数据处理在监听函数或者计算属性，

　　在vue3中，setup 函数可以做到所有，生命周期，数据处理，监听属性等。但是需要按需引入