Vue3 + vite 学习笔记

一、 搭建第一个 Vite 项目

https://vitejs.cn/guide/
项目模板的话暂时没有，只能创建个最基础的项目。

二、初试

setup()

所有的逻辑代码都写在这个函数中。

定义函数

<template>
  <button @click="onClock">{
   {
    arr }}</button>
</template>
export default{
   
	name: '',
	setup() {
   
	    const data = reactive({
   
	        arr: 1,
	        obj: 6
	    })    
	    let onClock = () => {
   
	      data.arr++
	      // data.obj--
	    },
	    return {
   
	      ...toRefs(data),
	      onClock
	    }
	}
}

computed()

与vue2中computed配置功能一致

<template>
  <p><input type="text" v-model="num"></p>
  <p>{
   {
   nextNum}}</p>
</template>

import {
    ref, computed } from 'vue'

const num = ref(1)
const nextNum = computed(() => {
   
  return Number(num.value) + 1
})

watch()

监听的是属性，不是属性值，所以监听ref定义的数据，不用加 ‘.value’。
这里有点点小坑：
	在监听reactive定义的一个响应式数据时会出现拿不到正确的oldVal；

  <div>
    <p>姓名：{
   {
    obj.name }}</p>
    <p>年龄：{
   {
    obj.age }}</p>
    <p>职位：{
   {
    obj.job.job1.name }}</p>
    <p>薪资：{
   {
    obj.job.job1.salary }}K</p>
    <button @click="obj.name += 'Q'">