vue3的核心知识点合集

最新推荐文章于 2024-06-13 15:12:44 发布

麦兜的明天

最新推荐文章于 2024-06-13 15:12:44 发布

阅读量2.1k

点赞数 6

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/ll123456789_/article/details/128998655

版权

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

vue3的优点：

首次渲染更快
diff 算法更快
内存占用更少
打包体积更小
更好的 Typescript 支持
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转成响应式

代码示例：

<template>
  <div>
   ===vue3
   ===={{ num }}
   ===={{ obj.age }}==={{ obj.name }}
   <button @click="btn">按钮</button>
  </div>
 </template>
 <script>
 import {ref,reactive} from 'vue'
    export default {
      name:'',
      setup(){
        //  ref定义响应式数据，不限数据类型 更改数据需要.value
       let num=ref(10)
      //  reactive定义响应式数据，只限于复杂数据类型  更改数据不需要.value
       let obj=reactive({age:12,name:'jack'})  
       
       const btn=()=>{
         num.value+=2
         obj.age=18
         obj.name='rose'
         console.log(num.value,obj.age,obj.name,99);
      }
      return {num,obj,btn}
    }
  }  
 </script>
 <style lang='less'  scoped>
  
 </style>

2.setup语法糖：

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

使用：

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

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

代码示例：

<template>
  <div>
    ===vue3
    ===={{ num }}
    ===={{ obj.age }}==={{ obj.name }}
    <button @click="btn">按钮</button>
  </div>
</template>

<script setup>
// setup写在script标签上就是语法糖，优化代码，不需要导入导出，在导入组件的时候也不需要注册
import { ref, reactive } from 'vue'
//  ref定义响应式数据，不限数据类型 更改数据需要.value
let num = ref(10)
//  reactive定义响应式数据，只限于复杂数据类型  更改数据不需要.value
let obj = reactive({ age: 12, name: 'jack' })
const btn = () => {
  num.value += 2
  obj.age = 18
  obj.name = 'rose'
  console.log(num.value, obj.age, obj.name, 99);
}
</script>
<style lang='less'  scoped>

</style>

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

代码示例：

<script setup>
  // 常用的 onMounted 组件渲染完毕：发请求，操作dom，初始化图表...
  import {ref, onMounted } from "vue";
  // 生命周期函数：组件渲染完毕
  onMounted(()=>{
    console.log('onMounted触发了')
    console.log(dom,'dom111');
  })

  // 默认值是null，需要在渲染完毕后访问DOM属性。
  let dom=ref(null)
  const btn=()=>{
    console.log(dom.value,'dom222');
  }
</script>

<template>
  <div>生命周期函数
    <h1 ref="dom">我是标题h1</h1>
    <button @click="btn">按钮操作dom</button>
  </div>
</template>

4.reactive函数

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

使用步骤：

1.从vue中导入 reactive

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

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

5.computed函数

作用：计算属性

使用步骤：

1.从vue中导入 computed

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

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

代码示例：

<script setup >
    import {ref,reactive,computed} from 'vue'
    let arr=reactive([1,2,3,4,5])
    let val=ref(1)

    // computed动态求和 这里数组发生改变，computed计算属性就会触发  
    const total=computed(()=>{
     return arr.reduce((sum,item)=> sum+Number(item) ,0)
    })
    const handel=()=>{
        arr.push(val.value)
    }
</script>
<template>
 <div>
  御剑乘风来,除魔天地间!===vue3
  ======{{ total }}======={{ arr }}
  <input type="text" @blur="handel" v-model="val" placeholder="请输入数字">
 </div>
</template>
<style lang='less'  scoped>
    
</style>

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函数
作用：使用 <script setup> 的组件是默认关闭的，组件实例使用不到顶层的数据和函数。通过defineExpose函数可以将子组件中的数据和方法暴露出去，父组件直接通过ref就能调用子组件中的数据和方法

使用步骤：

1.子组件: defineExpose({变量名,函数名,... })

2.父组件: ref名.value.xxx 直接调用

8.父传子-defineProps函数
作用：实现父传子组件通讯

使用步骤：

1.父组件：和vue2语法一样正常传值

2.子组件：用defineProps接收

3.在js中，通过defineProps的返回值来接收使用数据，template 模板中可以直接使用

9.子传父-defineEmits函数
作用：实现子传父组件通讯

使用步骤：

1.子组件：

通过defineEmits声明事件名称,并接收返回值emit

根据条件触发emit('事件名称','传值'),进行传值

2.父组件：

模板中接收@事件名="新函数"

js中新函数可以通过参数e,接收传值

10.跨级组件通讯provide与inject函数
作用：通过provide和inject函数实现简单的跨级组件通讯

使用步骤：

1.祖先组件

(1)从 vue 中导出 provide 函数

(2)provide('变量名', 变量值);

2.子/孙组件

(1)从 vue 中导出 inject 函数

(2)const value = inject('变量名')

Q：如何通过provide和inject实现响应式数据传值?
1.祖先组件先传变量和函数给子/孙组件
2.子/孙组件接收函数并调用传值
3.祖先组件中的函数接收传值，并对变量重新赋值

父组件示例代码：

<script setup>
// provide和inject是解决跨级组件通讯的方案
// provide 提供后代组件需要依赖的数据或函数
// inject 注入（获取）provide提供的数据或函数
import Son03 from "./components/Son03.vue";

import { ref, reactive, provide } from 'vue';
const count = ref(100)
const obj = reactive({ age: 18, name: '小花' })
const addFn = (e) => {
  obj.name = e
  console.log(e);
}
// provide 提供后代组件需要依赖的数据或函数
// provide(键,值)  传值
provide('newCount', count.value)  //祖先组件向子组件和sun组件传值
provide('newObj', obj)
provide('newAddFn', addFn)
</script>
<template>
  <div>
    <h3>我是父组件===vue3</h3>
    <div>余额：{{ count }}元</div>
    <div>姓名：{{ obj.name }}</div>
    <hr />
    <Son03></Son03>
  </div>
</template>
<style lang='less'  scoped>

</style>

子组件示例代码：

<script setup >
// 导入sun组件 
import sun from "./sun.vue";
 
</script>
<template>
  <div>
    <div>我是子组件===Son03</div>
    <hr />
    <sun></sun>
  </div>
</template>
<style lang='less'  scoped>

</style>

孙组件示例代码：

<script setup >
// 跨级sun组件接收爷爷传过来的值count和obj  addFn函数
import { inject } from 'vue';
let newCount = inject('newCount')
let newObj = inject('newObj')
let newAddFn = inject('newAddFn')
console.log(newCount, 111);
console.log(newObj, 222);
console.log(newAddFn, 333);

const btn = (e) => {
  console.log(e, 444);
  newAddFn('小红')
}
</script>
<template>
  <div>
    <div>我是sun组件===sun</div>
    <div>{{ newCount }}</div>
    <div>{{ newObj }}</div>
    <div>{{ newAddFn }}</div>
    <button @click="btn">按钮</button>
  </div>
</template>
<style lang='less'  scoped>

</style>

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

使用步骤：

1.从 vue 中导出 toRefs 函数

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

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

<script setup >
  import {reactive, toRefs} from 'vue'
  // 当去解构和展开响应式数据对象使用 toRefs 保持响应式
    const user =reactive({name:'tom',age:'18',gender:'男'})
    // const {name,age,gender}=user  //这种解构的写法 响应式失效
    const {name,age,gender}=toRefs(user)  //在解构对象的时候 使用了toRefs 才能保持数据是响应式的

  const btn=()=>{
    user.name='rose'
    user.age=28
    user.gender='女'
  }
</script>
<template>
 <div>
  御剑乘风来,除魔天地间!===vue3
      <!-- ===姓名:{{user.name}}===年龄:{{ user.age }}===性别：{{ user.gender }} -->
      ===姓名:{{name}}===年龄:{{ age }}===性别：{{ gender }}
      <button @click="btn">改变数据按钮</button>
 </div>
</template>
<style lang='less'  scoped>
    
</style>