🚀 KK ~

前端草

4分钟阅读

安装依赖咯

sudo dnf install nodejs
node -v

初始化项目

# 创建项目名称要小写，安装的东西暂时不知道干啥就先 NO
npm create vue@latest
# 创建完成会有命令提示，按提示执行即可
cd vue-learn
npm install
npm run dev

开发工具可以使用 vscode + volar

  • package.json：可执行命令和核心的依赖
  • vite.config.js：Vue配置文件，装一些插件呀需要在这
  • src：源码文件夹
    • main.js：入口文件，决定项目是如何跑起来的
    • App.vue：根组件

组合式API的入口 Setup ，在 beforeCreate 钩子之前自动执行 reactive 和 ref 函数都用来生成响应式数据，也就是该数据变化后能够引起视图的更新，reactive 不能处理简单类型的数据，而 ref 可以，但处理过后的对象需要通过 .value 来取得

<script setup>
// 导包
import { ref } from 'vue'
 
const count = ref(0)
const addCount = () => {
  console.log("hello vue")
  count.value++
}
</script>
 
<template>
  <button @click="addCount">{{ count }}</button>
</template>

computed 是一个计算机属性函数，应该只用来做计算，且是只读的，不应该被手动修改

<script setup>
import { ref } from 'vue'
import { computed } from 'vue';
 
const counts = ref([0, 1, 3, 4, 5, 6, 7])
const count = computed(() => {
  return counts.value.filter(item => item > 2)
})
 
// 定时更改原来的列表，验证响应式
setTimeout(() => {
  console.log(3)
  counts.value.push(9)
}, 3000)
</script>
 
<template>
  <div>{{ counts }}</div>
  <div>{{ count }}</div>
</template>

watch 函数用来侦听一个或多个数据的变化，数据变化时执行回调函数，两个额外参数：immediate 立即执行（立马执行一次，变化时又执行），deep 深度侦听（默认是浅层监听，如果是一个对象的内部属性发生了变化，浅层监听是不会触发回调函数的）

<script setup>
import { ref, watch } from 'vue';
const a = ref(0);
const b = ref('hello');
const changeA = () => {
  a.value++;
}
const changeB = () => {
  b.value = 'world';
}
 
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log("有值发生变化了", oldA, "->", newA, " --- ", oldB, "->", newB);
}, { immediate: true });
</script>
 
<template>
  <button @click="changeA">{{ a }}</button>
  <button @click="changeB">{{ b }}</button>
</template>

以上侦听函数开启 deep 会对对象所有的属性进行侦听，这样会有性能损耗，如果我们只需要对对象的其中一个属性进行侦听，可以进行如下修改

<script setup>
import { ref, watch } from 'vue';
const people = ref({'name': 'Tom', 'age':10});
const changeName = () => people.value.name = 'Jack';
const changeAge = () => people.value.age++;
 
// 只监听年龄
watch(() => people.value.age, () => console.log(people.value.age));
 
</script>
 
<template>
  <button @click="changeName">change {{ people.name }}</button>
  <button @click="changeAge">change {{ people.age }}</button>
</template>

生命周期函数，及组件在各个生命周期所需要执行的函数，使用方法：引入，传入一个回调函数即可

关系图谱