Vue入门3

这节我们在vue2的基础上学习一下vue3相比vue2新增的核心语法。

Vue3与Vue2的区别

vue2是选项式API写成的，data选项里都是数据，methods选项里都是函数。如果某个组件逻辑复杂，可能与当前功能相关的代码分散在整个组件的多个位置，在进行代码的编写和维护时，操作起来就会很繁琐。
对此vue3提供了组合式API，可以使用更加灵活的方式去书写代码，更像原生js，可以随意在代码的任意位置进行数据声明、函数封装、计算属性的设置监听器的处理等操作，不再受限于某一个选项，不再需要把一个功能的多个部分分割在多个区域。

setup

vue3支持vue2的写法，可以使用选项式写法，把setup作为export的一个配置项来书写，但更常使用的是在script标签后面直接加一个setup，这样script内部的空间就相当于setup，import的组件都会自动成为当前组件的子组件。

<script setup>
// import的组件会自动注册到当前组件的作用域中
import HelloWorld from './components/HelloWorld.vue'

</script>

声明响应式数据

既然vue3中可以不写data选项，那么应该如何声明响应式数据呢？有两种方法，reactive和ref

reactive

reactive是一个用于声明响应式对象数据的函数，使用前要先引入，但是我的插件不太好用没法自动引入，就需要自己写一下。
使用示例如下：

import { reactive } from 'vue'

// 1. reactive 用于声明响应式对象数据
const myData1 = reactive([1, 2, 3]) // 数组也是对象
const myData2 = reactive({
  name: '张三',
  age: 20,
  friends: ['李雷', '韩梅梅']
})

// 函数可以在任意位置声明
function clickHandler () {
  myData1.push(10)
  myData2.friends.push('郭达')
}

myDate1和2就是响应式数据，可以通过函数直接修改并显示在页面上。vue3的函数和数据一样，不需要写在methods选项内，在script的任意位置都可以声明函数。 如果有几千几万条数据，又不需要每条都响应式，就可以使用shallowReactive，与reactive不同的是，它只会对根属性进行响应式处理，也就是只有第一层属性会响应式更改。

import { shallowReactive } from 'vue'

// shallowReactive 用于声明前响应式数据，只会对第一层属性进行响应式处理
const myData3 = shallowReactive({
  name: '李四',
  age: 20,
  friends: ['李雷', '韩梅梅']
})

function clickHandler () {
  myData3.friends.push('郭达') // 不会触发响应式更新
  myData3.age++ // 会触发响应式更新
}

ref

ref适用于基本类型值也就是非对象值进行操作。需要注意的是，在对ref声明的值进行修改的时候，需要加上.value，具体使用案例如下：

import { ref } from 'vue'

// 2. ref 用于声明基本类型数据
const count = ref(0)

function clickHandler () {
  count.value++ // 不能直接操作count值本身，而要操作count.value
}

声明只读数据readonly

不同于reactive和ref，readonly用于声明只读数据，不可以修改，非响应式

import { readonly } from 'vue';

const myData = readonly({
  name: '张三',
  age: 20,
  friends: ['李雷', '韩梅梅']
})

function clickHandler () {
  myData.age++ // 只读属性无法更改
}

与reactive和shallowReactive类似，readonly也有与之对应的shallowReadonly，如果我们只需要根属性只读而内部属性可更改，就可以使用这个函数。注意因为数据是非响应式的，需要我们自己刷新

import { shallowReadonly } from 'vue';

// shallowReadonly 用于声明根属性只读，内部属性可更改，也是非响应式
const myDatas = shallowReadonly({
  name: '李四',
  age: 20,
  friends: ['李雷', '韩梅梅']
})

function clickHandler () {
  myDatas.age++ // 只读根属性无法更改
  myDatas.friends.push('郭达') // 只读内部属性可更改
}

计算属性computed

计算属性和vue2的用法也是一样的，具有缓存性，只有在数据发生改变时才会调用

import { ref, computed } from 'vue'

// 4. conmputed 计算属性
const count = ref('这是一段测试内容')
const getLen = computed(() => {
  console.log('计算属性执行了')
  return count.value.length
})

function clickHandler () {
  count.value+='!'
}

监听器 watch

watch适用于单一数据的监听，与vue2的使用略有不同。需要注意如果要监听ref对象，传入ref对象本身，无需.value；如果要监听reactive对象中的某一个值，需要通过函数的形式进行处理

import { ref, watch } from 'vue'

// 5. watch 监听器
// 监听ref无需.value
const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

function clickHandler () {
 count.value++
}

import { reactive, watch } from 'vue'

// 监听reactive对象的某一个值需要通过函数的形式
const myData = reactive({
  name: '张三',
  age: 20,
  friends: ['李雷', '韩梅梅']
})
watch(() => myData.age, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

function clickHandler () {
  myData.age++
}

watchEffect

这是vue3的新功能，watchEffect适用于多个数据的监听，内部包含的任意一个响应式对象发生变化都会触发这个函数

import { ref, reactive, watchEffect } from 'vue'

// 6. watchEffect 副作用监听器
// 内部包含的任意一个响应式对象发生变化都会触发这个函数
const count = ref(0)
const myData = reactive({
  name: '张三',
  age: 20,
  friends: ['李雷', '韩梅梅']
})
watchEffect(() => {
  console.log('count的值为' + count.value + '，age的值为' + myData.age)
})

function clickHandler () {
  count.value++ // 任意一个响应式对象发生变化都会触发副作用监听器
  myData.age++
}

Pinia

Pinia其实是vue3发布以后针对vuex的升级版，核心的状态管理逻辑是相同的，但是操作更加便捷好用。Pinia会自动把我们在模块中使用的组合式函数识别为状态管理相关函内容，ref-state，computed-getters，function-actions。
在stores目录中创建我们需要的状态管理文件，它的语法和vue3是几乎一样的，不需要复杂的选项。同时也有模块的概念。
在使用时只需要导入并调用一下，就可以使用啦