vue3快速入门

<template>
  <h1>{{ count }}</h1>
  <h1>{{ myData }}</h1>
  <h1>{{ content }}</h1>
  <h1>{{ getLen }}</h1>
  <h1>{{ getLen }}</h1>
  <button @click="clickfn">修改</button>
</template>
<script setup>
import { shallowReactive,ref,computed,watch,watchEffect} from 'vue';

// 1、reactive 全响应式 必须是对象类型 | shallowReactive 浅响应式  只有第一层属性是响应式
const myData = shallowReactive({
  name:'szx',
  friends:[1,2,3]
})

// 2、ref .value
const count = ref(0)

// 3、readonly 不能改 | shadowReadonly 只有根属性只读

function clickfn(){
  myData.friends.push(10)
  myData.name+=' ! '
  count.value++
  content.value += '!'
}

// 4、computed 虽然有两次进行渲染 但是点击 每次只会修改一个值 
// 因为只要数据有了变化 计算出数据结果后就缓存 
// 第一次修改 后面没修改就直接使用缓存结果 避免重复执行
// 这是计算属性执行的一个基本特征
const content = ref('这是一段测试内容')
const getLen = computed(()=>{
  console.log('计算属性执行了')
  return content.value.length
})

// 5、watch 侦听单一数据变化
// 对ref
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
// 对reactive 第一个参数需要对属性进行包裹
watch(() => myData.name,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})

// 6、watchEffect 副作用函数 不用写监听对象 自动监听函数内的 
// 多个响应式数据
watchEffect(()=>{
  console.log(count.value,myData.name)
})
</script>