【vue3】入门基础知识点

爱胡思乱想的猫

已于 2025-02-12 17:45:24 修改

阅读量1k

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2025-02-12 17:35:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46615366/article/details/145596649

Vue3核心语法

组合式API【vue3】与选项式API【vue2】

setup

setup和data、methods同级别, 可与data等共存，data里面可以读取使用setup中声明的变量，而setup不能使用data中声明的变量（setup加载时间早于beforeCreated）
setup中的this都是undefined
直接声明变量，其变量是非响应式的
setup中需要写返回值，将声明的东西抛出去（返回值可以是对象，也可以是渲染函数）
非响应式写法

setup(){
   
   
  let name = 'zs';
  Let age = 18;
  function changeName(){
   
   
    name = '李四';
  }
  return {
   
   name,changeName}
}

setup的语法糖

在script标签里加上setup，即可不用写return
vue3中一个vue文件可以有多个script标签，但是只有一个标签里有setup属性
在setup中引入子组件时，不需要注册，即可使用

<script setup lang="ts">
  let a = 'zhang-san'
</script>

如何声明组件名字？

与vue2类似，需要多写一组script, 且不能加setup
使用defineOptions定义name*【defineOptions({name:‘xx’})】

<script lang="ts">
  export default {
   
   
    name: "Person"
  }
</script>

响应式数据ref,reactive

基本类型 - ref

经过ref方法声明的变量是响应式的，此时变量是一个带有value属性的对象，在template模块中可直接使用对象，若想在方法中修改变量值，需要xx.value去修改。

<template>{
   
   {
   
   name}}</template>
<script setup>
  import {
   
   ref} from 'vue'
  let a= ref('张三')  // a是响应式的
  changeName = >{
   
   
     name.value = '李四'
  }
</script>

对象类型-ref/reactive

reactive: 只能定义对象类型，声明的对象是深层次的

<script setup>
// ref 写法
let car = ref({
   
   brand:'x',price:10})
changePrice = > {
   
   
  car.value.price +=10
}
changeCarInfo = > {
   
   
  car.value = {
   
   brand:'cc',price:20} // 此方法可以直接修改原car对象
  car = ref({
   
   brand:'cc',price:20})  // 此时已为car重新分配了一个对象,因此原对象并不会改变
}
----------------------------------------------------------------------------------

// reactive写法
import {
   
   ref,reactive} from vue
let car = reactive({
   
   brand:'Aa',  price:20})
changePrice => {
   
   
   car.price +=10
}
changeCarInfo = > {
   
   
 Object.assign(car,{
   
   brand:'cc',price:10}) // 采用object.assign()方法修改原car对象
  car = reactive({
   
   brand:'cc',price:10}) // 此时已为car重新分配了一个新对象，因此原对象并不会改变
}
<script>

ref与reactive的区别

ref创建的变量必须使用.value去修改（可以使用Volar插件去自动添加.value）
ref声明对象类型，实际上底层也是用了reactive
reactive重新分配一个新对象，会失去响应式【修改reactive定义的变量：若为reactive创建的变量重新分配一个新对象，此时变量已指向新对象，并不会被修改(可以使用Object.assign去整体替换)】

toRef与toRefs

toRefs：使对象中的每个属性变成响应式【toRefs(对象)】
toRef: 指定对象中的属性变成响应式【toRef(对象,‘属性’)】
⚠️：使用toRefs/toRef声明的响应式变量，实际和原变量指向同一个对象！！

<script>
let person = reactive({
   
   name:'xx',age:18})

let {
   
   name,age} = person
 console.log(name,age) // 此时的name和age是非响应式的

let {
   
   name,age} = toRefs(preson)
console.log(name.value) // 此时的name和age是响应式

let age1 = toRef(preson,'age') // age1是响应式
changeAge = > {
   
   
  age1.value + = 1
}
console.log(age1.value,person.age) // 此时person.age的值也发生了改变

⚠️：person.name/person.age是一个响应式的对象，使用toRefs/toRef声明的响应式变量，实际和person.name/age指向同一个对象！！
</script>

计算属性computed

计算属性：也是一个ref所定义的一个响应式数据，可通过set修改值
有缓存，只会依据所计算的东西改变而变化

<script>
import {
   
   computed} from 'vue'
let a= ref(1)
let b= ref(2)

// 利用计算属性做操作
let sum = computed(()=>{
   
   
  return a.value + b.value
})

let sum1 = computed({
   
   
  get(){
   
   } // 常用
  set(val){
   
   } // 可修改计算属性的值,不常用
})
</script>

监听watch

第一个参数是监听器的【监视的数据源】，第二个参数是一个【监视的回调函数】，第三个参数一个【属性对象】

这个【源】：分四类，ref定义的数据，reactive定义的数据，一个函数返回一个值（getter函数），由这几种类型的值组成的数组

情况一

监视【ref】定义的【基本类型】数据

直接写数据名，监视的是其value值的改变

import {
   
   ref,watch} from 'vue'
let sum = ref(1)
const stopWatch = watch(sum,(newVal,oldVal)=>{
   
   
  console.log('sum变化',newVal,oldVal)
  // 停止监听？
  if(newVal > 10){
   
   
    stopWtach() // 调一遍自己 
  }
}