Vue3-06 快速了解Vue代码结构

基础结构

Vue文件中基本上和咱们自己写Html、CSS、JS差不太多，主要也由这三部分组成

HTML部分：

<template>
	<div>这里面写HTML代码</div>
</template>

CSS部分：

<style scoped>
.aaa {
  font-size: 3em;
}
</style>

JS部分:这边使用的是TS

<script lang="ts">
export default {
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  methods: { }
}
</script>

学习Vue实际上主要就是学习上面JS里面的内容

详细描述

data

主要是return方法，其中多是写一些变量，例如

  data() {
    return {
    	id:1,
    	user:{
    		name:“zhangsan",
    		"age":12
    	},
    	data:[
    		{
    			color:"red",
    			with:"100px"
    		}
    	]
    }
  },

如上所述:它可以是一个常量，也可以是对象，也可以是数组，也不要榆木脑袋，例如user可以将后端传入的对象直接赋值，例如：

user:user

computed：

是一个对象，包含一些计算属性的定义。计算属性根据依赖的数据动态计算出一个新值，并且具有缓存特性，只有在依赖数据变化时才会重新计算。

实例：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

它可以每时每刻的计算其值并实时返回，它实际也是一种methods。不过他更注重性能

methods

是一个包含了一组方法的对象。这些方法可以在组件的模板中调用，用于处理事件、响应用户输入或者执行其他的业务逻辑。就是平时我们写的funcation都属于这里没的内容

methods: {
  greet() {
    alert(`Hello, ${this.name}!`);
  }
}

就是一堆js里面的function

watch

是一个对象，包含了对组件数据的监听器。它用于观察和响应数据的变化，并且可以执行异步操作或复杂的逻辑。

watch: {
  counter(newValue, oldValue) {
    console.log(`counter值从 ${oldValue} 更新为 ${newValue}`);
  }
}

常用的场景就是监听json中的变化，来调用某些函数

mounted

是一个生命周期钩子函数，表示组件已经被挂载到 DOM 上。在这个钩子函数中，可以进行一些初始化操作，或者请求数据。

mounted() {
  console.log('组件已经挂载到DOM');
}

这些属性和钩子函数都是 Vue 组件定义中常用的内容，通过它们可以实现组件的数据管理、业务逻辑处理、响应式更新等功能。

在者例如你在普通js中使用vue结构的话如何调用vue中的函数部分可以直接将vue中的method挂载到window窗口

window.greet = this.greet

created

里面是一些初始化变量，页面加载进去就会执行的代码，类似于JQuery中的$(function(){})

 created() {
    // 在组件创建后立即获取数据
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      // 模拟异步请求数据
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(posts => {
          this.posts = posts;
        });
    }
  }

  关注公众号：资小库，问题快速答疑解惑