1.构建工具vite

现在vite是主流，按照官网教程执行创建工程的指令，会自动下载安装vite并创建对应项目

2.变量相关

ref：

1>能配置普通类型变量和对象类型变量使其变为动态变量，实际开发中用的更多的也是ref

2>vue3中ref在template中的用法和vue2一样，在script标签中获取时则和普通变量一样，都是通过**.value属性获取，配置在普通标签时获取的是dom元素**，配置在vue组件时获取的是组件实例，不过对应组件需要使用defineExpose函数对外暴露对应的变量，在父组件中才可以拿到相关属性

**3>**可以对整个变量进行重新赋值，通过.value重新赋值以及获取对应的数据

reactive：

1>只能配置对象类型，比如object，数组或者函数

2>局部变量可以通过obj.变量名重新赋值，整个变量只能通过Object.assign()函数来替换对象中的变量值， 否则会使整个变量失去响应式，成为普通变量

3>可以使用toRefs(reactive变量)或者toRef(reactive变量，'属性名')函数来使reactive对象的属性成为动态属性

3.计算属性computed

用法和vue2中的计算属性差不多，通过import引入后直接使用即可，和函数声明同样的使用方式，比如：const uppercaseMessage = computed(() => message.value.toUpperCase())

4.监听器watch和watchEffect

// 监听对象内部属性（用 getter）
const testWatch = watch(
 () => person.name, // 第一个参数可以传变量（基础变量），或者箭头函数（对象内部属性）
 (nv, ov) => ｛
  pushLog(`person.name 从 '${ov}' -> '${nv}'`
  // 直接执行watch的返回值中断监听
  testWatch()
 ),
 { immediate: false }
)

若需要监听的变量很多，不想反复配置watch，则可以使用watchEffect，和computed差不多，会根据回调函数中依赖的变量自动监听对应变量的数值变化

stopEffect = watchEffect(onInvalidate => {
  pushLog(`watchEffect: count=${count.value}, person.name=${person.name}`)
  onInvalidate(() => pushLog('watchEffect 清理回调触发'))
})