vue3入门

vue3和2对比

1. 使用vue-cli 可以创建vue2或3的项目
2. vue3和2项目目录结构没有变化
3. vue3中main.js router vuex 都使用函数初始化
4. vue3代码性能更好
5. vue3引入了组合式API（composition api） 特点：函数式编程
6. vue3组合式API和vue2-options API可以共存

组合式API

入口 ：setup函数（vue3代码写到这里）
1.在组件创建之前执行，只执行一次。
2.没有this组件实例
3.父传子的数据，可以通过setup函数第一个参数获取。
4.子传父的emit,可以通过setup函数第二个参数对象结构获取。
用法：
1.响应式数据data:
1>reactive函数=>只能定义复杂类型的数据，而且不能改地址
2>ref函数=>能定义简单的复杂类型（能改地址）
2.计算属性computed
写法
const total =computed(()=>{return 计算结构})

  const formData = computed(() => prop.data);
    const isHome = computed(() =>
    [
      "siteInvestigationList",
      "informationAcquisitionList",
    ].includes(route.name as string)
  );

监听属性watch 写法 watch(()=>指定监听的变量，()=>{变化后执行的回调},{deep:true})

生命周期

用法
1.导入钩子函数=>import {onMounted} from ‘vue’
2.在setup函数使用=>onMounted(()=>组件模板挂载后会执行)

模板ref的使用

1.获取Dom元素 目的：操作DOM
2.获取组件实例 目的：调用子组件方法
用法
1.在html元素或组件身上绑定ref 属性，给属性赋值
2.在setup函数中通过声明一个ref函数的变量=>const ref 属性值=ref()
3.一定要return(ref属性值)
4.在onMounted钩子函数回调中，通过ref变量.value
## 总结
组合式API数据和逻辑的复用
1.封装一个js模块,在模块方法中声明ref或reactive变量或操作数据变量的方法
2.返回并导出方法
3.在页面中导入js模块,使用这些变量或方法
好处
1.代码容易维护
2.全局复用