Vue3 + vite 学习笔记

最新推荐文章于 2024-04-29 05:33:08 发布

骚瑞这是个bug

最新推荐文章于 2024-04-29 05:33:08 发布

阅读量326

点赞数

分类专栏： ts 文章标签： vue.js typescript

本文链接：https://blog.csdn.net/thesize/article/details/121076655

版权

本文介绍了如何搭建Vue3的Vite项目，并深入探讨了setup函数、computed、watch和watchEffect的区别。文章指出watchEffect在组件初始化时自动收集依赖，而watch需要指定监听属性。此外，还提到了生命周期、hooks函数以及ref、reactive和toRef的使用，特别是如何利用它们处理响应式数据和避免多次请求接口问题。

摘要由CSDN通过智能技术生成

一、搭建第一个 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'">