vue3的核心知识点合集

1. Vue3 中文文档(新)  Vue.js - 渐进式 JavaScript 框架 | Vue.js

vue3的优点：

1. 首次渲染更快
2. diff 算法更快
3. 内存占用更少
4. 打包体积更小
5. 更好的 Typescript 支持
6. Composition API 组合 API

 首先理解一下vite 构建工具：

vite是一种新型前端构建工具，能够显著提升前端开发体验。

对比 webpack：

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

而vite 的原理是：

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

 基于 webpack 构建项目  与  基于 vite 构建项目，谁更快体验更好？vite

基于 webpack 的 vue-cli 也可以创建 vue 项目，只是慢一点而已。

 6.进入项目目录，安装依赖，启动项目即可。npm i         pnpm run dev或npm run dev启动项目

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

• 通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法
• 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法

 一、组合式api

• 在setup中通过vue提供的函数组织代码实现功能，就是组合式API写法。
• 组合式API的好处：可复用，可维护
• ref 就是一个组合式API

 二、生命周期函数

Vue2和Vue3生命周期对比

 三、Vue3常用核心语法

1.setup函数

特点：

（1）setup函数是vue的特有选项，是组合式api的入口函数

（2）从生命周期看，它在beforeCreate之前执行

（3）作为入口函数，必须要有return

（4）没有this值

注：setup 中返回的对象数据不是响应式的，需要使用ref和reactive转成响应式

 代码示例：

2.setup语法糖： 

作用：简化 setup 固定代码 ，让代码更简洁 

使用：

（1）直接在script标签里面写setup 不用return 和 export default

（2）导入组件之后可以直接使用，不用注册

代码示例：

3.ref函数

作用：

（1）定义响应式数据，所有数据类型都可以使用（除复杂数据类型外，其他数据类型常用ref( )  )

使用步骤：

1.从vue中导入ref

2.在 setup 函数中，使用 ref 函数，传入数据，返回一个响应式数据

3.使用 ref 创建的数据，js 中需要 .value来取值 ，template模板 中可省略

 

（2）获取DOM元素，相当于Vue2中的自定义指令

 使用步骤：

1.从vue中导入ref

2.模板中建立关联: ref="自定义属性名"

3.使用: 自定义属性名.value

代码示例： 

 4.reactive函数

作用：定义复杂数据类型的响应式数据，不能定义简单数据类型

使用步骤：

1.从vue中导入 reactive

2.在 setup 函数中，使用 reactive 函数，传入复杂数据类型数据，返回一个响应式数据

3.使用 reactive 创建的数据，js 和 template 模板中都可以直接使用

5.computed函数 

作用：计算属性

使用步骤：

1.从vue中导入 computed

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

3.计算好的数据在 js 中需要.value取值，template 模板中可以直接使用

 代码示例： 

6.watch函数 

作用：监听数据的变化

使用步骤：

1.从vue中导入 watch

2.在 setup 函数中，使用 watch 函数，参数有以下几种情况：

  （1）监听简单数据类型，参数为：值，（newVal，oldVal）=>  { }  ，配置项

  （2）监听复杂数据类型，参数为：值，（newVal）=>  { }  ，配置项

  （3）监听对象中某个属性，参数为：()=>对象.属性，（newVal，oldVal）=>  { }  ，配置项

  （4）同时监听多个数据，参数为：[数据1,数据2...]，（newVal，oldVal）=>  { }  ，配置项

代码示例：

（1）监听简单数据类型

    // watch(需要监听的数据||函数,数据改变执行函数,配置对象) 来进行数据的侦听
    // 1 使用 watch 监听一个简单数据类型
    import {ref,watch } from 'vue'
    let num=ref(0)
   
    // setTimeout只执行一次
    setTimeout(()=>{
      num.value++
    },1000)

    // 监听num的变化
    watch(num,(nerval,olduvai)=>{
      console.log(nerval,olduvai,'num发生改变了');
    })

（2）监听复杂数据类型

     // 2 使用 watch 监听响应式对象数据中的一个属性(简单)
    import {reactive,watch } from 'vue'
    let obj=reactive({age:18,name:'jack'})
   
   const btn=()=>{
    obj.age+=2
    obj.name='rose'
   }

    // 监听obj的变化 ,监听复杂数据类型的时候，只有新值newVal，没有旧值oldVal
  watch(obj,(newVal)=>{
    console.log(obj,newVal);
  })

（3）监听对象中某个属性

    //3 使用 watch 监听响应式对象数据中的一个属性(监听复杂数据类型)
    import { reactive, watch } from "vue";
  const obj = reactive({
    num: 33,
    info: {
      name: "jack",
      age: 18,
    },
  });

   const btn=()=>{
    obj.num+=10
    obj.info.age+=2
    obj.info.name='rose'
   }

  watch(()=>obj.info.age,(newVal,oldVal)=>{
      console.log(obj.info.age,obj.info.name,newVal,oldVal);
  })

（4）同时监听多个数据

// 4 使用 watch 监听多个数据
    import {ref,reactive,watch } from 'vue'
    let num=ref(1)
    let obj=reactive({age:18,name:'jack'})
   
   const btn=()=>{
    num.value+=1
    obj.age+=2
    obj.name='rose'
   }

    // 同时监听多个数据类型 newVal是一个数组
  watch([()=>obj.age,num],(newVal,oldVal)=>{
    console.log('111',newVal,oldVal);
  })

7.ref操作组件-defineExpose函数
作用：使用

 子组件示例代码：

 孙组件示例代码：

11.保持响应式 toRefs函数
作用：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式

使用步骤：

1.从 vue 中导出 toRefs 函数

2.将被展开或解构的数据作为参数传入toRefs 函数

3.解构后的数据是一个变量，依然可以保持响应式，但js中需要通过.value取值，模板中不用