vue3相关知识点_vue3 console.log-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87202881/article/details/145395089

title: vue_1
date: 2025-01-28 12:00:00
tags:
  - 前端
categories:
  - 前端

vue3

Webpack ~ vite

vue3是基于vite创建的

vite 更快一点

一些准备工作

准备后如图所示

插件

Main.ts

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

App 是根组件，createApp是盆

npm run dev

APP.vue

<template>
  <div class="app">
    <h1>你好啊！</h1>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App' //组件名
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

简单效果实现

<template>
  <div class="person">
    <h2>姓名：{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄：{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    data(){
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      // 修改姓名
      changeName(){
        this.name = 'zhang-san'
      },
      // 修改年龄
      changeAge(){
        this.age += 1
      },
      // 展示联系方式
      showTel(){
        alert(this.tel)
      }
    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

这个代码分别是cue组件的三个主要部分，分别对应的模版，脚本和样式

模版部分：也就是trmplate

模版

模版是vue组件的视图部分，定义了组件的html结构

在vue中。模版部分是通过高{% raw %}{ {}}{% endraw %}语法实现数据绑定的，{% raw %}{ {name}}{% endraw %} 会绑定到 data 中的 name 数据。

其中的@click 指令绑定点击事件，点击按钮时执行相应的方法,chageName,changeAge,changeTel

<template>
  <div class="person">
    <h2>姓名：{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄：{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

脚本部分

脚本定义了vue组件的逻辑部分

data ：组件的状态，即组件中使用的数据
Methods:定义组件的方法，这些方法可以在模版中调用来响应用户事件

name : 组件的名字，这里是'Person',在vue开发工具中查看到这个组件

<script lang="ts">
  export default {
    name:'Person',
    data(){
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      // 修改姓名
      changeName(){
        this.name = 'zhang-san'
      },
      // 修改年龄
      changeAge(){
        this.age += 1
      },
      // 展示联系方式
      showTel(){
        alert(this.tel)
      }
    }
  }
</script>

这段代码是一个 Vue 组件 的脚本部分，使用的是 TypeScript 语法。它定义了组件的数据、方法和 组件的名称

export default {
  name: 'Person',  这里就是组件的名称
  data() { ... },
  methods: { ... }
}

export default 是一个 ES6 模块语法，它表示该文件导出的内容是一个对象，并且该对象是默认导出的。这使得 Vue 在加载组件时可以导入这个对象并使用它来渲染组件

样式部分

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

scoped 属性确保这些样式只作用于当前组件，不会影响到其他组件。这是因为 Vue 会为每个组件自动加上独特的属性选择器（如 .person 只作用于当前组件的 .person 元素）。

app.vue

<template>
  <div class="app">
    <h1>你好啊！</h1>
    <Person/>
  </div>
</template>

<script lang="ts">
  import Person from './components/Person.vue'

  export default {
    name:'App', //组件名
    components:{Person} //注册组件
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

Export default{}

export default {
  name: 'App',
  components: { Person }
}

export default 语句使得这个对象成为当前模块的默认导出。这意味着在其他地方使用 import 时，就可以导入这个对象。该对象定义了一个 Vue 组件，组件的名字是 App（通过 name: 'App' 设置）。App 是这个 Vue 组件的名称，它通常是根组件或父组件的名称。

• name 属性指定了当前组件的名字。在 Vue 开发工具中，App 组件将显示为 App，它通常是 Vue 应用的根组件。

• App 组件是父组件，而 Person 组件是它的子组件。

• components 是一个 Vue 组件选项，表示当前组件所使用的子组件。

• 这里通过 components: { Person } 注册了 Person 组件，意味着在 App 组件的模板中可以使用 <Person 标签来引用 Person 组件。

• 由于我们已经通过 import Person from './components/Person.vue' 导入了 Person 组件，所以在 components 中注册它时，只需要直接写 Person 就可以了。

【OptionsAPI 与 CompositionAPI】

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

<template>
  <div class="person">
    <h2>姓名：{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄：{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    beforeCreate(){
      console.log('beforeCreate')
    },
    setup(){
      console.log(this) //setup中的this是undefined，Vue3在弱化this了
      // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
      let name = '张三'
      let age = 18
      let tel = '13888888888'
      
      // 方法
      function changeName() {
        name = 'zhang-san' //注意：这样修改name，页面是没有变化的
        console.log(name) //name确实改了，但name不是响应式的
      }
      function changeAge() {
        age += 1 //注意：这样修改age，页面是没有变化的
        console.log(age) //age确实改了，但age不是响应式的
      }
      function showTel() {
        alert(tel)
      }

      // 将数据、方法交出去，模板中才可以使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

这段代码展示了一个vue3组件的setup()函数的使用，并且展示了一些vue3中的特性

Setup与compositionAPI

组件名称

export default {
  name: 'Person',
  beforeCreate() {
    console.log('beforeCreate')
  },

beforeCreate() 是一个 生命周期钩子，它会在 Vue 实例被创建之前调用。这是 Vue 2 和 Vue 3 中都存在的生命周期钩子，但是在 Vue 3 的 Composition API 中，生命周期钩子的使用方式发生了变化，通常会使用 onBeforeMount 等新的钩子函数（在 setup() 函数中）。

setup函数

setup() {
  console.log(this) // setup中的this是undefined，Vue3在弱化this了

• setup() 函数是 Vue 3 引入的 Composition API 的一部分，目的是简化组件的状态和行为的管理。

• 在 setup() 中，this 是 undefined，这与 Vue 2 中的 this（指向当前组件实例）不同。Vue 3 通过 Composition API 进行了优化，弱化了对 this 的依赖，增强了对组合逻辑的关注。此时，你应该通过返回的对象来访问数据和方法，而不是通过 this。

定义数据

let name = '张三'
let age = 18
let tel = '13888888888'

定义方法

function changeName() {
  name = 'zhang-san' // 注意：这样修改name，页面是没有变化的
  console.log(name) // name确实改了，但name不是响应式的
}
function changeAge() {
  age += 1 // 注意：这样修改age，页面是没有变化的
  console.log(age) // age确实改了，但age不是响应式的
}
function showTel() {
  alert(tel)
}

changeName()、changeAge() 和 showTel() 是组件的方法。修改 name 和 age 时，你会发现页面没有发生变化。这是因为 name 和 age 是普通的 JavaScript 变量，而不是响应式数据。

如果你希望这些数据能够自动反映到模板中，应该使用 Vue 3 的响应式 API（如 ref()