vue3语法

最新推荐文章于 2024-04-01 09:50:15 发布

demo11111111

最新推荐文章于 2024-04-01 09:50:15 发布

阅读量765

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45952585/article/details/131617260

版权

文章目录

一、Vue3 里 script 的三种写法
二、如何使用 script setup 编写组件
三、结语

前言：此篇文章做出了基础的vue3语法，以及和vue2语法的对比，希望对你有帮助！

一、Vue3 里 script 的三种写法

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，

1、最基本的vue2写法

<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script>
export default {
    data() {
        return {
            count: 1,
        };
    },
    methods: {
        onClick() {
            this.count += 1;
        },
    },
}
</script>

2、setup() 属性

<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script>
import { ref } from 'vue';
export default {
    // 注意这部分
    setup() {
        let count = ref(1);
        const onClick = () => {
            count.value += 1;
        };
        return {
            count,
            onClick,
        };
    },

}
</script>

3、script setup

<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1);
const onClick = () => {
    count.value += 1;
};
</script>

正如你看到的那样，无论是代码行数，还是代码的精简度，script setup 的方式是最简单的形式。

如果你对 Vue 很熟悉，那么，我推荐你使用 script setup 的方式。

这种写法，让 Vue3 成了我最喜欢的前端框架。

如果你还是前端新人，那么，我推荐你先学习第一种写法。

因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。

第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。

第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3 的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。

所以，接下来，我们主要介绍的，也就是 script setup ，这种写法里需要了解的内容。

注意： script setup (上述代码写法)本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。

二、如何使用 script setup 编写组件

学习 Vue3 并不代表你需要新学习一个技术，Vue3 的底层开发思想，跟 Vue2 是没有差别的。

V3 和 V2 的区别就像是，你用不同的语言或者方言说同一句话。

所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。

1、data——唯一需要注意的地方

整个 data 这一部分的内容，你只需要记住下面这一点。

以前在 data 中创建的属性，现在全都用 ref() 声明。

在 template 中直接用，在 script 中记得加 .value 。

在开头，我就已经写了一个简单的例子，我们直接拿过来做对比。
1）写法对比

// Vue2 的写法
<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script>
export default {
    data() {
        return {
            count: 1,
        };
    },
    methods: {
        onClick() {
            this.count += 1;
        },
    },
}
</script>

// Vue3 的写法
<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script setup>
import { ref } from 'vue';
// 用这种方式声明
const count = ref(1);
const onClick = () => {
    // 使用的时候记得 .value
    count.value += 1;
};
</script>

2）注意事项——组合式 api 的心智负担

a、ref 和 reactive

Vue3 里，还提供了一个叫做 reactive 的 api。

但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。

b、什么时候用 ref() 包裹，什么时候不用。

要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。

当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。

只不过这样做，你在使用的时候，需要一直 .value。

c、不要解构使用

在使用时，不要像下面这样去写，会丢失响应性。

也就是会出现更新了值，但是页面没有更新的情况

// Vue3 的写法
<template>
    <div>{{ count }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1);
const onClick = () => {
    // 不要这样写！！
    const { value } = count;
    value += 1;
};
</script>

注意：学习 Vue3 就需要考虑像这样的内容，徒增了学习成本。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。
这也是为什么我推荐新人先学习 Vue2 的写法。

2、methods

声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。

剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。

// Vue2 的写法
<template>
    <div @click="onClick">
        这是一个div
    </div>
</template>
<script>
export default {
    methods: {
        onClick() {
            console.log('clicked')
        },
    },
}
</script>

// Vue3 的写法
<template>
    <div @click="onClick">
        这是一个div
    </div>
</template>
<script setup>
// 注意这部分
const onClick = () => {
    console.log('clicked')
}
</script>

3、props

声明 props 我们可以用 defineProps()，具体写法，我们看代码。
1）写法对比

// Vue2 的写法
<template>
    <div>{{ foo }}</div>
</template>
<script>
export default {
    props: {
        foo: String,
    },
    created() {
        console.log(this.foo);
    },
}
</script>

// Vue3 的写法
<template>
    <div>{{ foo }}</div>
</template>
<script setup>
// 注意这里
const props = defineProps({
    foo: String
})
// 在 script 标签里使用
console.log(props.foo)
</script>

2）注意事项——组合式 api 的心智负担
使用 props 时，同样注意不要使用解构的方式。

<script setup>
const props = defineProps({
    foo: String
})
// 不要这样写
const { foo } = props;
console.log(foo)
</script>

4、emits 事件

与 props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。

// Vue2 的写法
<template>
    <div @click="onClick">
        这是一个div
    </div>
</template>
<script>
export default {
    emits: ['click'], // 注意这里
    methods: {
        onClick() {
            this.$emit('click'); // 注意这里
        },
    },

}
</script>

// Vue3 的写法
<template>
    <div @click="onClick">
        这是一个div
    </div>
</template>
<script setup>
// 注意这里
const emit = defineEmits(['click']);
const onClick = () => {
    emit('click') // 注意这里
}
</script>

5、computed

直接上写法对比。

// Vue2 的写法
<template>
    <div>
        <span>{{ value }}</span>
        <span>{{ reversedValue }}</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: 'this is a value',
        };
    },
    computed: {
        reversedValue() {
            return value
                .split('').reverse().join('');
        },
    },
}
</script>

// Vue3 的写法
<template>
    <div>
        <span>{{ value }}</span>
        <span>{{ reversedValue }}</span>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const value = ref('this is a value')
// 注意这里
const reversedValue = computed(() => {
    // 使用 ref 需要 .value
    return value.value
        .split('').reverse().join('');
})
</script>

6、watch

这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。

两种写法的区别是：

watch 需要你明确指定依赖的变量，才能做到监听效果。
而 watchEffect 会根据你使用的变量，自动的实现监听效果。

1）直接使用 watch

// Vue2 的写法
<template>
    <div>{{ count }}</div>
    <div>{{ anotherCount }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script>
export default {
    data() {
        return {
            count: 1,
            anotherCount: 0,
        };
    },
    methods: {
        onClick() {
            this.count += 1;
        },
    },
    watch: {
        count(newValue) {
            this.anotherCount = newValue - 1;
        },
    },
}
</script>

// Vue3 的写法
<template>
    <div>{{ count }}</div>
    <div>{{ anotherCount }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const onClick = () => {
    count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
// 需要在这里，
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {
    anotherCount.value = newValue - 1;
})
</script>

2）使用 watchEffect

// Vue2 的写法
<template>
    <div>{{ count }}</div>
    <div>{{ anotherCount }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script>
export default {
    data() {
        return {
            count: 1,
            anotherCount: 0,
        };
    },
    methods: {
        onClick() {
            this.count += 1;
        },
    },
    watch: {
        count(newValue) {
            this.anotherCount = newValue - 1;
        },
    },
}
</script>

// Vue3 的写法
<template>
    <div>{{ count }}</div>
    <div>{{ anotherCount }}</div>
    <button @click="onClick">
        增加 1
    </button>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(1);
const onClick = () => {
    count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
watchEffect(() => {
    // 会自动根据 count.value 的变化，
    // 触发下面的操作
    anotherCount.value = count.value - 1;
})
</script>

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在 script setup中，不能使用 beforeCreate 和 created 两个钩子。

如果你熟悉相关的生命周期，只需要记得在 setup 里，用 on 开头，加上大写首字母就行。

// 选项式 api 写法
<template>
    <div></div>
</template>
<script>
export default {
    beforeCreate() { },
    created() { },

    beforeMount() { },
    mounted() { },

    beforeUpdate() { },
    updated() { },

    // Vue2 里叫 beforeDestroy
    beforeUnmount() { },
    // Vue2 里叫 destroyed
    unmounted() { },

    // 其他钩子不常用，所以不列了。
}
</script>

// 组合式 api 写法
<template>
    <div></div>
</template>
<script setup>
import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
} from 'vue'
onBeforeMount(() => { })
onMounted(() => { })
onBeforeUpdate(() => { })
onUpdated(() => { })
onBeforeUnmount(() => { })
onUnmounted(() => { })
</script>

三、结语

好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。

这篇文章本身不能做到帮你理解所有 Vue3 的内容，但是能帮你快速掌握 Vue3 的写法。

如果想做到对 Vue3 的整个内容心里有数，还需要你自己多看看 Vue3 的官方文档。
参考资料
https://mp.weixin.qq.com/s/PC4Hzz13kjEVtsFsuxMb-w