Vue3快速使用手册

秃狼

已于 2024-02-05 21:29:45 修改

阅读量1.6k

点赞数 27

CC 4.0 BY-SA版权

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

于 2024-01-24 23:52:20 首次发布

本文链接：https://blog.csdn.net/Ostkakah/article/details/135705994

Vue3的创建

npm create vite@latest

1.设置项目名。

2.选择框架。

3.选择支持的语法，默认使用TS。

......

Vue3的使用

setUp(无法直接修改数据，也就是没有响应式)

在vue3中不不再推荐使用选项式编程而是使用组合式编程。

Vue2写法

<template>
  <div>
    <span>姓名:{
  
  {name}}</span>
    <br>
    <span>年龄:{
  
  {age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    data() {
        return {
            name: 'tolen',
            age: 18
        }
    },
    methods: {
        setName() {
            this.name = 'ostkaka'
        },
        addAge() {
            this.age++;
        }
    },
}
</script>

Vue3写法

<template>
  <div>
    <span>姓名:{
  
  {name}}</span>
    <br>
    <span>年龄:{
  
  {age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    setup() {
        //变量
        let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
        return {name, age, setName, addAge}
    }
}
</script>

如果data函数和setup中设置的变量名相互冲突的时候会优先读取setup中的数据。

但是每次都需要return对应的数据，写起来非常的麻烦，所以我们可以将setup单独写一个script。

<template>
  <div>
    <span>姓名:{
  
  {name}}</span>
    <br>
    <span>年龄:{
  
  {age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'Person',
}

</script>

<script lang="ts" setup>
    //变量
    let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
</script>

ref(用于定义响应式的基本数据，也可以定义对象，但是无法保证嵌套响应)

在我们需要保证响应式的数据赋值上使用ref函数，并且操作其中的vlaue属性,主要就是对value进行操作。

<script lang="ts" setup>
    import { ref } from 'vue'
    //变量，使用ref函数包裹
    let name = ref('tolen');
        let age = ref(18);
        //函数，主要做到响应式的效果就是使用ref中的value属性
        function setName() {
            name.value = 'ostkaka'
        }
        function addAge() {
            age.value++;
        }
</script>

reactive(用于定义响应式的对象)

在我们需要保证对象嵌套式的相应的时候我们就可以使用reactive。

<template>
  <div>
    <span>车牌:{
  
  {car.name}}</span>
    <br>
    <span>价格:{
  
  {car.cost}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">加价</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {reactive } from 'vue'
    //对象
    let car = reactive({
      name:'BYD',
      cost: 2000000
    });
        //函数
        function setName() {
            car.name = 'ostkaka'
        }
        function addAge() {
            car.cost+=10000;
        }
</script>

当要使用响应式对象赋值的时候，我们需要使用toRefs函数来将对象中键值赋值为响应式的数据。

我们每次使用ref中数据的时候都需要添加 .