Vue3入门组合式 API-CSDN博客

本文链接：https://blog.csdn.net/xiao_tongtong/article/details/134570799

本文介绍了如何在Vue3环境中设置开发工具，创建Vue3项目，以及深入讲解了reactive、ref、computed、watch和watchEffect等核心概念，包括如何使用Volar插件提升开发体验。

摘要由CSDN通过智能技术生成

Vue3 学习

开发环境

tong ~/Projects/EasyVue3 $ node -v
v16.20.1
tong ~/Projects/EasyVue3 $ sw_vers
ProductName:            macOS
ProductVersion:         14.1.1
BuildVersion:           23B81
tong ~/Projects/EasyVue3 $ npm --version
8.19.4 
tong ~/Projects/EasyVue3 $ code -v  
1.84.2
1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
arm64

#如果没有安装 vue-cli  ，  -g表示安装在node全局
npm install  @vue/cli -g
#安装好之后查看版本信息
tong ~/Projects/EasyVue3 $ vue --version
@vue/cli 5.0.8

创建 Vue3 项目

vue create tomyee-vue3

根据提示一次原则 yes/no即可，创建好之后 cd 到项目文件夹内

了解项目基本结构
App.vue查看到使用组件 HelloWorld，点进去跳转到 HelloWorld.vue
组合式 API
提前安装好 VScode 插件 volar，写代码可以自动提示补全导入等。

<script setup lang="ts">
import { EffectScope, computed, reactive, ref, watch, watchEffect } from 'vue';


// 1.reactive (对对象类型值进行响应式处理)
// shallowReactive(浅响应式=>只有第一层可以修改)
const myData = reactive({
  name: "tong",
  age : 18,
  friends : ['kuangshen','wuyou']
})


// function clickHandler(){
//   myData.push(10)
// }

// 2. ref (支持对基本类型值进行响应式处理)
const count = ref(0)
function clickHandler(){
  count.value++
  // content.value += "!"
  myData.age ++
}

// 3. readonly    只读，所以是非响应式的
// shallowReadonly (根属性只读，其他可读写，非响应式查看效果需要刷新)

// 4. computed 计算属性
const content = ref("这是测试文本")
const getLen = computed(()=>{
  console.log('计算属性执行一次')
  return content.value.length
})

// 5. watch 
// 侦听 ref 直接写名称 不需要.value
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
// 侦听 reactive 中的属性，需要通过函数的方式来包裹
watch(()=> myData.age,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
// 侦听 reactive 本身直接写名称即可


// 6.watchEffect 新功能 ,副作用函数。 
// 只要内部包含的响应式数据发生变化，就会自动触发
watchEffect(()=>{
  console.log('count:'+count.value+',age:'+myData.age)
})
// 单个监听用 watch  多个监听用 watchEffect
</script>