vue3笔记

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div ref="getName">{{ name }}</div>
    <button @click="changeone">ceshi</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRef, toRefs } from 'vue'
import { computed } from 'vue';
import { watch } from 'vue';

// let name = ref("dfaf") //此时name不是响应式的
const games = ref([
  {
    id: 1, name: "222",
  },
  {
    id: 2, name: "222",
  },
  {
    id: 30, name: "222",
  }
])

let person = reactive(
  {
    name: 'dfasd',
    age: 3232,
    car: {
      c1: '121',
      c2: '333'
    }
  }
)
let { name, age } = toRefs(person) //toRefs用法  
//方法
function ToRefs1() {
  name.value += '2'
  age.value += 1
}


function changeone() {
  name.value = 'sdfkjsd' // 这样修改页面不变化，数据确实改了
  console.log(name.value, 3323)

  console.log(games.value[0].id, 232323)
}
//使用计算属性
let firstName = ref('zhang')
let lastName = ref('san')

let fullName1 = computed(() => {
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

//既可以读，又可以写
let fullName2 = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value

  },
  set(val) {
    const [str1, str2] = val
    firstName.value = str1
    lastName.value = str2
  }
})
let sum = ref(0)
console.log(sum.value)
//1.监听
watch(sum, (newValue, oldValue) => {
  console.log('sum变化了', newValue, oldValue)
})
//2.监视ref定义的对象类型的数据，监视的是对象里面地址值
watch(person, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, { deep: true, immediate: true })
//使用reactiv定义值时候，整体替换的时候用 object.assign(person,{name:'122',age:21})

//3.监听ref和reactiv里面的某个属性,且属性是基本类型的，要写成函数式
watch(() => { return person.name }, (newVlue, oldValue) => {

})
watch(() => person.name, (newVlue, oldValue) => {
  console.log(newVlue, oldValue)
})

//4.监听ref和reactiv里面的某个属性,且属性是对象类型的，要写成函数式
watch(() => person.car, (newVlue, oldValue) => {
  console.log(newVlue, oldValue)
}, { deep: true })

//5.监视上述多个数据
watch([() => person.car.c1, () => person.name], (newVlue, oldValue) => {
  console.log(newVlue, oldValue)
}, { deep: true })
// watchEffect  全自动监视
import { watchEffect } from 'vue';
watchEffect(() => {

})
// 获取dom
// import { ref } from 'vue';
let getName = ref()
function getddd() {
  console.log(getName.value)
} 
</script>
<style>
/*
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
*/
</style>