Vue3学习笔记

一、vite快速创建Vue3项目

网址：https://vitejs.cn/vite3-cn/guide/#overview

npm 7+, extra double-dash is needed:

npm create vite@latest my-vue-app – --template vue
按照提示快速安装vue项目。

二、创建新应用

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

三、Vue3响应式基础

1. ref（可以申明任意数据类型）

引入ref，ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回，但在模板中使用ref，不需要使用.value

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0

function increment() {
  count.value++
}
</script>

ref深层响应

import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

注：每次我们都需要引入ref，我们可以安装插件，省略引入步骤

npm install -D unplugin-auto-import 

具体详见：https://blog.csdn.net/poppingJ/article/details/125429506?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170046369616800182720462%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=170046369616800182720462&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-125429506-null-null.142^v96pc_search_result_base1&utm_term=vue3%20reactive&spm=1018.2226.3001.4187

2. reactive（主要用来申明数组和对象）

reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的Proxy来实现数据响应式，相对于Vue2的Object.defineProperty，具有能监听增删操作，能监听对象属性的变化等优点

使用reactive定义对象数据类型举例

const paginationConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定义

const onChange = () => {
	paginationConfig.pageNum = 2 // js使用
	paginationConfig.pageSize = 20 // js使用
}

<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

若用reactive定义基本数据类型，Vue3会报警告错误

四、计算属性computed

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

现在当你再运行 fullName.value = ‘John Doe’ 时，setter 会被调用而 firstName 和 lastName 会随之更新。

五、监听属性watch

import { watch } from "vue" 
watch( name , ( curVal , preVal )=>{ //业务处理  }, options ) ；

共有三个参数，分别为：
	name：需要帧听的属性；
	(curVal,preVal)=>{ //业务处理 } 箭头函数，是监听到的最新值和本次修改之前的值，此处进行逻辑处理。
	options ：配置项，对监听器的配置，如：是否深度监听。

例：

<template>
  <div>
    <div>值：{{count}}</div>
    <button @click="add">改变值</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
export default {
  setup(){
    const count = ref(0);
    const add = () => {
      count.value ++
    };
    watch(count,(newVal,oldVal) => {
      console.log('值改变了',newVal,oldVal)
    })
    return {
      count,
      add,
    }
  }
}
</script>

详见：https://blog.csdn.net/ZYS10000/article/details/124535467

五、类和样式

1.绑定对象

const isActive = ref(true)
const hasError = ref(false)

<div class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
渲染的结果会是：<div class="static active"></div>

或

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div> 

//这将渲染：<div class="active"></div>

1.绑定数组

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>