速学兼复习之vue3章节4

系列文章目录

第一章 速学兼复习之vue3章节1
第二章 速学兼复习之vue3章节2
第三章 速学兼复习之vue3章节3

---

文章目录

• 系列文章目录
• 前言
• [一、Composition API 和 Options API](#一、Composition API 和 Options API)
• • [Composition API](#Composition API)
  • [Options API](#Options API)
• 二、setup语法糖
• • setup常规使用
• 三、ref和reative
• • 什么是响应式？
  • [ref和reative 的区别](#ref和reative 的区别)
• 四、data
• 五、methods
• 六、computed
• 七、watch
• 总结

---

前言

本章介绍vue的语法，涉及vue2的；vue中有常用的方法调用有：data,methods,computed,watch等，下面有详细介绍这个函数的干啥的。

---

一、Composition API 和 Options API

vue官网地址

vue3存在两种使用Composition API 和 Options API使用；

Composition API

Composition API 是组合式api，意思按逻辑功能组织代码；你可以简单理解：可以vue2和vu3语法组合使用，针对业务把相关的逻辑都在一起；

Options API

Composition API 是选项式api。意思按选项分类（data、methods、computed等）

举例说明：

需求：实现一个计算器

创建文件夹：src/pages/Count

创建文件 index.vue

Composition API实现

<template>
 <div>
    <p>计数: {{ count }}</p>
    <p>两倍计数: {{ doubleCount }}</p>
    <button @click="increment">增加</button>
     <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup lang="ts" name="count">
// 在这里编写脚本 
// lang="ts" 是声明了使用ts的声明
 import {ref ,computed,watch,onMounted} from 'vue'

 const count = ref(0)
  const increment =()=>{
    count.value++
  }
   const decrement =()=>{

    if(count.value>0){
   count.value--
    }else{
        alert("至少为0!")
    }
  }
  const reset =()=>{
    count.value=0
  }
  const doubleCount = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`计数从 ${oldVal} 变为 ${newVal}`)
})

onMounted(() => {
  console.log('组件已挂载，初始计数:', count.value)
})
</script>

<style scoped>
/* 在这里编写样式 */
</style>

Options API 实现

<template>
 <div>
    <p>计数: {{ count }}</p>
    <p>两倍计数: {{ doubleCount }}</p>
    <button @click="increment">增加</button>
     <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  name: 'count',
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`计数从 ${oldVal} 变为 ${newVal}`)
    }
  },
  methods: {
    increment() {
      this.count++
    },
    reset() {
      this.count = 0
    },
    decrement(){
        if(this.count>0){
            this.count--
        }else{
           alert("至少为0!")
        }
    }

  },
  mounted() {
    console.log('组件已挂载，初始计数:', this.count)
  }
}
</script>

<style scoped>
/* 在这里编写样式 */
</style>

二、setup语法糖

官网介绍

官网介绍的很清楚，不多赘述了。简单的说就是为了省功夫使用简洁的代码实现功能

setup语法糖的主要功能：

1. 自动导出；在标签 script setup中声明的变量、函数、import 都会自动暴露给模板，无需 return；而且模版中使用变量的时候，会自动解包。
2. 更简洁的 Props 和 Emits。没有this的存在了
3. 对 TypeScript 支持更好

⚠️自动解包：正常一个ref变量，重新赋值需要.value;但是模版中使用变量不需要.value去获取值展示

setup常规使用

<script setup lang=ts name="xxx">
//lang=ts 声明该文件是typescript的类型文件，在声明变量和函数记得要写类型的喔
//name="xxx" 是为了声明该组件的组件名

</script>

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

三、ref和reative

如何创建一个变量？

js的写法：

let value =0
const object ={}
var  className= "一班"

vue3的写法

<script setup lang="ts" name="Proson">
import { ref,reactive } from 'vue';
const address = ref("上海")
const personInfo = reactive({
    usename:"张三",
    age:18
})
</script>

什么是响应式？

官网介绍

响应式是 Vue 的核心特性，指数据变化时，界面会自动更新。

如同我上面的那个计算器实例一样，当你点击了增加按钮，计数值就是马上变化的；

ref和reative 的区别

四、data

作用：制定初始值

语法：data 必须是函数，返回数据对象

vue2的写法

<script>
export default {
  name: 'count',
  data() {
    return {
      //基本数据类型
      count: 0,
      // 数组
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      
      // 对象
      user: {
        name: '张三',
        age: 25,
        email: 'zhangsan@example.com'
      },
    }
  }
  }
</script>

五、methods

作用：制定函数方法的地方

语法：methods 必须是函数，返回函数对象

vue2的写法：

 methods: {
    increment() {
      this.count++
    },
    reset() {
      this.count = 0
    },
    decrement(){
        if(this.count>0){
            this.count--
        }else{
           alert("至少为0!")
        }
    }

  },

六、computed

作用：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

也可以缓存值呢

语法：computed 必须是函数，返回函数对象

 computed: {
     addCount() {
      return this.count ++
    }，
    doubleCount() {
      return this.count * 2
    }
  },

七、watch

作用：主要用于监听响应式数据的变化，并在变化时执行特定的逻辑。

监听对象：基本数据类型，对象属性，整个对象（深度监听），计算属性；可以监听多个数据源。

语法：vue2和vue3不同，看实例；

⚠️注意：监听的对象可以获取新值和旧值，此外监听函数可以传两个值；immediate: true是初始化执行监听，deep: true 是 深度监听，一般用监听object对象的深层变化；

 watch: {
    count(newVal, oldVal) {
      console.log(`计数从 ${oldVal} 变为 ${newVal}`)
    }
  },

深度监听：

 // Vue 2
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('用户信息变化:', newVal)
    },
    deep: true  // 深度监听
  }
}

// Vue 3
watch(user, (newVal, oldVal) => {
  console.log('用户信息变化:', newVal)
}, { deep: true })

计算属性监听：

// Vue 2
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('全名变化:', newVal)
  }
}

// Vue 3
const fullName = computed(() => firstName.value + ' ' + lastName.value)
watch(fullName, (newVal, oldVal) => {
  console.log('全名变化:', newVal)
})

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue3的常规使用的函数语法，下一章：路由的使用