vue3学习文档（开发文档）

Vue3

了解Vue3

创建vue3项目

• vue2+js+vue-cli（vue-cli默认有git仓库)+vuex
• vue3+ts+vite（vite默认没有git仓库)+pinia

vitec创建项目

https://cn.vitejs.dev/

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。相比较webpack打包环境, 启动快很多

1. 创建项目

   npm create vite@latest
   

2. 下载依赖

   cd vite-react
   npm i
   

3. 运行项目

   npm run dev
   

配置文件

• public：脚手架不会处理，会原封不动地打包

• assets：会进行压缩打包，放所有组件的公共资源

• .d.ts后缀文件：类型声明文件

  • /// 表示外部引入文件

插件

• 禁用插件
  • Vetur
  • vue-helper
• 安装插件
  • TypeScript Vue Plugin (Volar)
  • Vue 3 Snippets
  • Vue Language Features (Volar)

组合API使用

Composition API

前言

⚠组合API的所有API如createApp、defineComponent等都来源于vue，因此需从vue中import导入

import { createApp } from "vue";

创建挂载应用

import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);
app.mount("#app");

createApp

每个 Vue 应用都是通过 createApp函数创建一个新的 应用实例

• 第一个参数是根组件；第二个参数可选，它是要传递给根组件的 props
• 应用实例身上有 mount,unmount,mixin,component,directive,use等全局方法供使用
• 应用实例接受到根组件之后,会把根组件在mount所规定的容器中渲染

mount

• 应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
• .mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

defineComponent

import { defineComponent } from "vue";export default defineComponent({name:"App"
})

• 在定义 Vue 组件时提供类型推导的辅助函数
• 第一个参数是一个组件选项对象。
• 返回值将是该选项对象本身，因为该函数实际上在运行时没有任何操作，仅用于提供类型推导。

其他

• Vue3中可以没有根标签，vue2必须要有一个根标签（但最好有根标签
• 在Vue3中可以完全使用vue的配置项写法（选项式API），但是Vue3推荐使用组合式API

setup

基础使用

• setup 函数是一个新的组件选项。所有的组合API函数都在此使用，作为在组件内使用 Composition API 的入口点，只在初始化时执行一次
• 本质上是beforeCreate和created两个生命周期函数的合并，无法使用this
• setup函数中返回的对象中的属性都会放在组件实例上,模板还是和vue2一样,都在实例上去拿取数据
• 在setup中是没有this的

<template><div>a:{{a}}</div>
</template>
<script>
export default defineComponent({name:"App",setup(){const a = 1;const fn = ()=>{};return{a,fn}}
})
</script>

setup语法糖

setup语法糖，<script setup> 语法

• 添加了setup属性的script标签区域,其实就是setup的语法糖

• script区域的内部书写的内容其实就是 setup函数内部书写的内容

• 在添加了setup区域的script中定义的变量默认return出去,所以不需要我们自己写return

<template lang="ts"><div>a:{{a}}</div>
</template>
<script>
export default defineComponent({name:"App",
})
</script>
<script setup lang="ts">
const a = 1;
const fn = ()=>{};
</script>

⚠** lang="ts"**

因为vue3+ts写法，需要语法支持ts

我们要在两个script标签上添加 lang属性,值为ts

创建使用子组件

⚠vite中，引入文件最好写到底，一直写到index.vue

组合API中使用子组件无需配置注册，导入即可使用

<template><div><Header /></div>
</template><script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({name: "App",
});
</script><script setup lang="ts">
import Header from "./components/Header/index.vue";
</script>

响应式

直接书写在setup函数的属性不是响应式数据，因为根本没有做响应式处理

ref

ref(value)

ref<T>(value)：限制类型

• 创建一个响应式数据
• 接受一个参数值并返回一个响应式且可改变的 ref 对象
• ref对象内部dep属性是当前数据的依赖，value属性就是当前响应式数据的值
• 在模板中使用ref对象的时候不需要添加.value即可拿到值
• 在setup中操作ref对象数据的时候,需要使用.value拿到值

基本数据类型响应式

<script setup lang="ts">
import { ref } from "vue";let count = ref(1);
console.log(count);
</script>

对象响应式

ref如果接收的是对象类型值，即对象或数组

则内部先使用reactive把对象转为代理对象，然后把代理对象交给ref对象的value属性

reactive

reactive(objValue)

reactive<T>(objValue)：限制类型

• reactive只能用于给对象创建响应式
• 返回一个数据的响应式的代理对象
• 响应式转换是“深层”的：它会影响到所有嵌套的属性

ref vs. reactive

更推荐使用ref，reactive替换数据没有响应式

const changePerson1 = () => {
//使用ref 替换数据具有响应式
person1.value = { ...person1.value, id: 1 };
};
const changePerson2 = () => {
//使用reactive 替换数据没有响应式
person2 = { ...person2, id: 2 };
};

计算属性

computed方法，返回一个计算属性 ref

只读

const count = ref(100);
//只读计算属性
const toFixed2 = computed(() => {return count.value.toFixed(2); 
});

可读可写

const firstName = ref("张");
const lastName = ref("三");const fullName = computed({get: () => {return firstName.value + " " + lastName.value;},set: (val) => {console.log(1);firstName.value = val.split(" ")[0];lastName.value = val.split(" ")[1];},
});

watch

watch(value, (newValue, oldValue)=>{ ... }, { ...config })

• 参数1：监视的目标对象
• 参数2：监视到改变时的操作
• 参数3：配置项，包括：
  • 深度监视deep:true
  • 立即监视immediate:true

以下监视都是对ref响应式数据进行监视

1.ref对象

watch(count, () => {console.log("count改变了");
});

1. value为基础值的ref对象

   可以直接监视到这个值的改变

2. value为对象的ref对象

   只能监视ref对象的value值被替换，无法深度监视（除非添加deep配置)

2.ref对象的value

1. value值是基本类型，必须使用函数式写法

   并且可以直接监视到这个值的改变

   watch(() => count.value,() => {console.log("count改变了");}
   );
   

2. value值是对象类型，非函数式写法

   不能监听当前值被替换，默认深度监听内部属性的改变

   watch(person.value, () => {console.log("person改变了");
   });
   

3. value值是对象类型，函数式写法

   只能监听当前值被替换

   watch(() => person.value,() => {console.log("person改变了-函数式写法");}
   );