从Vue2到Vue3 Vue3知识点

Vue3介绍

Vue 3 是当前 Vue 的最高主版本。它提供了更好的性能和更好的 TypeScript 支持，并拥有诸如 Teleport、Suspense 和模板语法可多个根元素等 Vue 2 中没有的新特性。

官方文档: https://cn.vuejs.org/
Vue3 设计理念:https://vue3js.cn/vue-composition/

Vue2和Vue3区别

官方文档:https://router.vuejs.org/zh/guide/migration/

1.数据响应式的原理重新实现（proxy 替代了 Object.defineProperty）
2.支持了ts，更好的类型推导，减少bug的产生
3.提供了组合式api，更适合大型项目
4.更好的treeShakin 摇树，减少打包的体积
5.diff算法的更新

Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。

Vite 构建工具

官方文档:https://cn.vitejs.dev/guide/

vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”) 是一种新型前端构建工具，能够显著提升前端开发体验。

webpack

需要查找依赖，打包所有的模块，然后才能提供服务，更新速度会随着代码体积增加越来越慢

vite

使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应

项目打包的时候最终还是需要打包成静态资源的，打包工具 Rollup

Vite相对Webpack优势
1.快速的开发服务器
2.基于原生 ES 模块的开发：
3.更轻量的配置
4.Tree Shaking 效果更好
5.支持按需加载
6.内置的插件体系

Vite 创建项目

1.运行创建项目命令

# 使用npm
npm create vite@latest
# 使用yarn
yarn create vite
# 使用pnpm
pnpm create vite

2.输入项目名称
默认是 vite-project

3.选择前端框架

4.选择变体(选择项目类型)

5.创建完成

切换插件

vue3 组件代码和 vue2 有些不一样，使用的语法提示和高亮插件也不一样。
vetur 插件需要禁用，安装 volar插件。
禁用

启用

vue3结构区别

1.组件一个根节点非必需

<template>
  <div>节点1</div>
  <div>节点2</div>
</template>

2.创建应用挂载到根容器

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 根据App组件创建一个应用实例
const app = createApp(App)
// app应用挂载（管理）index.html的 #app 容器
app.mount('#app')

vue3 中是使用 createApp() 管理容器，不是 new Vue()

3.入口页面，ESM 加载资源

<div id="app"></div>
<script type="module" src="/src/main.js"></script>

组合式API

逻辑写法

Vue3提供两种组织代码逻辑的写法

option api

• 通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法(Vue2写法)

<script>
export default {
  data() {
    return {
    id:1,
    ..
    };
  },
  methods: {
    fn() {
     ...
    },
   ...
  },
};
</script>

composition api

• 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法

<script>
// ref 就是一个组合式API  
import { ref } from 'vue';
export default {
  setup () {
    const id = ref(1)
    const fn = () => {
      ...
    return { id,fn }
  }
};
</script>

setup函数

特点

• setup 函数是 Vue3 特有的选项，作为组合式API的起点
• 从组件生命周期看，它在 beforeCreate 之前执行
• 函数中 this 不是组件实例，是 undefined
• 如果数据或者函数在模板中使用，需要在 setup 返回

setup() 函数替代 Vue.js 2.x 中的 beforeCreate() 和 created() 钩子函数

<template>
  <div>
    <h1 @click="fn()">{{id}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
    // 返回给模板使用
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

reactive函数

概念
reactive 是 Composition API 的一部分，它是一个函数，用于创建一个响应式的对象。

reactive函数通常定义复杂类型的响应式数据
不能定义简单数据

步骤
1.从 vue 中导出 reactive 函数

<script>
  // 1.导入函数
  import { reactive } from "vue"; 
</script>

2.在 setup 函数中，使用 reactive 函数，传入一个普通对象，返回一个响应式数据对象

<script>
  export default {
  import { reactive } from "vue"; 
    setup() {
      // 2. 创建响应式数据对象
      const state = reactive({ name: 'tom', age: 18 })
    }
  };
</script>

3.最后 setup 函数返回一个对象，包含该响应式对象即可，模板中可使用

<script>
  import { reactive } from "vue"; 
  export default {
    setup() {
      const state = reactive({ name: 'tom', age: 18 })
      // 3. 返回数据
      return { state }
    }
  };
</script>

<template>
  <div>
    <p>姓名：{{state.name}}</p>
    <p>年龄：{{state.age}} <button @click="state.age++">一年又一年</button></p>
  </div>
</template>

ref函数

ref函数定义响应式数据不限类型

步骤
1.从 vue 中导出 ref 函数

<script>
// 1. 导入函数
import { ref } from "vue";
</script>

2.在 setup 函数中，使用 ref 函数，传入普通数据（简单或者复杂），返回一个响应式数据

<script>
// 1. 导入函数
import { ref } from "vue";
export default {
  setup() {
    // 2. 创建响应式数据对象
    const count = ref(0);
  },
};
</script>

3.最后 setup 函数返回一个对象，包含该响应式数据即可

<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      // js中使用需要.value
      count.value += 10;
    };
    // 3. 返回数据
    return { count, increment };
  },
};
</script>

<template>
  <div>
    <p>
      计数器：{{ count }}
      <button @click="count++">累加1</button>
      <!-- template中使用可省略.value -->
      <button @click="increment">累加10</button>
    </p>
  </div>
</template>

注意：使用 ref 创建的数据，js 中需要 .value ，template 中可省略

reactive 与 ref 的选择

对比

• reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。
• ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。

结论

• 在定义响应式数据的函数选择上，遵循：尽量使用 ref 函数支持所有场景，确定字段的对象使用 reactive 可以省去.value。
• 尤雨溪推荐使用ref

setup语法糖

原始语法

<script>
export default {
  setup() {
    const say = () => console.log('小鸟游上岸')
    return { say }
  }
}
</script>

setup 语法糖

<script setup>
  const say = () => console.log('小鸟游上岸')
</script>

computed函数

computed 函数定义计算属性
步骤
1.从 vue 中导出 computed 函数

<script setup>
  import { computed } from "vue";
</script>

2.在 setup 函数中，使用 computed 函数，传入一个函数，函数返回计算好的数据

<script setup>
  import { ref, computed } from "vue";
  const scoreList = ref([80, 100, 90, 70, 60]);
  // 计算属性
  const betterList = computed(() => scoreList.value.filter((item) => item >= 90));
  // 改变数据，计算属性改变
  setTimeout(() => {
    scoreList.value.push(92, 66);
  }, 3000);

</script>

3.最后 setup 函数返回一个对象，包含该计算属性数据即可，然后模板内使用

// setup语法糖
<script setup>
  ...
</script>

watch函数

watch函数监听数据的变化
示例
1.watch 监听一个响应式数据

<script setup>
  import { ref, watch } from "vue";
  const count = ref(0);
  // 1. 监听一个响应式数据
  // watch(数据, 改变后回调函数)
  watch(count, () => {
    console.log("count改变了");
  });
  // 2s改变数据
  setTimeout(() => {
    count.value++;
  }, 2000);
</script>

2.使用 watch 监听多个响应式数据

<script setup>
  import { reactive, ref, watch } from "vue";
  const count = ref(0);
  const user = reactive({
    name: "鲁迅",
    info: {
      gender: "男",
      age: 18,
    },
  });
  
  // 2. 监听多个响应式数据
  // watch([数据1, 数据2, ...], 改变后回调函数)
  watch([count, user], () => {
    console.log("数据改变了");
  });
  
  // 2s改变数据
  setTimeout(() => {
    count.value++;
  }, 2000);
  
  // 4s改变数据
  setTimeout(() => {
    user.info.age++;
  }, 4000);
</script>

3.使用 watch 监听响应式对象数据中的一个属性(简单)

<script setup>
  import { reactive, watch } from "vue";
  const user = reactive({
    name: "鲁迅",
    info: {
      gender: "男",
      age: 18,
    },
  });
  // 3. 监听响应式对象数据的一个数据，简单类型
  // watch(()=>数据, 改变后回调函数)
  watch(()=>user.name, () => {
    console.log("数据改变了");
  });
  // 2s改变数据
  setTimeout(() => {
    user.name = '周树人';
  }, 2000);
  // 4s改变数据
  setTimeout(() => {
    user.info.age = 60;
  }, 4000);
</script>

4.使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听

<script setup>
  import { reactive, watch } from "vue";
  const user = reactive({
    name: "鲁迅",
    info: {
      gender: "男",
      age: 18,
    },
  });
  // 4. 监听响应式对象数据的一个数据，复杂类型
  // watch(()=>数据, 改变后回调函数, {deep: true})
  watch(
    () => user.info,
    () => {
      console.log("数据改变了");
    },
    {
      // 开启深度监听
      deep: true,
    }
  );
  // 2s改变数据
  setTimeout(() => {
    user.info.age = 60;
  }, 2000);
</script>

immediate 默认执行
立即执行watch函数一次

{
  // 开启深度监听
  deep: true,
  // 默认执行一次
  immediate: true
}

生命周期函数

Vue3使用步骤：
1.先从vue中导入以on打头的生命周期钩子函数
2.在setup函数中调用生命周期函数并传入回调函数
代码示例

<script setup>
  import { onMounted } from "vue";
  // 生命周期函数：组件渲染完毕
  onMounted(()=>{
    console.log('第一个onMounted触发了')
  })

  onMounted(()=>{
    console.log('第二个onMounted也触发了')
  })
</script>

<template>
  <div>生命周期函数</div>
</template>

Vue3和vue2的生命周期对比

选项式API下的生命周期函数使用	组合式API下的生命周期函数使用
beforeCreate	不需要（直接写到setup函数中）
created	不需要（直接写到setup函数中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

注意

• 生命周期钩子函数可以调用多次
• vue2的生命周期方法也可以使用

ref获取DOM元素

步骤
1.创建 ref
const myRef = ref(null)

<script setup>
import { ref } from 'vue'
const myRef = ref(null)  
</script>

2.模板中建立关联
ref="myRef"

<template>
  <div>
    <h1 ref="myRef">鲁迅</h1>
    <button @click="clickFn">操作DOM</button>
  </div>
</template>

3.使用
myRef.value

<script setup>
import { ref } from 'vue'
const myRef = ref(null)  
// 使用
const clickFn = () => {
  myRef.value.innerText = '周树人'
}
</script>

组件通信

一、ref操作组件-defineExpose

组件上使用 ref属性关联响应式数据，获取组件实例
注意
1.使用 <script setup> 的组件是默认关闭的，组件实例使用不到顶层的数据和函数。
2.需要配合 defineExpose 暴露给组件实例使用，暴露的响应式数据会自动解除响应式
示例
子组件

<template>
  <h3>我是Form组件</h3>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const validate = () => {
  console.log('表单校验方法')
}

// 暴露属性给外部组件使用
defineExpose({count, validate})
</script>

父组件

<template>
  <Form ref="formRef"></Form>
</template>

<script setup>
import { ref } from 'vue'
import Form from './components/Form.vue'

// 1. 提供一个ref
const formRef = ref(null)
// 2. 使用组件组件和方法
const fn = () => {
  console.log(formRef.value.count)
  formRef.value.validate()
}
</script>

二、父传子-defineProps函数

示例步骤
1.父组件提供数据
父组件

<template>
  <div>
    <h1>我是父组件</h1>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <hr />
    <ChildCom></ChildCom>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildCom from './components/ChildCom.vue'

const age = ref(44)
const name = ref('鲁迅')
</script>

2.父组件将数据传递给子组件
父组件

<template>
  <div>
    <h1>我是父组件</h1>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <hr />
    <ChildCom :name="name" :age="age"></ChildCom>
  </div>
</template>

3.子组件通过 defineProps 进行接收
子组件

<template>
  <div>
    <h3>我是子组件</h3>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// defineProps: 接收父组件传递的数据
const props = defineProps({
  age: Number,
  name: String,
})
</script>

4.子组件渲染父组件传递的数据
子组件

<template>
  <div>
    <h3>我是子组件</h3>
    <div>{{ money }} --- {{ car }}</div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// defineProps: 接收父组件传递的数据
const props = defineProps({
  age: Number,
  name: String,
})
// 使用props
console.log(props.name)
</script>

三、子传父-defineEmits函数

1.子组件通过 defineEmits获取 emit 函数（因为没有this)
子组件

<script setup>
import { defineEmits } from 'vue'
...
// 得到emit函数，显性声明事件名称
const emit = defineEmits(['changeAge'])
</script>

2.子组件通过 emit 触发事件，并且传递数据

  <button @click="change">子组件修改</button>

<script setup>
import { defineEmits } from 'vue'
// 得到emit函数，显性声明事件名称
const emit = defineEmits(['changeAge'])
// 修改年龄事件
const change = () => {
  emit('changeAge', 10)
</script>

}

3.父组件提供方法

<script setup>
import { ref } from 'vue'
import ChildCom from './components/ChildCom.vue'

const age = ref(44)
const car = ref('鲁迅')
// 子组件方法
const changeAge = (num) => {
  age.value = age.value - num
}
</script>

4.父组件通过自定义事件的方式给子组件注册事件

<ChildCom @changeAge="changeAge"></ChildCom>

defineEmits 获取 emit 函数，且组件需要触发的事件需要显性声明出来

四、跨级组件通讯provide与inject函数

介绍
provide 和 inject 是 Vue 中用于实现跨级组件通信的一对高级选项。它们允许父组件向所有子孙组件注入一些数据，而不必通过中间层组件将数据逐层传递。

官方术语：依赖注入
父组件是后代组件依赖的数据和函数的提供者，孙组件是注入（获取）了父组件提供的依赖

代码示例
父组件
ParentCom.vue
provide 提供后代组件需要依赖的数据或函数

<template>
  <div
    class="parent-page"
    style="border: 10px solid #ccc; padding: 50px; width: 600px"
  >
    父组件 {{ count }} updateCount
    <ChildCom />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildCom from './ChildCom.vue';

// 1. 父组件数据传递给孙子组件grandchild
const count = ref(0);
provide('count', count);

// 2. 父组件函数传递给孙组件grandchild，调用的时候可以回传数据
const updateCount = (num) => {
  count.value += num;
};
provide('updateCount', updateCount);
</script>

子组件
ChildCom.vue

<template>
  <div class="child-page" style="padding: 50px">
    parent 组件
    <hr />
    <ChildCom />
  </div>
</template>

<script setup>
import GrandchildCom from './GrandchildCom.vue';
</script>

孙组件
GrandchildCom.vue
inject 注入（获取）provide提供的数据或函数

<template>
  <div class="grandchild-page" style="padding: 50px; border: 10px solid #ccc">
    grandchild 组件 {{ count }} <button @click="updateCount(100)">修改count</button>
  </div>
</template>

<script setup>
// inject 注入（获取）provide提供的数据或函数
const count = inject('count');
const updateCount = inject('updateCount');
</script>

五、Pinia

官方网站：https://pinia.vuejs.org/zh/

简介

• Pinia 是一个状态管理工具，它和 Vuex 一样为 Vue 应用程序提供共享状态管理能力。
• 语法和 Vue3 一样，它实现状态管理有两种语法：选项式API 与 组合式API，我们学习组合式API语法。
• 它也支持 Vue2 也支持 devtools，当然它也是类型安全的，支持 TypeScript

使用步骤
1.安装

yarn add pinia
# or
npm i pinia
# or
pnpm i pinia

2.导入，实例化，当做插件使用，和其他插件使用套路相同

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

3.创建仓库&使用仓库

import { defineStore } from "pinia"
import { computed, ref } from "vue"

export const useCounterStore = defineStore("counter", () => {
  return {}
})

// 使用仓库
<script setup lang="ts">
import { useCounterStore } from "./store/counter"
// store中有状态和函数
const store = useCounterStore()
</script>

4.进行状态管理

// state
  const count = ref(100)
  // getters
  const doubleCount = computed(() => count.value * 2)
  // mutations
  const update = () => count.value++
  // actions
  const asyncUpdate = () => {
    setTimeout(() => {
      count.value++
    }, 1000)
  }
  return { count, doubleCount, update, asyncUpdate }

<template>
  APP {{ store.count }} {{ store.doubleCount }}
  <button @click="store.update()">count++</button>
  <button @click="store.asyncUpdate()">async update</button>
</template>

总结

通过 const useXxxStore = defineStore('id',函数) 创建仓库得到使用仓库的函数

Vuex	Pinia
state	ref 和 reactive创建的响应式数据
getters	computed 创建的计算属性
mutations 和 actions	普通函数，同步异步均可

使用Pinia与在组件中维护数据大体相同，这就是 Pinia 的状态管理基本使用

storeToRefs

解决解构仓库状态丢失响应式的问题

代码：

import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)

当你想从 store 中解构对应的状态使用，需要使用 storeToRefs

保持响应式-toRefs函数

作用
用于将一个响应式对象转换为其各个响应式属性的普通对象，每个属性都包装在ref对象中。
示例步骤
1.创建响应式对象

import { reactive } from "vue";
const user = reactive({ name: "鲁迅", age: 18 });

2.使用 toRefs 处理响应式数据

import { reactive, toRefs } from "vue";
const user = reactive({ name: "tom", age: 18 });
const { name, age } = toRefs(user)

3.使用处理后的数据

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <!-- 响应式丢失 -->
    <p>年龄：{{ age }} <button @click="age++">一年又一年</button></p>
  </div>
</template>

运用场景

• 把对象中的每一个属性做一次包装成为响应式数据
• 响应式数据展开的时候使用，解构响应式数据的时候使用