vue3的学习

之前看的那个网课我是没想到直接白雪。命名标题是vue3,但是内容是vue2,好不容易看到vue3的时候后面就要收费了。

今天下午一直在肝项目的前端,

这个是今天下午的收获 主要就是大概知道了路由怎么使用。但是七夕节还是又很多不明白,刚刚问了一个实验室的大佬,他刚刚给我讲一下vue项目里面的关系,我看了很多视频都没有讲,在vue项目只有一个App.vue,然后只有一个html文件,App.vue这个组将就是调用其他的页面,其他的页面写在视图这个文件夹中的,这个视图就是写一些登录界面注册界面等一些大界面,然后还有一个文件就是companont文件,这个文件就是放哪些大界面中的一下小组件,比如像搜索框,导航栏之类的。

然后重新开始上了一门看网课。

主要就是学了setup糖,setup和vue2中的setup完全不一样,当ts语句加上了这个,ts语句中的代码就有点像一个java对象,里面含有一些成员方法还有一些成员变量。

4.2:setup 包含的生命周期

onBeforeMount------挂载开始前调用

onMounted------挂载后调用

onBeforeUpdate------当响应数据改变,且重新渲染前调用

onUpdated------重新渲染后调用

onBeforeUnmount------Vue实例销毁前调用

onUnmounted------实例销毁后调用

onActivated------当keep-alive组件被激活时调用

onDeactivated------当keep-alive组件取消激活时调用

onErrorCaptured------从子组件中捕获错误时调用

javascript 复制代码
import { onMounted } from 'vue'
export default {
  name: "hello",
  setup(msg) {
    onMounted(()=>{
      console.log("onMounted");
    })
    console.log(msg);
    return { name:"Mr liu" };
  },
  beforeCreate(){
    console.log("beforeCreate");
  }
};

setup使用ref对数据进行响应式绑定

响应式绑定:使用ref

javascript 复制代码
<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h5>count:{{count}}</h5>
  </div>
</template>
<script>
import { onMounted } from 'vue'
export default {
  name: "hello",
  setup(msg) {
    onMounted(()=>{
      console.log("onMounted");
    })
    console.log(msg);

    //创建定时器增加count值
    let count = 1;
    setInterval(()=>{
      count++
    },1000)
    return { name:"Mr liu",count:count };
  },
  beforeCreate(){
    console.log("beforeCreate");
  }
};
</script>
<style scoped>
</style>

虽然我们创建了定时器增加count的值,但视图并未发生变化。

javascript 复制代码
	//创建定时器增加count值
    let count = ref(1);
    setInterval(()=>{
      count.value++
    },1000)
    return { name:"Mr liu",count:count };
相关推荐
Hello_Embed21 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中1 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h1 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡1 天前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
前端君1 天前
实现最大异步并发执行队列
javascript
limengshi1383921 天前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
周周记笔记1 天前
学习笔记:第一个Python程序
笔记·学习
萌萌哒草头将军1 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite