Vue3 核心语法

1. Vue3 响应式语法

1.1 reactive 和 shallowReactive

reactive和shallowReactive 用于声明对象类型的值

<template>
  <h1>{{ myData }}</h1>
  <button @click="clickHandler2">修改</button>
</template>

<script setup>
import {reactive} from "vue";

const myArray = reactive([1, 2, 3])

function clickHandler1 () {
  // 通过对象.属性的方式操作
  myArray.push()
}

const myData = reactive({
  name:'Sakura',
  age: 21,
  language:'Golang'
})

function clickHandler2 () {
  // 通过对象.属性的方式操作
  myData.name="LF"
  myData.age++
}

</script>

如果渲染的数据比较大的话，将所有的数据都设置为响应式的话，在生成的时候会有额外的监测

有些数据并不会有修改

所以shallowReactive ：可以设置属性为一个浅响应式结构

浅响应式：只有根属性（ 第一层属性 ）是响应式的，而内部属性是非响应式的

const myData = shallowReactive({
  name:'Sakura',
  age: 21,
  language:['Golang','Python','Shell']
})

function clickHandler () {
  // // 只能修改第一层属性
  // myData.name="LF"
  // myData.age++
  // 无法对第二层属性进行修改
  myData.language.push("Java")
}

1.2 ref

ref 适用于基本类型值

操作ref类型的数据时候，不能直接操作count本身，而是操作count.value

<template>
  <h1>{{ data }}</h1>
  <button @click="clickdata">修改</button>
</template>

<script setup>
import {ref, shallowReactive} from "vue";

// 底层是创建一个空对象,然后把data挂载value这个属性上
// 然后对这个数据进行响应式处理
const data = ref(0)

function clickdata (){
  data.value++
}
</script>

1.3 readonly 只读 和 shallowReadOnly

readonly因为是只读类型的数据，无法进行响应式处理，所以就是非响应式数据

const myData = readonly({
  name:'Sakura',
  age: 21,
  language:['Golang','Python','Shell']
})
// 无法对非响应式数据进行修改
function clickdata (){
  myData.name='LF'
  myData.age++
  myData.language.push('Java')	
}

shallowReadOnly ：只有根属性是只读的，内部的属性 ( 二级属性 ) 是非只读的

const myData = shallowReadonly({
  name:'Sakura',
  age: 21,
  language:['Golang','Python','Shell']
})

function clickdata (){
  // 根属性无法修改
  myData.name="Sakrua"
  // 二级属性可以修改
  myData.language.push("Java")
}

2. computed 计算属性

计算属性的特点: 使用缓存

<script setup>
import {computed} from "vue";


const content = ref("Sakura Vue3")
// 计算属性
const getlen = computed(() => {
  console.log('计算属性执行了')
  return content.value.length
})

</script>

<template>

  <h1>{{ getlen }}</h1>
  <h1>{{ getlen }}</h1>
  <h1>{{ getlen }}</h1>

</template>

虽然调用了三次，可以看到只执行了一次

3. watch 侦听器

watch 侦听器可以监听响应式数据的变化

3.1 侦听 ref 类型的数据

<script setup>
import {computed, readonly, ref, registerRuntimeCompiler, shallowReadonly, watch} from "vue";


const count = ref(0)

// 侦听 count 值发送变化后执行的操作
watch(count,(newvalue,oldValue) =>{
  console.log(newvalue,oldValue)
})
// count++函数
function clickcount(){
  count.value++
}
</script>

<template>
  <button @click="clickcount">按钮</button>
</template>

可以看到在控制台中删除了新值和旧值

3.2 侦听 reactive 对象类型的数据

如果要监听对象中的某个属性watch( () => obj.age, (newvalue, oldvalue) ) 需要通过一个函数的形式包裹

<script setup>
import {reactive, watch} from "vue";


const myData = reactive({
  name:'Sakura',
  age: 21,
  language:'Golang'
})

// 通过函数的形式包裹以便于侦听属性
watch(() => myData.age,(newvalue,oldValue) =>{
  console.log(newvalue,oldValue)
})

function clickcount(){
  myData.age++
}
</script>

4. watchEffect

只要是在watchEffect 函数内部包裹的响应式数据发送变化，就会执行里面的逻辑，所以叫副作用函数

<script setup>
import {reactive, ref, watch, watchEffect} from "vue";

// ref类型的数据
const count = ref(0)

// reactive 类型的数据
const myData = reactive({
  name:'Sakura',
  age: 21,
  language:'Golang'
})


function clickcount(){
  myData.age++
}

watchEffect(()=>{
  console.log("count值为:",count.value)
  console.log('myData中age:',myData.age)
})

</script>

默认就会执行一次，不管其中的那个值发送变化，都会执行其中定义的逻辑代码

5. Pinal

• 首先 Vue3 出现之后出来一个新的脚手架工具 create-vue

# 初始化项目
npm init vue@latest

# 安装依赖
npm i

5.1 定义 pinal 实例

在 pinal 中，它会自动将我们在模块中所使用的这些组合式函数识别为状态管理的相关内容

ref -> state

computed -> getters

function -> action

import { ref, computed } from 'vue'
# 对pinal实例的方式
import { defineStore } from 'pinia'

// dinfineStore定义模块,名字counter
export const useCounterStore = defineStore('counter', () => {
  // 
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

如果想要建立其他模块的话，可以在 stores 下面新建一个user.js里面使用dineStore user

5.2 使用 pinal

<script setup>
// 1.导入
import { useCounterStore } from "../stores/counter"

// 2.引入pinal模块
const countStore = useCounterStore()

// 3.使用
</script>

<template>
  <div class="about">
    <h1>Count:{{ countStore.count }}</h1>
    <h1>2*Count:{{ countStore.doubleCount }}</h1>
    <button @click="countStore.increment()">点击</button>
  </div>
</template>